Hamburger navbar

src/components/Nav.astro

@@ -1,61 +1,47 @@
 ---
-// Imports
-import { Icon } from "astro-icon";
 
 // Image imports
 import logo from "../images/logo.png";
-// Pages
-const navbar = [
-  {
-    name: "Home",
-    href: "/",
-  },
-  {
-    name: "Blog",
-    href: "/blog/",
-  },
-  {
-    name: "Docs",
-    href: "/docs/",
-  },
-  {
-    name: "Source",
-    href: "https://github.com/lancerossdev/nofuss",
-  },
-];
-const desktopIcons = "dark:text-zinc-300 text-black hover:text-zinc-500 dark:hover:text-zinc-400 hidden sm:block";
-const mobileIcons = "dark:text-zinc-300 text-black hover:text-zinc-500 dark:hover:text-zinc-400 sm:hidden";
+
+// Components
+import NavLink from "./NavLink.astro";
 ---
 
-<header class="bg-white dark:bg-zinc-900 text-lg dark:text-zinc-300 mx-auto max-w-6xl flex flex-row justify-between">
-  <a href="/" class="mx-8  flex items-center" aria-label="Website Logo">
-    <img src={logo} alt="" class="h-11">
+
+<div class="h-16 bg-slate-800 m-4 rounded-2xl flex flex-row justify-between">
+  <!-- Logo -->
+  <a href="/">
+      <img src={logo} alt="Logo" class="my-2 mx-6 h-12 " /> 
   </a>
-  {
-    (
-      <nav class="pt-6 flex flex-row space-x-8">
-        {navbar.map((navbar) => (
-          <a href={navbar.href} class={desktopIcons}>
-            {navbar.name}
-          </a>
-        ))}
-      </nav>
-    )
-  }
-  <button class="nav-toggle mx-8 my-5 sm:invisible" aria-label="menu button">
-    <Icon name="ri:menu-4-line" class="w-8 h-8" />
-  </button>
-</header>
-<header class="nav-menu hidden bg-white dark:bg-zinc-900">
-  {
-    (
-      <nav class="m-8  flex-col inline-flex space-y-3">
-        {navbar.map((navbar) => (
-          <a href={navbar.href} class={mobileIcons}>
-            {navbar.name}
-          </a>
-        ))}
-      </nav>
-    )
-  }
-</header>
+
+  <!-- Pages -->
+  <div class="my-auto">
+
+    <NavLink title="Home" link="/" />
+    <NavLink title="Page 1" link="/" />
+    <NavLink title="Page 2" link="/" />
+    <NavLink title="Page 3" link="/" />
+    <NavLink title="Page 4" link="/" />
+
+
+  </div>
+  
+
+  <!-- Buttons -->
+  <div class="my-auto mx-10 ">
+    <a href="/" class="my-auto mr-6 inline-block leading-none">
+      <button class="  bg-blue-700 h-10 w-auto rounded-2xl transition duration-150 ease-in-out hover:scale-110">
+        <h1 class="mx-2 font-mono">
+          Button
+        </h1>  
+      </button>
+    </a>
+
+
+
+
+  </div>
+
+
+
+</div>

src/components/NavLink.astro

@@ -0,0 +1,8 @@
+---
+const  {link, title}  = Astro.props;
+
+---
+
+<a href={link} class=" my-auto mx-10 text-2xl font-serif object-cover text-gray-900 dark:text-white hover:underline">
+    {title}
+</a>

src/pages/index.astro

@@ -1,10 +1,27 @@
 ---
+// Layout
 import Layout from '../layouts/Layout.astro';
+
+// Components
 import Nav from '../components/Nav.astro';
+
+//Image import
+import mountain from '../images/mountain.jpg';
 ---
 
 <Layout>
-  <Nav></Nav>
+  <div class="bg-black h-52 w-full relative">
+    <img src={mountain}  alt="" class="w-full h-full object-cover absolute bg-fixed"> 
+
+
+
+    <div class="absolute w-full">
+      <Nav></Nav>
+
+    </div>
+
+    
+  </div>