New Header

src/components/Header.astro

@@ -1,31 +1,78 @@
 ---
 import { MoonStar, Sun } from "lucide-astro";
+const allProjects = await Astro.glob("../pages/projects/*.mdx");
 ---
 
-<header class="w-1/3 mx-auto mt-5 text-center fixed top-0 left-1/2 transform -translate-x-1/2 z-10">
-    <nav class="flex items-center justify-between h-20 px-6">
-    <div class="flex space-x-6 text-text dark:text-darkText">
-      <button
-        type="button"
-        class="flex items-center justify-center p-2 rounded-lg border-black border-2 shadow-boxShadow bg-button hover:bg-buttonHover active:bg-buttonActive"
-      >
-        <a href="#about">ABOUT</a>
-      </button>
-      <button
-      type="button"
-      class="flex items-center justify-center p-2 rounded-lg border-black border-2 shadow-boxShadow bg-button hover:bg-buttonHover active:bg-buttonActive"
-    >
-      <a href="#skills">SKILLS</a>
-    </button>
-      <button
-        type="button"
-        class="flex items-center justify-center p-2 rounded-lg border-black border-2 shadow-boxShadow bg-button hover:bg-buttonHover active:bg-buttonActive"
-      >
-        <a href="#projects">PROJECTS</a>
-      </button>
+<header class="w-full mx-auto mt-5 text-center fixed top-0 left-1/2 transform -translate-x-1/2 z-10">
+  <div class="navbar">
+    <div class="navbar-start">
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h8m-8 6h16"
+            />
+          </svg>
+        </div>
+        <ul
+          tabindex="0"
+          class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+        >
+          <li><a href="#about">ABOUT</a></li>
+          <li><a href="#skills">SKILLS</a></li>
+          <li>
+            <a>PROJECTS</a>
+            <ul class="p-2">
+              {
+                allProjects
+                  .filter((project) => project.frontmatter.isPrivate === false)
+                  .map((project) => {
+                    return (
+                    <li><a href={`#${project.frontmatter.projectTitle}`}>{project.frontmatter.projectTitle}</a></li>
+                    );
+                  })
+              }
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal px-1">
+        <li><a href="#about">ABOUT</a></li>
+        <li><a href="#skills">SKILLS</a></li>
+        <li>
+          <details class="group">
+            <summary class="cursor-pointer">PROJECTS</summary>
+            <ul class="p-2">
+              <ul class="p-2">
+              {
+                allProjects
+                  .filter((project) => project.frontmatter.isPrivate === false)
+                  .map((project) => {
+                    return (
+                    <li><a href={`#${project.frontmatter.projectTitle}`}>{project.frontmatter.projectTitle}</a></li>
+                    );
+                  })
+              }
+              </ul>
+            </ul>
+          </details>
+        </li>
+      </ul>
     </div>
-    <div class="flex space-x-2 text-text dark:text-darkText">
 
+    <div class="navbar-end">
       <label class="grid cursor-pointer place-items-center">
         <div class="flex items-center">
           <Sun class="mr-2" />
@@ -34,14 +81,16 @@ import { MoonStar, Sun } from "lucide-astro";
             value="light"
             id="theme-selector"
             aria-label="Toggle Theme"
-            class="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1" />
+            class="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1"
+          />
           <MoonStar class="ml-2" />
         </div>
       </label>
-    </div>    
-  </nav>
+    </div>
+  </div>
 </header>
 
+
 <script is:inline>
   const setTheme = () => {
     const theme = (() => {