spb/toveli

1"use client";2import Link from "next/link";3import { usePathname, useRouter } from "next/navigation";4import { IconHome, IconList, IconUser, IconHeart, IconChart, IconPin, IconSpark } from "@/components/icons";5const ITEMS = [6  { href: "/membre", label: "Tableau de bord", Icon: IconHome, exact: true },7  { href: "/membre/annonces", label: "Mes annonces", Icon: IconList },8  { href: "/membre/messages", label: "Messages", Icon: IconSpark },9  { href: "/membre/visites", label: "Visites", Icon: IconPin },10  { href: "/membre/favoris", label: "Favoris et recherches", Icon: IconHeart },11  { href: "/membre/alertes", label: "Alertes", Icon: IconChart },12  { href: "/membre/profil", label: "Profil et préférences", Icon: IconUser },13  { href: "/membre/securite", label: "Sécurité et sessions", Icon: IconUser },14];15export function MemberNav({ email, name, roles }: { email: string; name: string | null; roles: string[] }) {16  const path = usePathname(); const router = useRouter();17  const logout = async () => { await fetch("/api/auth/logout", { method: "POST" }); router.push("/"); router.refresh(); };18  return (19    <aside className="md:sticky md:top-20 self-start">20      <div className="tv-card p-3 mb-3"><p className="font-semibold truncate">{name ?? "Mon compte"}</p><p className="text-xs text-ink-3 truncate">{email}</p>{roles.length > 0 && <p className="text-[11px] text-brand-dark mt-1">{roles.join(" · ")}</p>}</div>21      <Link href="/membre/annonces/nouvelle" className="tv-btn tv-btn-primary w-full mb-3">+ Publier une propriété</Link>22      <nav className="flex md:flex-col gap-1 overflow-x-auto no-scrollbar -mx-4 px-4 md:mx-0 md:px-0" aria-label="Espace membre">23        {ITEMS.map(({ href, label, Icon, exact }) => { const active = exact ? path === href : path.startsWith(href); return <Link key={href} href={href} className={`flex items-center gap-2 px-3 py-2 rounded-full md:rounded-sm text-sm whitespace-nowrap ${active ? "bg-brand-soft text-brand-dark font-semibold" : "text-ink-2 hover:bg-surface-2"}`} aria-current={active ? "page" : undefined}><Icon width={16} height={16} /> {label}</Link>; })}24        {roles.includes("ADMIN") || roles.includes("MODERATOR") ? <Link href="/admin" className="flex items-center gap-2 px-3 py-2 rounded-full md:rounded-sm text-sm text-ink-2 hover:bg-surface-2 whitespace-nowrap">Administration</Link> : null}25        <button type="button" onClick={logout} className="flex items-center gap-2 px-3 py-2 rounded-full md:rounded-sm text-sm text-ink-3 hover:bg-surface-2 whitespace-nowrap text-left">Se déconnecter</button>26      </nav>27    </aside>28  );29}30