<script lang="typescript">
    import logoWA from "../images/menu.svg"
    import logoTalk from "../images/chat.svg"
    import {menuVisiblilityStore} from "../../Stores/MenuStore";
    import {chatVisibilityStore} from "../../Stores/ChatStore";
    import {get} from "svelte/store";

    function showMenu(){
        menuVisiblilityStore.set(!get(menuVisiblilityStore))
    }
    function showChat(){
        chatVisibilityStore.set(true);
    }
</script>

<svelte:window/>

<main class="menuIcon">
  <span class=" nes-btn is-dark">
    <img src={logoWA} alt="open menu" on:click|preventDefault={showMenu}>
  </span>
  <span class=" nes-btn is-dark">
    <img src={logoTalk} alt="open menu" on:click|preventDefault={showChat}>
  </span>
</main>

<style lang="scss">
  .menuIcon {
    display: inline-grid;
    z-index: 90;
    position: relative;
    margin: 25px;
    img {
      pointer-events: auto;
      width: 24px;
      padding-top: 0;
      margin: 3px
    }
  }
  .menuIcon img:hover{
    transform: scale(1.2);
  }

  @media only screen and (max-width: 800px),
  only screen and (max-height: 800px) {
    .menuIcon {
      margin: 6px;

      img {
        width: 16px;
      }
    }
  }
</style>
