DashboardSidebar

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { DashboardSidebar } from "@hua-labs/ui/advanced/dashboard";

Main content area

Sidebar: Expanded

/

Props


`sections*`	`SidebarSection[]`	-	Navigation sections
`logo`	`React.ReactNode`	-	Logo component
`productSwitcher`	`React.ReactNode`	-	Product switcher component
`footerActions`	`React.ReactNode`	-	Footer actions
`isCollapsed`	`boolean`	-	Controlled collapsed state
`defaultCollapsed`	`boolean`	`false`	Initial collapsed state
`onToggleCollapsed`	`(collapsed: boolean) => void`	-	Collapse toggle callback
`collapsedWidth`	`number`	`72`	Collapsed sidebar width
`expandedWidth`	`number`	`264`	Expanded sidebar width
`mobileBreakpoint`	`number`	`1024`	Mobile breakpoint
`overlayBackground`	`string`	-	Mobile overlay background color

SidebarSection


`id*`	`string`	-	Section identifier
`label`	`string`	-	Section label
`items*`	`SidebarNavItem[]`	-	Navigation items

SidebarNavItem


`id*`	`string`	-	Item identifier
`label*`	`string`	-	Item label
`href`	`string`	-	Link URL
`icon`	`IconName \| React.ReactNode`	-	Item icon
`badge`	`React.ReactNode`	-	Optional badge
`active`	`boolean`	-	Active state
`onClick`	`() => void`	-	Click handler

BasicSidebar.tsxtsx

import { DashboardSidebar } from "@hua-labs/ui/advanced/dashboard";

export function BasicSidebar() {
  return (
    <DashboardSidebar
      logo={<Logo />}
      sections={[
        {
          id: "main",
          label: "Main",
          items: [
            { id: "dashboard", label: "Dashboard", href: "/dashboard", icon: "layout", active: true },
            { id: "transactions", label: "Transactions", href: "/transactions", icon: "wallet" },
            { id: "analytics", label: "Analytics", href: "/analytics", icon: "barChart" }
          ]
        },
        {
          id: "settings",
          label: "Settings",
          items: [
            { id: "profile", label: "Profile", href: "/profile", icon: "user" },
            { id: "settings", label: "Settings", href: "/settings", icon: "settings" }
          ]
        }
      ]}
    />
  );
}

DashboardGridPro DashboardToolbarPro