43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { BarChart3, Bot, CreditCard, Flag, Home, PieChart, ReceiptText, WalletCards } from "lucide-react";
|
|
import { Logo } from "@/components/ui/Logo";
|
|
|
|
export const navItems = [
|
|
["overview", "Overview", Home],
|
|
["transactions", "Transactions", ReceiptText],
|
|
["budget", "Budget", PieChart],
|
|
["goals", "Goals", Flag],
|
|
["networth", "Net Worth", BarChart3],
|
|
["credit", "Credit & Rewards", CreditCard],
|
|
["insights", "AI Insights", Bot]
|
|
] as const;
|
|
|
|
export type ViewKey = (typeof navItems)[number][0];
|
|
|
|
export function Sidebar({ active, onChange }: { active: ViewKey; onChange: (view: ViewKey) => void }) {
|
|
return (
|
|
<aside className="hidden min-h-screen w-72 border-r border-forest/10 bg-paper/80 p-5 dark:border-white/10 dark:bg-white/[0.04] lg:block">
|
|
<Logo />
|
|
<nav className="mt-8 space-y-2">
|
|
{navItems.map(([key, label, Icon]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => onChange(key)}
|
|
className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-bold transition ${
|
|
active === key ? "bg-forest text-white dark:bg-mint dark:text-ink" : "text-ink/65 hover:bg-forest/8 dark:text-paper/65 dark:hover:bg-white/10"
|
|
}`}
|
|
>
|
|
<Icon size={18} />
|
|
{label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
<div className="mt-8 rounded-lg bg-forest/8 p-4 text-sm leading-6 text-ink/65 dark:bg-white/[0.08] dark:text-paper/65">
|
|
<WalletCards className="mb-3 text-forest dark:text-mint" size={20} />
|
|
Plaid sync healthy across 8 of 8 institutions.
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|