Sidebar.tsx

import { NavLink } from 'react-router-dom';
import { NAV_ITEMS } from '../lib/roles';
import { useAuth } from '../lib/auth';

export function Sidebar() {
  const { session, logout } = useAuth();
  const role = session?.user.role;
  const items = NAV_ITEMS.filter((item) => role && item.roles.includes(role));

  return (
    <aside className="w-64 shrink-0 bg-console text-white flex flex-col h-screen sticky top-0">
      <div className="px-5 py-5 flex items-center gap-2 border-b border-white/10">
        <div className="w-8 h-8 rounded-lg bg-wipe" aria-hidden="true" />
        <span className="font-display font-semibold text-lg">FreClean Admin</span>
      </div>

      <nav className="flex-1 overflow-y-auto py-4 px-2">
        {items.map((item) => (
          <NavLink
            key={item.key}
            to={item.path}
            end={item.path === '/'}
            className={({ isActive }) =>
              `focus-ring relative block px-4 py-2.5 mb-1 rounded-lg text-sm font-medium transition-colors ${
                isActive ? 'bg-white/10 text-white' : 'text-white/70 hover:bg-white/5 hover:text-white'
              }`
            }
          >
            {({ isActive }) => (
              <>
                {isActive && <span className="absolute left-0 top-2 bottom-2 w-1 rounded-full bg-wipe" />}
                {item.label}
              </>
            )}
          </NavLink>
        ))}
      </nav>

      <div className="px-5 py-4 border-t border-white/10 text-sm">
        <div className="text-white/60 mono text-xs uppercase tracking-wide">Signed in as</div>
        <div className="font-medium">{session?.user.email}</div>
        <button onClick={logout} className="focus-ring mt-2 text-white/70 hover:text-white underline text-xs">
          Log out
        </button>
      </div>
    </aside>
  );
}