Shared/Buyer Sidebar

Buyer Sidebar

Sidebar para la interfaz de Buyer basada en el diseño de Figma: logo, 4 rutas (Inicio, Mis Obras, Calendario y Configuración) y marcado del item activo.

Casos de uso

Navegación principal del Buyer en el dashboard: redirección entre vistas y resaltado del item activo.
Soporta UI expandida (labels) y colapsada (solo iconos con tooltip) para pantallas con espacio limitado.

Navegación implementada (Figma)

Label	Href
Inicio	`/buyer-home`
Mis Obras	`/works`
Calendario	`/buyer/calendar`
Configuración	`/buyer/settings`

Comportamiento expandido / colapsado

El componente se monta sobre SidebarProvider (vía BuyerSidebarProvider), y cambia su estado entre expanded y collapsed usando los controles del header.
En expanded, se renderizan labels junto al icono. En collapsed, el render es icon-only.
En collapsed, los ítems usan tooltip con el label (solo se muestra cuando el sidebar está colapsado).

Item activo (pathname)

Se toma el valor de usePathname().
Un item es activo si:
pathname === href || pathname.startsWith(`${href}/`);
En esta pantalla de showcase, la ruta actual no suele coincidir con /buyer/*, por lo que el resaltado del item activo puede no verse. Para comprobarlo, navegar a rutas reales de Buyer.

Props relevantes

BuyerSidebarProvider (defaultOpen?: boolean): inicializa el sidebar en expanded por defecto, o en collapsed si se setea a false.
BuyerSidebar requiere estar renderizado dentro de un provider (usa useSidebar()).

Expanded

Vista expandida con labels visibles. El item activo depende de `pathname` (usePathname) y usa primary en el botón del menú.

Collapsed

Vista colapsada (icon-only). Los ítems muestran tooltip con el label cuando el sidebar está colapsado.