hyro/website
1
0
Fork 0
mirror of https://github.com/xHyroM/website.git synced 2024-11-22 15:01:05 +01:00
Code Issues Projects Releases Wiki Activity Actions

mobile nav bez js

Browse source
This commit is contained in:
OLIMINATOR 2022-12-12 17:19:35 +01:00
parent cffac9e62b
commit e72387b39f
2 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/icons/menu.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 6H21" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 18H21" stroke="#B7C8CB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 408 B

12
src/components/widgets/Navbar.astro
View file

@ -18,10 +18,12 @@ const navItems = [
--- ---
<header class="text-white text-xl h-16 border-b-[1px] border-neutral-800"> <header class="text-white text-xl h-16 border-b-[1px] border-neutral-800">
<Container class="flex justify-between items-center h-full"> <Container
class="flex justify-around md:justify-between items-center h-full"
>
<a class="font-extrabold text-2xl" href="/">xHyroM</a> <a class="font-extrabold text-2xl" href="/">xHyroM</a>
<nav> <nav>
<ul class="flex gap-10"> <ul class="gap-10 hidden md:flex">
{ {
navItems.map((item) => ( navItems.map((item) => (
<li class=" hover:-translate-y-[2px] transition-all"> <li class=" hover:-translate-y-[2px] transition-all">
@ -36,5 +38,11 @@ const navItems = [
} }
</ul> </ul>
</nav> </nav>
<button
><span class="sr-only">menu</span><img
src="/icons/menu.svg"
alt="hambuerger menu icon"
/>
</button>
</Container> </Container>
</header> </header>