From 7dcbf9908e80f4ce777324c726f1de6c27b1b6c1 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Wed, 14 Feb 2024 19:12:12 +0800
Subject: [PATCH] :lipstick: Better navbar

---
 pkg/view/src/layouts/shared/Navbar.tsx | 61 ++++----------------------
 1 file changed, 8 insertions(+), 53 deletions(-)

diff --git a/pkg/view/src/layouts/shared/Navbar.tsx b/pkg/view/src/layouts/shared/Navbar.tsx
index c996884..25d3062 100644
--- a/pkg/view/src/layouts/shared/Navbar.tsx
+++ b/pkg/view/src/layouts/shared/Navbar.tsx
@@ -7,7 +7,6 @@ interface MenuItem {
   icon: string;
   label: string;
   href?: string;
-  children?: MenuItem[];
 }
 
 export default function Navbar() {
@@ -30,64 +29,18 @@ export default function Navbar() {
     <>
       <div class="max-md:hidden navbar bg-base-100 shadow-md px-5 z-10 h-[64px] fixed top-0">
         <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 mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-              <For each={nav}>
-                {(item) => (
-                  <li>
-                    <a href={item.href}>{item.label}</a>
-                    <Show when={item.children}>
-                      <ul class="p-2">
-                        <For each={item.children}>
-                          {(item) => (
-                            <li>
-                              <a href={item.href}>{item.label}</a>
-                            </li>
-                          )}
-                        </For>
-                      </ul>
-                    </Show>
-                  </li>
-                )}
-              </For>
-            </ul>
-          </div>
           <a href="/" class="btn btn-ghost text-xl">
             {wellKnown?.name ?? "Interactive"}
           </a>
         </div>
-        <div class="navbar-center hidden lg:flex">
+        <div class="navbar-center hidden md:flex">
           <ul class="menu menu-horizontal px-1">
             <For each={nav}>
               {(item) => (
-                <li>
-                  <Show when={item.children} fallback={<a href={item.href}>{item.label}</a>}>
-                    <details>
-                      <summary>
-                        <a href={item.href}>{item.label}</a>
-                      </summary>
-                      <ul class="p-2">
-                        <For each={item.children}>
-                          {(item) => (
-                            <li>
-                              <a href={item.href}>{item.label}</a>
-                            </li>
-                          )}
-                        </For>
-                      </ul>
-                    </details>
-                  </Show>
+                <li class="tooltip tooltip-bottom" data-tip={item.label}>
+                  <a href={item.href}>
+                    <i class={item.icon}></i>
+                  </a>
                 </li>
               )}
             </For>
@@ -113,7 +66,9 @@ export default function Navbar() {
         <For each={nav}>
           {(item) => (
             <a href={item.href}>
-              <i class={item.icon}></i>
+              <div class="tooltip" data-tip={item.label}>
+                <i class={item.icon}></i>
+              </div>
             </a>
           )}
         </For>