Sidebar

Purpose

Navigation panel component typically positioned on the page side with collapsible sections and navigation items.

Installation

# pnpm (recommended)
pnpm add @hautechai/webui.sidebar

# npm
npm install @hautechai/webui.sidebar

# yarn
yarn add @hautechai/webui.sidebar

Parameters

| Parameter | Type | Description | | --------- | ----------------- | -------------------------------------------------------- | | children | React.ReactNode | Required navigation content and menu items | | collapsed | boolean | Optional state controlling whether sidebar is collapsed | | onToggle | () => void | Optional callback function for collapse/expand actions | | position | 'left' | 'right' | Optional positioning side (typically defaults to 'left') | | width | number | string | Optional width when expanded |

May include additional parameters for animation and responsive behavior.

Usage Example

<Sidebar collapsed={isSidebarCollapsed} onToggle={toggleSidebar} position="left" width={250}>
    <NavigationMenu />
</Sidebar>