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.
62 lines
1.5 KiB
Svelte
62 lines
1.5 KiB
Svelte
<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: 20vh;
|
|
}
|
|
.menu ul {
|
|
list-style: none;
|
|
width: 40vw;
|
|
}
|
|
.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>
|
|
</ul>
|
|
</nav>
|
|
</div>
|