ProjectSegfault/website
4
2
Fork 1
mirror of https://github.com/ProjectSegfault/website.git synced 2025-05-31 14:12:04 +05:30
Code Issues Projects Releases Wiki Activity

implement navbar menu (closes #35)

Browse Source
This commit is contained in:
Akis
2022-07-27 19:45:53 +03:00
parent 58fd599ac9
commit 253e7e7193
3 changed files with 167 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/lib/Nav.svelte
View File

@ -1,3 +1,7 @@
<script>
import IconBars from "~icons/fa6-solid/bars";
</script>
<nav>
<a class="brand" href="/">
<img src="/logo.png" alt="Project Segfault logo" />
@ -9,7 +13,14 @@
>Segfault</span
>
</a>
<input type="checkbox" id="toggle-menu">
<label class="menu-icon" for="toggle-menu">
<a id="menu-icon">
<IconBars />
</a>
</label>
<div class="links">
<a href="https://instances.projectsegfau.lt/">Instances & Gameservers</a
>
@ -20,7 +31,10 @@
<a href="/members">Members</a>
<a href="https://blog.projectsegfau.lt/">Blog</a>
<a href="/legal">Legal</a>
</div>
</div>
</nav>
<style>
@ -32,13 +46,16 @@
align-items: center;
justify-content: space-between;
}
a.brand {
display: flex;
flex-direction: row;
align-items: center;
text-decoration: none;
}
.links {
display: flex;
gap: .5rem;
}
.links > * {
background-color: var(--tertiary);
@ -70,22 +87,60 @@
border-radius: 50%;
}
div.links {
display: flex;
gap: 8px;
.menu-icon {
cursor: pointer;
display: none;
}
@media only screen and (max-width: 820px) {
#toggle-menu {
display: none;
}
@media screen and (max-width: 1150px) {
.links {
display: none;
width: 100%;
background-color: var(--secondary);
padding-top: 2rem;
}
nav {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: normal;
}
div.links {
flex-direction: column;
margin-top: 10px;
gap: 19px;
.links a {
display: block;
}
.menu-icon {
display: block;
z-index: 1;
position: absolute;
top: .45rem;
right: 1rem;
background-color: var(--tertiary);
border: none;
border-radius: 10px;
padding: 1rem;
cursor: pointer;
line-height: 1;
}
#menu-icon {
display: flex;
align-items: center;
color: var(--text);
}
#toggle-menu:checked ~ .links {
display: flex;
flex-direction: column;
gap: 1rem;
}
}
</style>
</style>