Arnaud
92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { BookOpen, Calendar, Package, ChefHat, User, Rss, FolderOpen, ShoppingCart, Shield, Search, Compass } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { authClient } from "@/lib/auth/client";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: "/recipes", key: "recipes", icon: BookOpen },
|
|
{ href: "/explore", key: "explore", icon: Search },
|
|
{ href: "/feed", key: "feed", icon: Rss },
|
|
{ href: "/collections", key: "collections", icon: FolderOpen },
|
|
{ href: "/meal-plan", key: "mealPlan", icon: Calendar },
|
|
{ href: "/pantry", key: "pantry", icon: Package },
|
|
{ href: "/shopping-lists", key: "shopping", icon: ShoppingCart },
|
|
] as const;
|
|
|
|
export function Nav() {
|
|
const pathname = usePathname();
|
|
const { data: session } = authClient.useSession();
|
|
const isAdmin = (session?.user as { role?: string } | undefined)?.role === "admin";
|
|
const t = useTranslations("nav");
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container mx-auto flex h-14 items-center gap-6 px-4">
|
|
<Link href="/recipes" className="flex items-center gap-2 font-semibold">
|
|
<ChefHat className="h-5 w-5" />
|
|
<span>Epicure</span>
|
|
</Link>
|
|
<nav className="hidden md:flex items-center gap-1">
|
|
{NAV_ITEMS.map(({ href, key, icon: Icon }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
buttonVariants({ variant: "ghost", size: "sm" }),
|
|
pathname.startsWith(href) && "bg-accent"
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{t(key)}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src="" alt="" />
|
|
<AvatarFallback>
|
|
<User className="h-4 w-4" />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<DropdownMenuItem>
|
|
<Link href="/settings" className="w-full">{t("settings")}</Link>
|
|
</DropdownMenuItem>
|
|
{isAdmin && (
|
|
<>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<Link href="/admin" className="w-full flex items-center gap-2">
|
|
<Shield className="h-3.5 w-3.5 text-destructive" />
|
|
{t("admin")}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</>
|
|
)}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => authClient.signOut()}>
|
|
{t("signOut")}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|