Arnaud
b2d592afe8
Sticky sidebar nav. Sections: Profile (name/language), Security (email/password change), AI & Models (BYOK keys + per-use-case model prefs), Notifications (push subscribe), Nutrition goals. Sub-pages: API keys, Webhooks.
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { User, Shield, Bot, Bell, Apple, Key, Webhook } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: "/settings", label: "Profile", icon: User, exact: true },
|
|
{ href: "/settings/security", label: "Security", icon: Shield },
|
|
{ href: "/settings/ai", label: "AI & Models", icon: Bot },
|
|
{ href: "/settings/notifications", label: "Notifications", icon: Bell },
|
|
{ href: "/settings/nutrition", label: "Nutrition", icon: Apple },
|
|
{ href: "/settings/api-keys", label: "API Keys", icon: Key },
|
|
{ href: "/settings/webhooks", label: "Webhooks", icon: Webhook },
|
|
];
|
|
|
|
export function SettingsSidebar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="w-48 shrink-0 sticky top-6">
|
|
<ul className="space-y-0.5">
|
|
{NAV_ITEMS.map(({ href, label, icon: Icon, exact }) => {
|
|
const active = exact ? pathname === href : pathname.startsWith(href);
|
|
return (
|
|
<li key={href}>
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
"flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-colors",
|
|
active
|
|
? "bg-accent text-accent-foreground font-medium"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|