client/src/layouts/Sidebar.tsx

import { Link, useLocation } from 'react-router-dom';
import { LayoutDashboard, Receipt, Wallet, HandCoins, Settings, PieChart, LogOut } from 'lucide-react';
import { useAuthStore } from '../store/useAuthStore';
import { cn } from '../lib/utils';

export const NAV_ITEMS = [
    { name: 'Dashboard', path: '/', icon: LayoutDashboard },
    { name: 'Transactions', path: '/transactions', icon: Receipt },
    { name: 'Wallets', path: '/wallets', icon: Wallet },
    { name: 'Analytics', path: '/analytics', icon: PieChart },
    { name: 'Loans', path: '/loans', icon: HandCoins },
    { name: 'Settings', path: '/settings', icon: Settings },
];

export function Sidebar() {
    const location = useLocation();

    return (
        <aside className="w-64 glass-panel m-4 flex flex-col pt-6 pb-4 hidden md:flex z-50 shrink-0">
            <div className="px-6 mb-8 flex items-center gap-3">
                <div className="w-8 h-8 flex-shrink-0 rounded-lg bg-blue-500/20 flex items-center justify-center border border-blue-500/30">
                    <Wallet className="w-5 h-5 text-blue-400" />
                </div>
                <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent truncate">
                    MoneyManager
                </h1>
            </div>

            <nav className="flex-1 px-4 flex flex-col overflow-y-auto space-y-1">
                {NAV_ITEMS.map((item) => {
                    const Icon = item.icon;
                    const isActive = location.pathname === item.path;

                    return (
                        <Link
                            key={item.path}
                            to={item.path}
                            className={cn(
                                'flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200',
                                isActive
                                    ? 'bg-blue-500/10 text-blue-400 border border-blue-500/20'
                                    : 'text-neutral-400 hover:text-neutral-200 hover:bg-white/5 border border-transparent'
                            )}
                        >
                            <Icon className={cn("w-5 h-5", isActive ? "text-blue-400" : "text-neutral-500")} />
                            <span className={cn("font-medium text-sm whitespace-nowrap", isActive ? "" : "text-neutral-400")}>{item.name}</span>
                        </Link>
                    );
                })}
            </nav>

            <div className="px-4 mt-auto">
                <button
                    onClick={() => useAuthStore.getState().logout()}
                    className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 text-neutral-400 hover:text-rose-400 hover:bg-rose-500/10 border border-transparent hover:border-rose-500/20"
                >
                    <LogOut className="w-5 h-5" />
                    <span className="font-medium text-sm">Logout</span>
                </button>
            </div>
        </aside>
    );
}