@aniruddha1806/react-collapsible-sidebar v1.0.4

React Collapsible Sidebar

A highly customizable, responsive collapsible sidebar component for React applications. Perfect for navigation menus, admin dashboards, and application layouts with zero dependencies.

Installation

npm install @aniruddha1806/react-collapsible-sidebar

Features

• 🔄 Smooth expand/collapse animations
• 🎨 Fully customizable colors and styling
• 📱 Responsive design with configurable widths
• 🏷️ Badge support for menu items
• 🎯 Active state management
• 🖱️ Hover effects and interactions
• ♿ Accessibility features with ARIA labels
• 🪶 Zero dependencies and lightweight
• 📦 TypeScript support with full type definitions

Quick Start

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Settings, User, Mail } from 'lucide-react';

function App() {
  const menuItems = [
    {
      icon: Home,
      label: 'Dashboard',
      href: '/dashboard',
      active: true
    },
    {
      icon: User,
      label: 'Profile',
      href: '/profile'
    },
    {
      icon: Mail,
      label: 'Messages',
      href: '/messages',
      badge: 5
    },
    {
      icon: Settings,
      label: 'Settings',
      href: '/settings'
    }
  ];

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <CollapsibleSidebar
        header={<h2>My App</h2>}
        menuItems={menuItems}
        footer={<p>© 2024 My App</p>}
      />
      <main style={{ flex: 1, padding: '20px' }}>
        {/* Your main content */}
      </main>
    </div>
  );
}

Props

CollapsibleSidebarProps

SidebarMenuItem

Examples

Basic Sidebar

Simple sidebar with navigation items:

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Users, Settings } from 'lucide-react';

function BasicSidebar() {
  const menuItems = [
    { icon: Home, label: 'Home', href: '/' },
    { icon: Users, label: 'Users', href: '/users' },
    { icon: Settings, label: 'Settings', href: '/settings' }
  ];

  return (
    <CollapsibleSidebar   header={<h2>My App</h2>} menuItems={menuItems} />
  );
}

Dark Theme Sidebar

Customize colors for a dark theme:

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Users, Settings, Bell } from 'lucide-react';

function DarkSidebar() {
  const menuItems = [
    { icon: Home, label: 'Dashboard', active: true },
    { icon: Users, label: 'Users' },
    { icon: Bell, label: 'Notifications', badge: 3 },
    { icon: Settings, label: 'Settings' }
  ];

  return (
    <div className='h-screen'>

    
   <CollapsibleSidebar
      menuItems={menuItems}
      header={<h2 className='text-white'>My App</h2>}
      backgroundColor="#1f2937"
      textColor="#d1d5db"
      activeBackgroundColor="#374151"
      activeTextColor="#ffffff"
      hoverBackgroundColor="#374151"
      hoverTextColor="#ffffff"
      borderColor="#374151"
      iconColor="#9ca3af"
      badgeBackgroundColor="#ef4444"
      badgeTextColor="#ffffff"
       footer={<p className='text-white'>© 2024 My App</p>}
    />
    </div>
  );
}

With Header and Footer

Add custom header and footer content:

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Users, Settings, LogOut } from 'lucide-react';

function SidebarWithHeaderFooter() {
  const menuItems = [
    { icon: Home, label: 'Dashboard', href: '/dashboard' },
    { icon: User, label: 'Users', href: '/users' },
    { icon: Settings, label: 'Settings', href: '/settings' }
    
  ];

  const header = (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <img src="Any..." alt="Logo" style={{ width: '24px', height: '24px' }} />
      <span style={{ fontWeight: 'bold' }}>MyApp</span>
    </div>
  );

  const footer = (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <LogOut className='cursor-pointer' size={16} />
      <span>Logout</span>
    </div>
  );

  
  return (
    <div className='h-screen'>

    
   <CollapsibleSidebar
      header={header}
      footer={footer}
      menuItems={menuItems}
    />
    </div>
  );
}

Admin Dashboard Sidebar

Complete admin dashboard with badges and active states:

import { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';
import { LayoutDashboard, Users, ShoppingCart, Package, BarChart3, Settings, Bell, Mail } from 'lucide-react';

function AdminSidebar() {
   const [activeItem, setActiveItem] = useState('dashboard');

  const menuItems = [
    {
      icon: LayoutDashboard,
      label: 'Dashboard',
      onClick: () => setActiveItem('dashboard'),
      active: activeItem === 'dashboard'
    },
    {
      icon: Users,
      label: 'Users',
      onClick: () => setActiveItem('users'),
      active: activeItem === 'users',
      badge: 12
    },
    {
      icon: ShoppingCart,
      label: 'Orders',
      onClick: () => setActiveItem('orders'),
      active: activeItem === 'orders',
      badge: 5
    },
    {
      icon: Package,
      label: 'Products',
      onClick: () => setActiveItem('products'),
      active: activeItem === 'products'
    },
    {
      icon: BarChart3,
      label: 'Analytics',
      onClick: () => setActiveItem('analytics'),
      active: activeItem === 'analytics'
    },
    {
      icon: Mail,
      label: 'Messages',
      onClick: () => setActiveItem('messages'),
      active: activeItem === 'messages',
      badge: 'New'
    },
    {
      icon: Bell,
      label: 'Notifications',
      onClick: () => setActiveItem('notifications'),
      active: activeItem === 'notifications',
      badge: 99
    },
    {
      icon: Settings,
      label: 'Settings',
      onClick: () => setActiveItem('settings'),
      active: activeItem === 'settings'
    }
  ];

  const handleToggle = (expanded) => {
    console.log('Sidebar expanded:', expanded);
  };

  return (
    <CollapsibleSidebar
      header={
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px',position:'relative' }}>
          <div style={{ 
            width: '32px', 
            height: '32px', 
            backgroundColor: '#3b82f6', 
            borderRadius: '8px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            fontWeight: 'bold'
          }}>
            A
          </div>
          <span style={{ fontWeight: 'bold', fontSize: '18px' }}>Admin Panel</span>
        </div>
      }
      footer={
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: '8px',
          padding: '8px',
          backgroundColor: '#f3f4f6',
          borderRadius: '8px',
          bottom:'10px',
          position:'absolute'
        }}>
          <div style={{ 
            width: '24px', 
            height: '24px', 
            backgroundColor: '#10b981', 
            borderRadius: '50%' 
          }} />
          <span style={{ fontSize: '14px' }}>John Doe</span>
        </div>
      }
      menuItems={menuItems}
      onToggle={handleToggle}
      expandedWidth="280px"
      collapsedWidth="72px"
    />);
}

TypeScript Usage

The component provides full TypeScript support:

import { 
  CollapsibleSidebar, 
  SidebarMenuItem, 
  CollapsibleSidebarProps 
} from '@aniruddha1806/react-collapsible-sidebar';
import { Home, Users, Settings } from 'lucide-react';

interface AppSidebarProps {
  userRole: 'admin' | 'user';
}

const AppSidebar: React.FC<AppSidebarProps> = ({ userRole }) => {
  const menuItems: SidebarMenuItem[] = [
    {
      icon: Home,
      label: 'Dashboard',
      href: '/dashboard',
      active: true
    },
    {
      icon: Users,
      label: 'Users',
      href: '/users',
      // Only show for admin
      ...(userRole === 'admin' && { badge: 'Admin' })
    },
    {
      icon: Settings,
      label: 'Settings',
      onClick: () => console.log('Settings clicked')
    }
  ];

  const handleToggle = (expanded: boolean): void => {
    console.log('Sidebar toggled:', expanded);
  };

  const sidebarProps: CollapsibleSidebarProps = {
    menuItems,
    onToggle: handleToggle,
    defaultExpanded: true,
    backgroundColor: '#ffffff',
    textColor: '#333333'
  };

  return <CollapsibleSidebar {...sidebarProps} />;
};

Styling

The component uses inline styles for maximum compatibility and doesn't require any CSS imports. All styling is controlled through props, making it easy to integrate with any design system.

Responsive Design

The sidebar automatically handles responsive behavior. You can customize the widths for different screen sizes:

<CollapsibleSidebar
  expandedWidth="280px"    // Desktop expanded width
  collapsedWidth="64px"    // Desktop collapsed width
  menuItems={menuItems}
/>