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

front/src/Components/Menu/MenuIcon.svelte

@@ -1,39 +1,60 @@
 <script lang="typescript">
-    import logoWA from "../images/menu.svg"
-    import {menuVisiblilityStore} from "../../Stores/MenuStore";
-    import {get} from "svelte/store";
+  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 showMenu() {
+    menuVisiblilityStore.set(!get(menuVisiblilityStore))
+  }
+  function showChat() {
+    chatVisibilityStore.set(true);
+  }
 
-    function onKeyDown(e: KeyboardEvent) {
-        if (e.key === "Tab") {
-            showMenu();
-        }
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === "Tab") {
+      showMenu();
     }
+  }
 </script>
 
-<svelte:window on:keydown={onKeyDown}/>
+<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 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 {
-    pointer-events: auto;
+    display: inline-grid;
     margin: 25px;
+
     img {
+      pointer-events: auto;
       width: 24px;
+      padding-top: 0;
+      margin: 3px
     }
   }
-  @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
+
+  .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>
+</style>