{"_id":"@aniruddha1806/react-collapsible-sidebar","_rev":"2-b6aa4b09cf41af83ed126f76d2069f2b","name":"@aniruddha1806/react-collapsible-sidebar","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.3":{"name":"@aniruddha1806/react-collapsible-sidebar","version":"1.0.3","keywords":["react","sidebar","navigation","collapsible","ui","component"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/react-collapsible-sidebar@1.0.3","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"d83ae679fa33a1294b33226007dbc98068e93ec9","tarball":"https://registry.npmjs.org/@aniruddha1806/react-collapsible-sidebar/-/react-collapsible-sidebar-1.0.3.tgz","fileCount":14,"integrity":"sha512-z8cCSBTR15OrRqHg/kWoiUd2a4/vZTr+XqtTwI56QPVkmXF9OwMRQMoe6ojmdjhtncaIWxyQEsqQHA+Fuw0i9g==","signatures":[{"sig":"MEUCIAqMetqJ6eVzmON5n8Jpr3+iUYXneujnrNJgN+3EvgLtAiEA2H2vdOCcqGUi2DmJN7DQ0qc6n5GBEMoFiGPt+4GYi+g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31403},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A customizable and collapsible sidebar component for React applications","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.8.1"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.0.0","rollup":"^2.75.6","react-dom":"^18.0.0","typescript":"^4.7.3","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-dts":"^4.2.2","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-typescript":"^8.3.2","@rollup/plugin-node-resolve":"^13.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/react-collapsible-sidebar_1.0.3_1743950398108_0.4770475093892952","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@aniruddha1806/react-collapsible-sidebar","version":"1.0.4","description":"A customizable and collapsible sidebar component for React applications","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","test":"echo \"Error: no test specified\" && exit 1","prepublishOnly":"npm run build"},"keywords":["react","sidebar","navigation","collapsible","ui","component"],"author":{"name":"Your Name"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.3.2","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","react":"^18.0.0","react-dom":"^18.0.0","rollup":"^2.75.6","rollup-plugin-dts":"^4.2.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","typescript":"^4.7.3"},"dependencies":{"tslib":"^2.8.1"},"_id":"@aniruddha1806/react-collapsible-sidebar@1.0.4","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-QlbJPCjzcUNZXfeMaOIo1au0dSDmDIpk12hK51FHBgULNWg3o4AFkpUVL1//2NTgJn2Xgq59kbFYq1Nl1D+PLw==","shasum":"04e2c38ba481d7e9be7f98fe02bd38ce3af45e38","tarball":"https://registry.npmjs.org/@aniruddha1806/react-collapsible-sidebar/-/react-collapsible-sidebar-1.0.4.tgz","fileCount":15,"unpackedSize":42683,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDCNbHS/f5NIlaRg40Rh5iroVfwGaysU+I2K8Zr5MGvqwIgE1uTgTB1LbhpqJX6A6ptq2SJC3I8M6Gee6ZzbVuIX/Q="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-collapsible-sidebar_1.0.4_1749125275182_0.947202308145991"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-06T14:39:58.002Z","modified":"2025-06-05T12:07:55.554Z","1.0.3":"2025-04-06T14:39:58.299Z","1.0.4":"2025-06-05T12:07:55.386Z"},"author":{"name":"Your Name"},"license":"MIT","keywords":["react","sidebar","navigation","collapsible","ui","component"],"description":"A customizable and collapsible sidebar component for React applications","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Collapsible Sidebar\r\n\r\nA highly customizable, responsive collapsible sidebar component for React applications. Perfect for navigation menus, admin dashboards, and application layouts with zero dependencies.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/react-collapsible-sidebar\r\n```\r\n\r\n## Features\r\n\r\n- 🔄 Smooth expand/collapse animations\r\n- 🎨 Fully customizable colors and styling\r\n- 📱 Responsive design with configurable widths\r\n- 🏷️ Badge support for menu items\r\n- 🎯 Active state management\r\n- 🖱️ Hover effects and interactions\r\n- ♿ Accessibility features with ARIA labels\r\n- 🪶 Zero dependencies and lightweight\r\n- 📦 TypeScript support with full type definitions\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';\r\nimport { Home, Settings, User, Mail } from 'lucide-react';\r\n\r\nfunction App() {\r\n  const menuItems = [\r\n    {\r\n      icon: Home,\r\n      label: 'Dashboard',\r\n      href: '/dashboard',\r\n      active: true\r\n    },\r\n    {\r\n      icon: User,\r\n      label: 'Profile',\r\n      href: '/profile'\r\n    },\r\n    {\r\n      icon: Mail,\r\n      label: 'Messages',\r\n      href: '/messages',\r\n      badge: 5\r\n    },\r\n    {\r\n      icon: Settings,\r\n      label: 'Settings',\r\n      href: '/settings'\r\n    }\r\n  ];\r\n\r\n  return (\r\n    <div style={{ display: 'flex', height: '100vh' }}>\r\n      <CollapsibleSidebar\r\n        header={<h2>My App</h2>}\r\n        menuItems={menuItems}\r\n        footer={<p>© 2024 My App</p>}\r\n      />\r\n      <main style={{ flex: 1, padding: '20px' }}>\r\n        {/* Your main content */}\r\n      </main>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n### CollapsibleSidebarProps\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `header` | `ReactNode` | `undefined` | Content displayed in the sidebar header |\r\n| `footer` | `ReactNode` | `undefined` | Content displayed in the sidebar footer |\r\n| `menuItems` | `SidebarMenuItem[]` | `[]` | Array of menu items to display |\r\n| `defaultExpanded` | `boolean` | `true` | Initial expanded state of the sidebar |\r\n| `onToggle` | `(expanded: boolean) => void` | `undefined` | Callback when sidebar is toggled |\r\n| `expandedWidth` | `string` | `\"240px\"` | Width when sidebar is expanded |\r\n| `collapsedWidth` | `string` | `\"64px\"` | Width when sidebar is collapsed |\r\n| `backgroundColor` | `string` | `\"#ffffff\"` | Background color of the sidebar |\r\n| `textColor` | `string` | `\"#333333\"` | Default text color |\r\n| `activeBackgroundColor` | `string` | `\"#f3f4f6\"` | Background color for active items |\r\n| `activeTextColor` | `string` | `\"#000000\"` | Text color for active items |\r\n| `hoverBackgroundColor` | `string` | `\"#f9fafb\"` | Background color on hover |\r\n| `hoverTextColor` | `string` | `\"#000000\"` | Text color on hover |\r\n| `borderColor` | `string` | `\"#e5e7eb\"` | Border color for separators |\r\n| `iconColor` | `string` | `\"#6b7280\"` | Default icon color |\r\n| `badgeBackgroundColor` | `string` | `\"#3b82f6\"` | Background color for badges |\r\n| `badgeTextColor` | `string` | `\"#ffffff\"` | Text color for badges |\r\n\r\n### SidebarMenuItem\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `icon` | `React.ElementType` | `required` | Icon component to display |\r\n| `label` | `string` | `required` | Text label for the menu item |\r\n| `onClick` | `() => void` | `undefined` | Click handler for the menu item |\r\n| `href` | `string` | `undefined` | URL for navigation (creates a link) |\r\n| `active` | `boolean` | `false` | Whether the item is currently active |\r\n| `badge` | `string \\\\| number` | `undefined` | Badge content to display |\r\n\r\n## Examples\r\n\r\n### Basic Sidebar\r\n\r\nSimple sidebar with navigation items:\r\n\r\n```jsx\r\nimport { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';\r\nimport { Home, Users, Settings } from 'lucide-react';\r\n\r\nfunction BasicSidebar() {\r\n  const menuItems = [\r\n    { icon: Home, label: 'Home', href: '/' },\r\n    { icon: Users, label: 'Users', href: '/users' },\r\n    { icon: Settings, label: 'Settings', href: '/settings' }\r\n  ];\r\n\r\n  return (\r\n    <CollapsibleSidebar   header={<h2>My App</h2>} menuItems={menuItems} />\r\n  );\r\n}\r\n```\r\n\r\n### Dark Theme Sidebar\r\n\r\nCustomize colors for a dark theme:\r\n\r\n```jsx\r\nimport { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';\r\nimport { Home, Users, Settings, Bell } from 'lucide-react';\r\n\r\nfunction DarkSidebar() {\r\n  const menuItems = [\r\n    { icon: Home, label: 'Dashboard', active: true },\r\n    { icon: Users, label: 'Users' },\r\n    { icon: Bell, label: 'Notifications', badge: 3 },\r\n    { icon: Settings, label: 'Settings' }\r\n  ];\r\n\r\n  return (\r\n    <div className='h-screen'>\r\n\r\n    \r\n   <CollapsibleSidebar\r\n      menuItems={menuItems}\r\n      header={<h2 className='text-white'>My App</h2>}\r\n      backgroundColor=\"#1f2937\"\r\n      textColor=\"#d1d5db\"\r\n      activeBackgroundColor=\"#374151\"\r\n      activeTextColor=\"#ffffff\"\r\n      hoverBackgroundColor=\"#374151\"\r\n      hoverTextColor=\"#ffffff\"\r\n      borderColor=\"#374151\"\r\n      iconColor=\"#9ca3af\"\r\n      badgeBackgroundColor=\"#ef4444\"\r\n      badgeTextColor=\"#ffffff\"\r\n       footer={<p className='text-white'>© 2024 My App</p>}\r\n    />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### With Header and Footer\r\n\r\nAdd custom header and footer content:\r\n\r\n```jsx\r\nimport { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';\r\nimport { Home, Users, Settings, LogOut } from 'lucide-react';\r\n\r\nfunction SidebarWithHeaderFooter() {\r\n  const menuItems = [\r\n    { icon: Home, label: 'Dashboard', href: '/dashboard' },\r\n    { icon: User, label: 'Users', href: '/users' },\r\n    { icon: Settings, label: 'Settings', href: '/settings' }\r\n    \r\n  ];\r\n\r\n  const header = (\r\n    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\r\n      <img src=\"Any...\" alt=\"Logo\" style={{ width: '24px', height: '24px' }} />\r\n      <span style={{ fontWeight: 'bold' }}>MyApp</span>\r\n    </div>\r\n  );\r\n\r\n  const footer = (\r\n    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\r\n      <LogOut className='cursor-pointer' size={16} />\r\n      <span>Logout</span>\r\n    </div>\r\n  );\r\n\r\n  \r\n  return (\r\n    <div className='h-screen'>\r\n\r\n    \r\n   <CollapsibleSidebar\r\n      header={header}\r\n      footer={footer}\r\n      menuItems={menuItems}\r\n    />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Admin Dashboard Sidebar\r\n\r\nComplete admin dashboard with badges and active states:\r\n\r\n```jsx\r\nimport { CollapsibleSidebar } from '@aniruddha1806/react-collapsible-sidebar';\r\nimport { LayoutDashboard, Users, ShoppingCart, Package, BarChart3, Settings, Bell, Mail } from 'lucide-react';\r\n\r\nfunction AdminSidebar() {\r\n   const [activeItem, setActiveItem] = useState('dashboard');\r\n\r\n  const menuItems = [\r\n    {\r\n      icon: LayoutDashboard,\r\n      label: 'Dashboard',\r\n      onClick: () => setActiveItem('dashboard'),\r\n      active: activeItem === 'dashboard'\r\n    },\r\n    {\r\n      icon: Users,\r\n      label: 'Users',\r\n      onClick: () => setActiveItem('users'),\r\n      active: activeItem === 'users',\r\n      badge: 12\r\n    },\r\n    {\r\n      icon: ShoppingCart,\r\n      label: 'Orders',\r\n      onClick: () => setActiveItem('orders'),\r\n      active: activeItem === 'orders',\r\n      badge: 5\r\n    },\r\n    {\r\n      icon: Package,\r\n      label: 'Products',\r\n      onClick: () => setActiveItem('products'),\r\n      active: activeItem === 'products'\r\n    },\r\n    {\r\n      icon: BarChart3,\r\n      label: 'Analytics',\r\n      onClick: () => setActiveItem('analytics'),\r\n      active: activeItem === 'analytics'\r\n    },\r\n    {\r\n      icon: Mail,\r\n      label: 'Messages',\r\n      onClick: () => setActiveItem('messages'),\r\n      active: activeItem === 'messages',\r\n      badge: 'New'\r\n    },\r\n    {\r\n      icon: Bell,\r\n      label: 'Notifications',\r\n      onClick: () => setActiveItem('notifications'),\r\n      active: activeItem === 'notifications',\r\n      badge: 99\r\n    },\r\n    {\r\n      icon: Settings,\r\n      label: 'Settings',\r\n      onClick: () => setActiveItem('settings'),\r\n      active: activeItem === 'settings'\r\n    }\r\n  ];\r\n\r\n  const handleToggle = (expanded) => {\r\n    console.log('Sidebar expanded:', expanded);\r\n  };\r\n\r\n  return (\r\n    <CollapsibleSidebar\r\n      header={\r\n        <div style={{ display: 'flex', alignItems: 'center', gap: '8px',position:'relative' }}>\r\n          <div style={{ \r\n            width: '32px', \r\n            height: '32px', \r\n            backgroundColor: '#3b82f6', \r\n            borderRadius: '8px',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            color: 'white',\r\n            fontWeight: 'bold'\r\n          }}>\r\n            A\r\n          </div>\r\n          <span style={{ fontWeight: 'bold', fontSize: '18px' }}>Admin Panel</span>\r\n        </div>\r\n      }\r\n      footer={\r\n        <div style={{ \r\n          display: 'flex', \r\n          alignItems: 'center', \r\n          gap: '8px',\r\n          padding: '8px',\r\n          backgroundColor: '#f3f4f6',\r\n          borderRadius: '8px',\r\n          bottom:'10px',\r\n          position:'absolute'\r\n        }}>\r\n          <div style={{ \r\n            width: '24px', \r\n            height: '24px', \r\n            backgroundColor: '#10b981', \r\n            borderRadius: '50%' \r\n          }} />\r\n          <span style={{ fontSize: '14px' }}>John Doe</span>\r\n        </div>\r\n      }\r\n      menuItems={menuItems}\r\n      onToggle={handleToggle}\r\n      expandedWidth=\"280px\"\r\n      collapsedWidth=\"72px\"\r\n    />);\r\n}\r\n```\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport { \r\n  CollapsibleSidebar, \r\n  SidebarMenuItem, \r\n  CollapsibleSidebarProps \r\n} from '@aniruddha1806/react-collapsible-sidebar';\r\nimport { Home, Users, Settings } from 'lucide-react';\r\n\r\ninterface AppSidebarProps {\r\n  userRole: 'admin' | 'user';\r\n}\r\n\r\nconst AppSidebar: React.FC<AppSidebarProps> = ({ userRole }) => {\r\n  const menuItems: SidebarMenuItem[] = [\r\n    {\r\n      icon: Home,\r\n      label: 'Dashboard',\r\n      href: '/dashboard',\r\n      active: true\r\n    },\r\n    {\r\n      icon: Users,\r\n      label: 'Users',\r\n      href: '/users',\r\n      // Only show for admin\r\n      ...(userRole === 'admin' && { badge: 'Admin' })\r\n    },\r\n    {\r\n      icon: Settings,\r\n      label: 'Settings',\r\n      onClick: () => console.log('Settings clicked')\r\n    }\r\n  ];\r\n\r\n  const handleToggle = (expanded: boolean): void => {\r\n    console.log('Sidebar toggled:', expanded);\r\n  };\r\n\r\n  const sidebarProps: CollapsibleSidebarProps = {\r\n    menuItems,\r\n    onToggle: handleToggle,\r\n    defaultExpanded: true,\r\n    backgroundColor: '#ffffff',\r\n    textColor: '#333333'\r\n  };\r\n\r\n  return <CollapsibleSidebar {...sidebarProps} />;\r\n};\r\n```\r\n\r\n## Styling\r\n\r\nThe 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.\r\n\r\n### Responsive Design\r\n\r\nThe sidebar automatically handles responsive behavior. You can customize the widths for different screen sizes:\r\n\r\n```jsx\r\n<CollapsibleSidebar\r\n  expandedWidth=\"280px\"    // Desktop expanded width\r\n  collapsedWidth=\"64px\"    // Desktop collapsed width\r\n  menuItems={menuItems}\r\n/>\r\n```\r\n\r\n","readmeFilename":"README.md"}