60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import {
|
||
|
|
CalendarDaysIcon,
|
||
|
|
BellAlertIcon,
|
||
|
|
BoltIcon,
|
||
|
|
ChartBarIcon,
|
||
|
|
Cog6ToothIcon,
|
||
|
|
FireIcon,
|
||
|
|
SparklesIcon,
|
||
|
|
Squares2X2Icon,
|
||
|
|
} from "@heroicons/react/24/outline";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{ href: "/", label: "Tag", icon: CalendarDaysIcon },
|
||
|
|
{ href: "/planung", label: "Plan", icon: SparklesIcon },
|
||
|
|
{ href: "/statistiken", label: "Stats", icon: ChartBarIcon },
|
||
|
|
{ href: "/hellfireclub", label: "Club", icon: FireIcon },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function MobileNav() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="sticky top-0 z-30 flex items-center justify-between border-b border-gray-200 bg-white/95 px-4 py-3 backdrop-blur dark:border-neutral-800 dark:bg-neutral-900/95 lg:hidden">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#0F766E] text-xs font-bold text-white">
|
||
|
|
HH
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-semibold leading-none text-gray-900 dark:text-neutral-100">Hellth Hub</p>
|
||
|
|
<p className="mt-0.5 text-xs text-gray-400">Daily Health</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav className="fixed inset-x-0 bottom-0 z-40 grid grid-cols-4 border-t border-gray-200 bg-white/95 px-2 pb-[env(safe-area-inset-bottom)] pt-1 backdrop-blur dark:border-neutral-800 dark:bg-neutral-900/95 lg:hidden">
|
||
|
|
{items.map((item) => {
|
||
|
|
const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={`${item.href}-${item.label}`}
|
||
|
|
href={item.href}
|
||
|
|
className={`flex min-h-14 flex-col items-center justify-center gap-0.5 rounded-md text-xs font-medium ${
|
||
|
|
active ? "text-[#0F766E]" : "text-gray-500 dark:text-neutral-400"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<item.icon className="h-5 w-5" />
|
||
|
|
<span>{item.label}</span>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|