Sidebar
A collapsible navigation sidebar with header, sections, icons, and nested items.
Installation
tsx
import { Sidebar, SidebarHeader, SidebarSection, SidebarItem } from "madagent";Default
With Header
Nested Items
Collapsed
Disabled Items
SidebarHeader Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | ReactNode | - | Logo or icon element |
title | string | - | Title text (e.g. company name) |
children | ReactNode | - | Optional extra content |
SidebarItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | - | Icon element |
active | boolean | false | Active/selected state |
disabled | boolean | false | Disabled state |
href | string | - | Link URL (renders as anchor) |
items | Array<{ label, href?, active?, disabled? }> | - | Nested sub-items |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<Sidebar>
<SidebarSection title="القائمة الرئيسية">
<SidebarItem icon={<LayoutDashboard size={18} />} active>
لوحة التحكم
</SidebarItem>
<SidebarItem icon={<Users size={18} />}>
المستخدمون
</SidebarItem>
<SidebarItem icon={<Settings size={18} />}>
الإعدادات
</SidebarItem>
</SidebarSection>
</Sidebar>