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; icon: string;
label: string; label: string;
href?: string; href?: string;
children?: MenuItem[];
} }
export default function Navbar() { 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="max-md:hidden navbar bg-base-100 shadow-md px-5 z-10 h-[64px] fixed top-0">
<div class="navbar-start"> <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"> <a href="/" class="btn btn-ghost text-xl">
{wellKnown?.name ?? "Interactive"} {wellKnown?.name ?? "Interactive"}
</a> </a>
</div> </div>
<div class="navbar-center hidden lg:flex"> <div class="navbar-center hidden md:flex">
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">
<For each={nav}> <For each={nav}>
{(item) => ( {(item) => (
<li> <li class="tooltip tooltip-bottom" data-tip={item.label}>
<Show when={item.children} fallback={<a href={item.href}>{item.label}</a>}> <a href={item.href}>
<details> <i class={item.icon}></i>
<summary> </a>
<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> </li>
)} )}
</For> </For>
@ -113,7 +66,9 @@ export default function Navbar() {
<For each={nav}> <For each={nav}>
{(item) => ( {(item) => (
<a href={item.href}> <a href={item.href}>
<i class={item.icon}></i> <div class="tooltip" data-tip={item.label}>
<i class={item.icon}></i>
</div>
</a> </a>
)} )}
</For> </For>