REVIEW : Migration Menu and Report Menu in Svelte (#1363)

* WIP: svelte menu

* temp

* temp

* New menu svelte

* Migration of report menu in svelte

* Migration of registerCustomMenu for Menu in Svelte
Refactor subMenuStore
Suppression of old MenuScene and ReportMenu

* Suppression of HTML files that aren't use anymore

* fix deeployer

* First pass on css

* First pass on css

* Second pass on css and reportMenu

* Second pass on css and reportMenu

* Second pass on css and reportMenu

* Third pass on css and reportMenu

* Correction following test

* Contact page only if environment variable exist

* Update service worker

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>

* Change requested

* Change requested

Co-authored-by: kharhamel <oognic@gmail.com>
Co-authored-by: Gregoire Parant <g.parant@thecodingmachine.com>

front/src/Components/Menu/MenuIcon.svelte

@@ -1,33 +1,40 @@
 <script lang="typescript">
+    import logoWA from "../images/logo-WA-min.png"
+    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>
 
+<svelte:window on:keydown={onKeyDown}/>
+
 <main class="menuIcon">
-    <section>
-        <button>
-            <img src="/static/images/menu.svg" alt="Open menu">
-        </button>
-    </section>
+    <img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
 </main>
 
 <style lang="scss">
-    .menuIcon button {
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding: 2px 8px;
-        img {
-            width: 14px;
-            padding-top: 0;
-            /*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/
-        }
+  .menuIcon {
+    pointer-events: auto;
+    margin: 25px;
+    img {
+      width: 60px;
+      padding-top: 0;
     }
-    .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: 3px;
+      img {
+        width: 50px;
+      }
     }
+  }
 </style>