mobile nav bez js

public/icons/menu.svg

@@ -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>

src/components/widgets/Navbar.astro

@@ -18,10 +18,12 @@ const navItems = [
 ---
 
 <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>
         <nav>
-            <ul class="flex gap-10">
+            <ul class="gap-10 hidden md:flex">
                 {
                     navItems.map((item) => (
                         <li class=" hover:-translate-y-[2px] transition-all">
@@ -36,5 +38,11 @@ const navItems = [
                 }
             </ul>
         </nav>
+        <button
+            ><span class="sr-only">menu</span><img
+                src="/icons/menu.svg"
+                alt="hambuerger menu icon"
+            />
+        </button>
     </Container>
 </header>