_Bastler
55 lines
1.2 KiB
Svelte
55 lines
1.2 KiB
Svelte
<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>
|