Merge branch 'develop' of github.com:thecodingmachine/workadventure

front/src/Components/Menu/MenuIcon.svelte

@@ -1,29 +1,39 @@
 <script lang="typescript">
+    import logoWA from "../images/menu.svg"
+    import {menuVisiblilityStore} from "../../Stores/MenuStore";
+    import {get} from "svelte/store";
 
+    function showMenu(){
+        menuVisiblilityStore.set(!get(menuVisiblilityStore))
+    }
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (e.key === "Tab") {
+            showMenu();
+        }
+    }
 </script>
 
-<main class="menuIcon">
-    <section>
-        <button>
-            <img src="/static/images/menu.svg" alt="Open menu">
-        </button>
-    </section>
+<svelte:window on:keydown={onKeyDown}/>
+
+<main class="menuIcon nes-btn is-dark" on:click|preventDefault={showMenu}>
+    <img src={logoWA} alt="open menu" class="nes-pointer" >
 </main>
 
 <style lang="scss">
-    .menuIcon button {
-        padding: 2px 8px;
-        img {
-            width: 14px;
-            padding-top: 0;
-        }
+  .menuIcon {
+    pointer-events: auto;
+    margin: 25px;
+    img {
+      width: 24px;
     }
-    .menuIcon section {
-        margin: 10px;
-    }
-    @media only screen and (max-height: 700px) {
-        .menuIcon section {
-            margin: 2px;
-        }
+  }
+  @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
+    .menuIcon {
+      margin: 6px;
+      img {
+        width: 16px;
+      }
     }
+  }
 </style>