Sidebar | MDK

Application sidebar with collapsible state, persistent expansion (via `localStorage`), optional overlay mode, and item-click + active-item highlighting.

Application sidebar with collapsible state, persistent expansion (via localStorage), optional overlay mode, and item-click + active-item highlighting.

import { Sidebar } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`activeId`	Required	`string \| undefined`	—	—
`expanded`	Required	`boolean \| undefined`	—	—
`visible`	Required	`boolean \| undefined`	—	—
`overlay`	Required	`boolean \| undefined`	—	—
`className`	Required	`string \| undefined`	—	—
`defaultExpanded`	Required	`boolean \| undefined`	—	—
`header`	Required	`React.ReactNode`	—	—
`onClose`	Required	`VoidFunction \| undefined`	—	—
`onExpandedChange`	Required	`((expanded: boolean) => void) \| undefined`	—	—
`onItemClick`	Required	`((item: SidebarMenuItem) => void) \| undefined`	—	—
`items`	Required	`SidebarMenuItem[]`	—	—

Usage

Application sidebar with collapsible state (persisted via localStorage), optional overlay mode, and item-click + active-item highlighting.

Data contracts

type SidebarMenuItem = {
  id: string;
  label: string;
  icon?: ReactNode;
  disabled?: boolean;
  items?: SidebarMenuItem[];
};

Example

/** * Runnable example for Sidebar. */import { useState } from 'react'import { Sidebar } from '@tetherto/mdk-react-devkit'const items = [  { id: '/dashboard', label: 'Dashboard' },  { id: '/alerts', label: 'Alerts' },  { id: '/devices', label: 'Devices' },  { id: '/settings', label: 'Settings' },]export const SidebarExample = () => {  const [active, setActive] = useState('/dashboard')  return (    <Sidebar      items={items}      activeId={active}      onItemClick={(item) => setActive(item.id)}      defaultExpanded    />  )}