workadventure/front/src/Components/Menu/MenuIcon.svelte
GRL78 7c956d1481
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>
2021-08-26 12:01:07 +02:00

41 lines
885 B
Svelte

<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">
<img src={logoWA} alt="open menu" class="nes-pointer" on:click|preventDefault={showMenu}>
</main>
<style lang="scss">
.menuIcon {
pointer-events: auto;
margin: 25px;
img {
width: 60px;
padding-top: 0;
}
}
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
.menuIcon {
margin: 3px;
img {
width: 50px;
}
}
}
</style>