You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.7 KiB
Svelte
73 lines
1.7 KiB
Svelte
<style>
|
|
.panel {
|
|
display: grid;
|
|
grid-template-columns: 1fr 7fr;
|
|
grid-template-rows: 1fr;
|
|
gap: 0px 0px;
|
|
grid-template-areas: "btn menu";
|
|
position: sticky;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
height: max(3vw, 1.7em);
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
grid-area: btn;
|
|
width: max(3vw, 1.7em);
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
.menu {
|
|
grid-area: menu;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
.panel {
|
|
background: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function click() {
|
|
console.log("click");
|
|
document
|
|
.querySelectorAll(".menu-btn")
|
|
.forEach(elem => elem.classList.toggle("darken"));
|
|
document
|
|
.querySelectorAll("#root")
|
|
.forEach(elem => elem.classList.toggle("darken"));
|
|
document
|
|
.querySelectorAll(".navigation-overlay")
|
|
.forEach(elem => elem.classList.toggle("open-nav"));
|
|
};
|
|
function click_link() {
|
|
document
|
|
.querySelectorAll(".menu-btn")
|
|
.forEach(elem => elem.classList.remove("darken"));
|
|
document
|
|
.querySelectorAll("#root")
|
|
.forEach(elem => elem.classList.remove("darken"));
|
|
document
|
|
.querySelectorAll(".navigation-overlay")
|
|
.forEach(elem => elem.classList.remove("open-nav"));
|
|
};
|
|
</script>
|
|
|
|
|
|
<div class="panel">
|
|
<div class="btn">
|
|
<div class="cross menu-btn" on:click|preventDefault="{click}" style="z-index: 1001">
|
|
<img src="/svg/menu1.svg" class="idle" alt="idle">
|
|
<img src="/svg/menu2.svg" class="active" alt="active">
|
|
</div>
|
|
</div>
|
|
<div class="menu" on:click="{click_link}">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|