Sidebar

@hua-labs/ui/navigation

v1.0.0

대시보드 레이아웃을 위한 접을 수 있는 사이드바 네비게이션 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Sidebar } from "@hua-labs/ui/navigation";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법

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

Props

이름	타입	기본값	설명
`id*`	`string`	-	Section identifier
`label`	`string`	-	Section label
`items*`	`SidebarNavItem[]`	-	Navigation items

SidebarNavItem

Props

이름	타입	기본값	설명
`id*`	`string`	-	Section identifier
`label*`	`string`	-	Section label
`href`	`string`	-	Link URL
`icon`	`IconName \| React.ReactNode`	-	Item icon
`badge`	`React.ReactNode`	-	Optional badge
`active`	`boolean`	-	Active state
`onClick`	`() => void`	-	클릭 핸들러

코드 예시

기본 사용법

BasicSidebar.tsxtsx

import { Sidebar } from "@hua-labs/ui/navigation";

export function BasicSidebar() {
  return (
    <Sidebar
      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