63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import { For } from "solid-js";
|
|
|
|
interface MenuItem {
|
|
label: string;
|
|
href: string;
|
|
}
|
|
|
|
export default function Navbar() {
|
|
const nav: MenuItem[] = [{ label: "Dashboard", href: "/" }];
|
|
|
|
return (
|
|
<div class="navbar bg-base-100 shadow-md">
|
|
<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>
|
|
</li>
|
|
)}
|
|
</For>
|
|
</ul>
|
|
</div>
|
|
<a href="/" class="btn btn-ghost text-xl">
|
|
RoadSign
|
|
</a>
|
|
</div>
|
|
<div class="navbar-center hidden lg:flex">
|
|
<ul class="menu menu-horizontal px-1">
|
|
<For each={nav}>
|
|
{(item) => (
|
|
<li>
|
|
<a href={item.href}>{item.label}</a>
|
|
</li>
|
|
)}
|
|
</For>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-end"></div>
|
|
</div>
|
|
);
|
|
}
|