Nick Szaunig
45646833b9
Mobile Bottom-Navigation und permanent erreichbare "+ Neu"- Schnellaktion (Durchsicht/Varroa/Behandlung/Fütterung/Aufgabe/Ernte). Header-Navigation überarbeitet, damit sie bei schmaler Breite intern scrollt statt die Seite horizontal zu sprengen. Verifiziert bei Smartphone- (390px) und Tablet-Breite (820px).
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { LayoutDashboard, Layers, ListTodo, Search } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const ITEMS = [
|
|
{ label: "Start", href: "/dashboard", icon: LayoutDashboard },
|
|
{ label: "Völker", href: "/colonies", icon: Layers },
|
|
{ label: "Aufgaben", href: "/tasks", icon: ListTodo },
|
|
{ label: "Suche", href: "/search", icon: Search },
|
|
];
|
|
|
|
export function BottomNav() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="fixed inset-x-0 bottom-0 z-30 flex border-t bg-background sm:hidden">
|
|
{ITEMS.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname.startsWith(item.href);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex flex-1 flex-col items-center gap-1 py-2 text-xs",
|
|
isActive ? "text-primary" : "text-muted-foreground",
|
|
)}
|
|
>
|
|
<Icon className="size-5" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|