100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
LayoutDashboard,
|
|
Wallet,
|
|
FolderTree,
|
|
Tags,
|
|
BarChart3,
|
|
Upload,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Settings,
|
|
} from "lucide-react";
|
|
|
|
const navItems = [
|
|
{ href: "/", label: "Tableau de bord", icon: LayoutDashboard },
|
|
{ href: "/accounts", label: "Comptes", icon: Wallet },
|
|
{ href: "/folders", label: "Organisation", icon: FolderTree },
|
|
{ href: "/transactions", label: "Transactions", icon: Upload },
|
|
{ href: "/categories", label: "Catégories", icon: Tags },
|
|
{ href: "/statistics", label: "Statistiques", icon: BarChart3 },
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
return (
|
|
<aside
|
|
className={cn(
|
|
"flex flex-col h-screen bg-card border-r border-border transition-all duration-300",
|
|
collapsed ? "w-16" : "w-64",
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between p-4 border-b border-border">
|
|
{!collapsed && (
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
|
|
<Wallet className="w-5 h-5 text-primary-foreground" />
|
|
</div>
|
|
<span className="font-semibold text-foreground">FinTrack</span>
|
|
</div>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
className="ml-auto"
|
|
>
|
|
{collapsed ? (
|
|
<ChevronRight className="w-4 h-4" />
|
|
) : (
|
|
<ChevronLeft className="w-4 h-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
<nav className="flex-1 p-2 space-y-1">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link key={item.href} href={item.href}>
|
|
<Button
|
|
variant={isActive ? "secondary" : "ghost"}
|
|
className={cn(
|
|
"w-full justify-start gap-3",
|
|
collapsed && "justify-center px-2",
|
|
)}
|
|
>
|
|
<item.icon className="w-5 h-5 shrink-0" />
|
|
{!collapsed && <span>{item.label}</span>}
|
|
</Button>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="p-2 border-t border-border">
|
|
<Link href="/settings">
|
|
<Button
|
|
variant="ghost"
|
|
className={cn(
|
|
"w-full justify-start gap-3",
|
|
collapsed && "justify-center px-2",
|
|
)}
|
|
>
|
|
<Settings className="w-5 h-5 shrink-0" />
|
|
{!collapsed && <span>Paramètres</span>}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|