SidebarNav

Navegación lateral de 296px de las apps de la suite: marca, búsqueda, secciones, ajustes y ficha del usuario.

Cuándo usarlo

Props. brand (texto o nodo), search, items [{icon, label, href, active, badge}], footerItems, user (props de AvatarLabel).

Visual. Ítems text-md-semibold en text-secondary, icono 24px fg-quaternary; activo bg-secondary_hover. Fondo bg-primary y línea derecha border-secondary.

Accesibilidad. Es un <nav> llamado "Principal"; el ítem active lleva aria-current="page". Un ítem sin href se pinta como texto, no como enlace a #.

Ampliaciones sobre la guía. onLogout se llama al pulsar el botón de cerrar sesión de la ficha del usuario (en la guía no hacía nada) y labels cambia "Principal", "Buscar" y "Cerrar sesión".

Ejemplos

Props

Prop	Tipo	Por defecto	Descripción
`brand`	`ReactNode`	—	Marca arriba: texto (en Bricolage Grotesque bold) o un nodo, como un `AppIcon` con el nombre.
`search`	`boolean`	—	Muestra el buscador bajo la marca.
`items`obligatoria	`SidebarNavItem[]`	—
`footerItems`	`Omit<SidebarNavItem, "badge">[]`	—	Ítems pegados abajo, como Ajustes.
`user`	`AvatarLabelProps`	—	Ficha del usuario al pie, con el botón de cerrar sesión.
`onLogout`	`(() => void)`	—	Al pulsar el botón de cerrar sesión de la ficha del usuario (ampliación sobre la guía).
`labels`	`Partial<SidebarNavLabels>`	—	Textos que trae el componente, para sustituirlos.
`className`	`string`	—

Código

import { SidebarNav } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<SidebarNav
				brand="jotis.me"
				search
				items={[
					{ icon: "home-line", label: "Inicio", href: "/", active: true },
					{ icon: "currency-euro", label: "Pecunia", href: "/pecunia/", badge: 3 },
				]}
				footerItems={[{ icon: "settings-02", label: "Ajustes", href: "/ajustes/" }]}
				user={{ initials: "AD", name: "Administrador", supporting: "admin@jotis.me" }}
			/>
		</>
	);
}

---
import { SidebarNav } from "@jotis-me/react";
---

<SidebarNav
	brand="jotis.me"
	search
	items={[
		{ icon: "home-line", label: "Inicio", href: "/", active: true },
		{ icon: "currency-euro", label: "Pecunia", href: "/pecunia/", badge: 3 },
	]}
	footerItems={[{ icon: "settings-02", label: "Ajustes", href: "/ajustes/" }]}
	user={{ initials: "AD", name: "Administrador", supporting: "admin@jotis.me" }}
/>

Funciona sin directiva (los ítems son enlaces). onLogout es una función: si la usas, envuélvelo en un .tsx y úsalo con client:load.