Reusable Sidebar

A flexible navigation sidebar component with grouping, collapsible modes, and responsive behavior for application layouts.

The ReusableSidebar component provides a comprehensive navigation solution with support for simple items, grouped navigation, collapsible modes, and responsive behavior. It's built on Radix UI primitives and follows the Vera UI design system.

SidebarProvider

The provider component manages sidebar state and must wrap the ReusableSidebar :

import { SidebarProvider } from '@helgadigitals/vera-ui'
<SidebarProvider>
  <ReusableSidebar items={items} />
</SidebarProvider>

Important: The ReusableSidebar component must be wrapped with SidebarProvider to function properly.

Installation

pnpm add @helgadigitals/vera-ui lucide-react react-router-dom

npm install @helgadigitals/vera-ui lucide-react react-router-dom

yarn add @helgadigitals/vera-ui lucide-react react-router-dom

Note: This component requires React Router DOM for routing functionality. Make sure to wrap your app with BrowserRouter or another React Router provider.

Usage

import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'
import { Home, Users, Settings, BarChart } from 'lucide-react'
const items = [
{ title: "Dashboard", path: "/", icon: Home },
{ title: "Users", path: "/users", icon: Users, badge: 12 },
{ title: "Analytics", path: "/analytics", icon: BarChart },
{ title: "Settings", path: "/settings", icon: Settings }
];
function App() {
return (
  <SidebarProvider>
    <div className="flex h-screen">
      <ReusableSidebar 
        items={items}
        heading="My App"
        label="Navigation"
      />
      <main className="flex-1 overflow-auto">
        <div className="p-6">
          <h1 className="text-2xl font-bold mb-4">Welcome to Dashboard</h1>
          <p>Your main application content goes here.</p>
        </div>
      </main>
    </div>
  </SidebarProvider>
)
}

import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'import { Home, Users, Settings, BarChart } from 'lucide-react'const items = [{ title: "Dashboard", path: "/", icon: Home },{ title: "Users", path: "/users", icon: Users, badge: 12 },{ title: "Analytics", path: "/analytics", icon: BarChart },{ title: "Settings", path: "/settings", icon: Settings }];function App() {return (  <SidebarProvider>    <div className="flex h-screen">      <ReusableSidebar         items={items}        heading="My App"        label="Navigation"      />      <main className="flex-1 overflow-auto">        <div className="p-6">          <h1 className="text-2xl font-bold mb-4">Welcome to Dashboard</h1>          <p>Your main application content goes here.</p>        </div>      </main>    </div>  </SidebarProvider>)}

Responsive Behavior

Desktop: Full sidebar with collapsible icon mode
Tablet & Mobile: Overlay behavior with mobile-friendly touch controls
Automatic State Management: Built-in responsive breakpoint detection

Simple Items: Direct navigation links with icons and optional badges
Grouped Items: Organized sections with collapsible group headers
Mixed Content: Combination of simple items and grouped sections

Built-in Functionality

Active State Detection: Automatically highlights current route
Keyboard Navigation: Full keyboard accessibility support
Dark Mode Support: Respects theme system preferences
Icon Integration: Built for Lucide React icons

Advanced Usage

import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'
import { Home, Users, Settings, FileText, Zap } from 'lucide-react'
const mixedItems = [
// Top-level items
{ title: "Dashboard", path: "/", icon: Home },
{ title: "Quick Actions", path: "/quick", icon: Zap, badge: "New" },

// Grouped sections
{
  key: "content",
  label: "Content",
  icon: FileText,
  items: [
    { title: "Posts", path: "/posts", icon: FileText },
    { title: "Pages", path: "/pages", icon: FileText }
  ]
},
{
  key: "admin",
  label: "Administration",
  items: [
    { title: "Users", path: "/users", icon: Users, badge: 8 },
    { title: "Settings", path: "/settings", icon: Settings }
  ]
}
];
function MixedNavigation() {
return (
  <SidebarProvider>
    <div className="flex h-screen">
      <ReusableSidebar 
        items={mixedItems}
        heading="My Application"
        label="Navigation"
        isFooterVisible={true}
        displayName="John Doe"
      />
      <main className="flex-1 overflow-auto p-6">
        <h1 className="text-2xl font-bold">Application Dashboard</h1>
      </main>
    </div>
  </SidebarProvider>
)
}

import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'import { Home, Users, Settings, FileText, Zap } from 'lucide-react'const mixedItems = [// Top-level items{ title: "Dashboard", path: "/", icon: Home },{ title: "Quick Actions", path: "/quick", icon: Zap, badge: "New" },// Grouped sections{  key: "content",  label: "Content",  icon: FileText,  items: [    { title: "Posts", path: "/posts", icon: FileText },    { title: "Pages", path: "/pages", icon: FileText }  ]},{  key: "admin",  label: "Administration",  items: [    { title: "Users", path: "/users", icon: Users, badge: 8 },    { title: "Settings", path: "/settings", icon: Settings }  ]}];function MixedNavigation() {return (  <SidebarProvider>    <div className="flex h-screen">      <ReusableSidebar         items={mixedItems}        heading="My Application"        label="Navigation"        isFooterVisible={true}        displayName="John Doe"      />      <main className="flex-1 overflow-auto p-6">        <h1 className="text-2xl font-bold">Application Dashboard</h1>      </main>    </div>  </SidebarProvider>)}

Custom Styling

import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'
import { Home, Users, Settings } from 'lucide-react'
function CustomStyledSidebar() {
const items = [
  { title: "Dashboard", path: "/", icon: Home },
  { title: "Users", path: "/users", icon: Users },
  { title: "Settings", path: "/settings", icon: Settings }
];
const customStyles = {
  bgColor: "bg-slate-900",
  textColor: "text-slate-100",
  widthClass: "w-80",
  itemTextSize: "text-base",
  headingTextSize: "text-sm",
  surfaceClasses: "border-slate-700"
};
const customClasses = {
  root: "shadow-xl",
  header: "bg-slate-800 border-b border-slate-700",
  heading: "text-slate-200 font-bold",
  menuButton: "hover:bg-slate-800/50",
  menuButtonActive: "bg-slate-700 text-white"
};
return (
  <SidebarProvider>
    <div className="flex h-screen">
      <ReusableSidebar 
        items={items}
        heading="Custom Theme"
        stylesConfig={customStyles}
        classNames={customClasses}
      />
      <main className="flex-1 overflow-auto bg-slate-50 p-6">
        <h1 className="text-2xl font-bold">Custom Styled Sidebar</h1>
      </main>
    </div>
  </SidebarProvider>
)
}

import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'import { Home, Users, Settings } from 'lucide-react'function CustomStyledSidebar() {const items = [  { title: "Dashboard", path: "/", icon: Home },  { title: "Users", path: "/users", icon: Users },  { title: "Settings", path: "/settings", icon: Settings }];const customStyles = {  bgColor: "bg-slate-900",  textColor: "text-slate-100",  widthClass: "w-80",  itemTextSize: "text-base",  headingTextSize: "text-sm",  surfaceClasses: "border-slate-700"};const customClasses = {  root: "shadow-xl",  header: "bg-slate-800 border-b border-slate-700",  heading: "text-slate-200 font-bold",  menuButton: "hover:bg-slate-800/50",  menuButtonActive: "bg-slate-700 text-white"};return (  <SidebarProvider>    <div className="flex h-screen">      <ReusableSidebar         items={items}        heading="Custom Theme"        stylesConfig={customStyles}        classNames={customClasses}      />      <main className="flex-1 overflow-auto bg-slate-50 p-6">        <h1 className="text-2xl font-bold">Custom Styled Sidebar</h1>      </main>    </div>  </SidebarProvider>)}

import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'
import { Home, Users, Settings, FolderOpen } from 'lucide-react'
function BrandedSidebar() {
const items = [
  { title: "Dashboard", path: "/", icon: Home },
  { title: "Projects", path: "/projects", icon: FolderOpen },
  { title: "Team", path: "/team", icon: Users },
  { title: "Settings", path: "/settings", icon: Settings }
];
return (
  <SidebarProvider>
    <div className="flex h-screen">
      <ReusableSidebar 
        items={items}
        heading="Project Manager"
        image="/logo.png"
        isFooterVisible={true}
        displayName="Jane Smith"
        label="Main Navigation"
      />
      <main className="flex-1 overflow-auto p-6">
        <h1 className="text-2xl font-bold">Project Dashboard</h1>
      </main>
    </div>
  </SidebarProvider>
)
}

import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'import { Home, Users, Settings, FolderOpen } from 'lucide-react'function BrandedSidebar() {const items = [  { title: "Dashboard", path: "/", icon: Home },  { title: "Projects", path: "/projects", icon: FolderOpen },  { title: "Team", path: "/team", icon: Users },  { title: "Settings", path: "/settings", icon: Settings }];return (  <SidebarProvider>    <div className="flex h-screen">      <ReusableSidebar         items={items}        heading="Project Manager"        image="/logo.png"        isFooterVisible={true}        displayName="Jane Smith"        label="Main Navigation"      />      <main className="flex-1 overflow-auto p-6">        <h1 className="text-2xl font-bold">Project Dashboard</h1>      </main>    </div>  </SidebarProvider>)}

Router Integration

The sidebar requires React Router DOM and automatically detects active routes using React Router's navigation hooks.

// React Router DOM example
import { BrowserRouter } from 'react-router-dom';
import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'
import { Home, Users, Settings } from 'lucide-react'
const navigationItems = [
{ title: "Dashboard", path: "/", icon: Home },
{ title: "Users", path: "/users", icon: Users },
{ title: "Settings", path: "/settings", icon: Settings }
];
function App() {
return (
  <BrowserRouter>
    <SidebarProvider>
      <div className="flex h-screen">
        <ReusableSidebar 
          items={navigationItems}
          heading="My App"
          label="Navigation"
        />
        <main className="flex-1 overflow-auto">
          {/* Your routes here */}
        </main>
      </div>
    </SidebarProvider>
  </BrowserRouter>
)
}

// React Router DOM exampleimport { BrowserRouter } from 'react-router-dom';import { ReusableSidebar, SidebarProvider } from '@helgadigitals/vera-ui'import { Home, Users, Settings } from 'lucide-react'const navigationItems = [{ title: "Dashboard", path: "/", icon: Home },{ title: "Users", path: "/users", icon: Users },{ title: "Settings", path: "/settings", icon: Settings }];function App() {return (  <BrowserRouter>    <SidebarProvider>      <div className="flex h-screen">        <ReusableSidebar           items={navigationItems}          heading="My App"          label="Navigation"        />        <main className="flex-1 overflow-auto">          {/* Your routes here */}        </main>      </div>    </SidebarProvider>  </BrowserRouter>)}

API Reference

SidebarProvider

The provider component manages sidebar state and must wrap the ReusableSidebar.

Prop

Type

Usage:

<SidebarProvider>
  <ReusableSidebar items={items} />
  <main>{children}</main>
</SidebarProvider>