HyperNet/Interactive
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Better navbar

Browse Source
This commit is contained in:
LittleSheep 2024-02-14 19:12:12 +08:00
parent c1b444fbeb
commit 7dcbf9908e
1 changed files with 8 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
pkg/view/src/layouts/shared/Navbar.tsx
View File

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