<script>
	import Logo from '../components/logo.svelte';


	function click_link() {
		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>

<style>
	.menu {
	  position: absolute;
	  left: 40vh;
	  top: 10vh;
	}
	.menu ul {
	  list-style: none;
	  width: 60vw;
	}
	.menu ul li {
	  font-family: "Gill Sans MT";
	  font-size: 5vh;
	  margin-bottom: 5vh;
	}
	.menu ul li a {
	  cursor: pointer;
	  color: #d73648;
	  transition: 0.3s;
	  text-decoration: none;
	}
	.menu ul li a:hover {
	  text-decoration: underline;
	  color: #7c242e;
	}
</style>

<div class="navigation-overlay" id="particles-js">
	<div class="cross cross-og" on:click="{click_link}">
		<img src="/svg/cross1.svg" class="idle" alt=" cross ">
		<img src="/svg/cross2.svg" class="active" alt=" cross ">
	</div>
	<Logo/>

	<nav class="menu">
		<ul>
			<li><a class="menu-link" on:click="{click_link}"href="/">Domů</a></li>
			<li><a class="menu-link" on:click="{click_link}"href="/predseda">Předseda spolku</a></li>
			<li><a class="menu-link" on:click="{click_link}"href="/prebiram">Přebírám spolek</a></li>
			<li><a class="menu-link" on:click="{click_link}"href="/zapojit-se">Chci se zapojit</a></li>
			<li><a class="menu-link" on:click="{click_link}"href="/zalozit-spolek">Chci založit spolek</a></li>
			<li><a class="menu-link" on:click="{click_link}"href="/oborovky">Chci vědět víc o oborovkách</a></li>
		</ul>
	</nav>
</div>
