<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;
    }
</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"));
	};
</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">
        <slot></slot>
    </div>
</div>
