Sidebar

Preview

About

SaaS-style sidebar (KasySidebar) modeled after the HeroUI kit: logo + collapse toggle, a navigable list with an active pill, and a fixed profile block at the bottom. Collapses into an icon rail (with tooltips and a submenu popup) on narrow screens or via the toggle.

Three modes, in priority order:

• Generic: pass items (+ sectionLabel, footerItems) to drive the rail with an arbitrary list of screens (leaf items and/or expandable groups). Used by the admin console.
• Connected: pass routes / onTapItem / currentItem for the app's real tabs (Bart navigation).
• Showcase: HeroUI demo items (default, when none of the above are set).

Main props:

• collapseMode: responsive (default, auto-collapses on narrow screens) / expanded (always wide, user collapses manually) / collapsed (starts as a thin rail).
• isDrawer: presents as a sliding drawer (always wide, no toggle) — the mobile default.
• side: left (default) or right — which screen edge it anchors to.
• items (List<KasySidebarItem>): each item has icon, label, onTap, selected, and children (List<KasySidebarSubItem>) — when children is non-empty, the item becomes an expandable group instead of a leaf.
• showProfile / profileName / profileEmail / profileAvatar / profileGradient / onProfileTap: profile block in the footer.
• notificationsUnread: unread badge on the notifications item (connected mode).
• onSettingsTap / onLogout: action callbacks (the component is presentation-only, the host decides the real flow).

Note: the collapse toggle is available at any breakpoint (except drawer mode, which closes entirely instead of collapsing).

Last updated on 08/23/2026