47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { CalendarClock, NotebookTabs, User, Utensils } from "lucide-react";
|
|
import { Link } from "react-router";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
navigationMenuTriggerStyle,
|
|
} from "~/components/ui/navigation-menu";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
const navigationMenuItems = [
|
|
{ title: "Colles", id: "colles", href: "/", icon: CalendarClock },
|
|
{ title: "Repas", id: "repas", href: "/repas", icon: Utensils },
|
|
{ title: "Notes", id: "grades", href: "/grades", icon: NotebookTabs },
|
|
{ title: "Profil", id: "settings", href: "/settings", icon: User },
|
|
];
|
|
|
|
export default function BottomNavigation({ activeId }: { activeId: string }) {
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-50">
|
|
<div className="flex items-center justify-center">
|
|
<NavigationMenu>
|
|
<NavigationMenuList>
|
|
{navigationMenuItems.map((item) => (
|
|
<NavigationMenuItem key={item.title}>
|
|
<NavigationMenuLink
|
|
className={cn(
|
|
navigationMenuTriggerStyle(),
|
|
"flex flex-col h-auto items-center px-5 py-2.5"
|
|
)}
|
|
active={item.id === activeId}
|
|
asChild
|
|
>
|
|
<Link to={item.href}>
|
|
<item.icon className="mb-1.5 h-5 w-5" />
|
|
{item.title}
|
|
</Link>
|
|
</NavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
))}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|