componente · @solu30/ui-kit/navigation

SidebarUserMenu

El componente, montado

Cargando el componente del paquete instalado…

Cargando el chunk del paquete instalado…

De dónde se importa

import { SidebarUserMenu } from '@solu30/ui-kit/navigation'

Props

9 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
user	sí	`SidebarUserMenuUser`	Authenticated user data
items	opcional	`SidebarUserMenuItem[]`	Custom action items shown above the separator before logout. Omit or pass empty array for logout-only mode (Dietaly v1).
onLogout	sí	`() => void`	Callback for the logout action
logoutLabel	opcional	`string`	Label for the logout button. Defaults to "Cerrar sesión".
themeToggle	opcional	`ReactNode`	Optional theme-toggle slot. Pass a ReactNode to render it. Omit or pass false for verticals without dark-mode support (e.g. Dietaly v1).
languageSwitcher	opcional	`ReactNode`	Optional language-switcher slot. Pass a ReactNode to render it. Omit or pass false for verticals without i18n (e.g. Dietaly v1).
onNavigate	opcional	`(item: SidebarUserMenuItem) => void`	Optional navigation callback for href items (SPA routing). When omitted, href items render as plain <a> tags.
collapsed	opcional	`boolean`	Override collapsed state. When omitted, reads from NavigationProvider. Useful for rendering outside AdminLayout or in tests.
showChevron	opcional	`boolean`	Show a chevron affordance on the trigger indicating it opens a panel. Rotates 180° when open. Never shown in collapsed (avatar-only) mode. Defaults to `true` — the chevron is a universal affordance improvement.

Ejemplo del paquete

// Dietaly v1 — avatar + name → Cerrar sesión only
<SidebarUserMenu
user={{ name: user.name, email: user.email ?? undefined }}
onLogout={logout}
/>
// Full vertical — custom items + extras
<SidebarUserMenu
user={{ name: user.name, email: user.email, avatar: user.avatarUrl }}
items={[{ id: "profile", icon: <UserIcon />, label: "Mi perfil", href: "/profile" }]}
onLogout={logout}
// variant="menu" / menuRow align these rows to the same left indent as
// items/logout (px-2.5 py-2) — see ADR-087 addendum.
themeToggle={<ThemeToggle variant="menu" />}
languageSwitcher={<LanguageSwitcher menuRow {...langProps} />}
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.