Commit 0dab219

HPCesia <me@hpcesia.com>
2025-10-16 15:47:16
feat: use daisyui's dropdown for navbar
1 parent 8eeedb3
Changed files (1)
src
components
src/components/Navbar.astro
@@ -35,34 +35,32 @@ if (!title) title = 'Astral Halo';
           navbarConfig.navbarCenterItems.map((item) => {
             if ('items' in item) {
               return (
-                <div class="group flex flex-col gap-0">
+                <div class="dropdown dropdown-center dropdown-hover">
                   <Button title={item.title} class="btn-ghost join-item btn-primary">
                     <span class="text-xl tracking-wide">{item.title}</span>
                   </Button>
-                  <div class="hidden h-0 w-0 self-center group-hover:block">
-                    <ul class="menu bg-base-200/50 absolute -translate-x-[50%] rounded-xl shadow backdrop-blur-md">
-                      {item.items.map((subItem) => (
-                        <Button
-                          {...('href' in subItem &&
-                            subItem.href && {
-                              href: subItem.href,
-                              target: subItem.blank ? '_blank' : undefined,
-                            })}
-                          {...('onclick' in subItem &&
-                            subItem.onclick &&
-                            (typeof subItem.onclick === 'string'
-                              ? { onclick: subItem.onclick }
-                              : { id: 'side-' + subItem.onclick.id }))}
-                          {...(subItem.extraAttr || {})}
-                          title={subItem.text}
-                          aria-label={subItem.text}
-                          class="btn-ghost btn-primary rounded-field"
-                        >
-                          <span class="text-xl tracking-wide">{subItem.text}</span>
-                        </Button>
-                      ))}
-                    </ul>
-                  </div>
+                  <ul class="menu bg-base-200/50 dropdown-content absolute rounded-xl shadow">
+                    {item.items.map((subItem) => (
+                      <Button
+                        {...('href' in subItem &&
+                          subItem.href && {
+                            href: subItem.href,
+                            target: subItem.blank ? '_blank' : undefined,
+                          })}
+                        {...('onclick' in subItem &&
+                          subItem.onclick &&
+                          (typeof subItem.onclick === 'string'
+                            ? { onclick: subItem.onclick }
+                            : { id: 'side-' + subItem.onclick.id }))}
+                        {...(subItem.extraAttr || {})}
+                        title={subItem.text}
+                        aria-label={subItem.text}
+                        class="btn-ghost btn-primary rounded-field"
+                      >
+                        <span class="text-xl tracking-wide">{subItem.text}</span>
+                      </Button>
+                    ))}
+                  </ul>
                 </div>
               );
             } else {