{"_id":"@ashish_gautam/react-collapsible-sidebar","_rev":"2-c51e1fa7ca61a30812c12ac6104f0c07","name":"@ashish_gautam/react-collapsible-sidebar","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ashish_gautam/react-collapsible-sidebar","version":"1.0.0","keywords":["react","sidebar","collapsible","navigation","component","typescript"],"author":{"name":"Ashish Gautam","email":"ashish.gautam.talentelgia@gmail.com"},"license":"MIT","_id":"@ashish_gautam/react-collapsible-sidebar@1.0.0","maintainers":[{"name":"ashish_gautam","email":"ashish.gautam.talentelgia@gmail.com"}],"homepage":"https://github.com/ashish_gautam/react-collapsible-sidebar#readme","bugs":{"url":"https://github.com/ashish_gautam/react-collapsible-sidebar/issues"},"dist":{"shasum":"b90bfefc253898eef963b0c70131d52e5db3a17d","tarball":"https://registry.npmjs.org/@ashish_gautam/react-collapsible-sidebar/-/react-collapsible-sidebar-1.0.0.tgz","fileCount":6,"integrity":"sha512-Fg/0eBi/wWuU2qbvsJaSRTsggCLuqEQNVXKB1541I1YmJtMBjic+hQrMvwVyp0UrK987MCBJdiOHUtwlFlsr5A==","signatures":[{"sig":"MEUCIEjYKk0j63YnaanfNFFViSFEzoagdAhQbYQBLaVm1D9qAiEAsM1yzMdzpLCEVflV60nu5qCXh9p/CSl21BZ3Q1Qz2V8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9696},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"build":"tsc","prepublishOnly":"npm run build"},"_npmUser":{"name":"ashish_gautam","email":"ashish.gautam.talentelgia@gmail.com"},"repository":{"url":"git+https://github.com/ashish_gautam/react-collapsible-sidebar.git","type":"git"},"_npmVersion":"10.9.2","description":"A collapsible sidebar component for React with TypeScript support","directories":{},"_nodeVersion":"22.14.0","dependencies":{"lucide-react":"^0.263.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.0.0","@types/node":"^20.0.0","@types/react":"^18.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-collapsible-sidebar_1.0.0_1759486843017_0.05896375752908578","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ashish_gautam/react-collapsible-sidebar","version":"1.0.1","description":"A collapsible sidebar component for React with TypeScript support","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"sideEffects":["dist/styles.css"],"scripts":{"build":"tsup","prepublishOnly":"npm run build"},"keywords":["react","sidebar","collapsible","navigation","component","typescript"],"author":{"name":"Ashish Gautam","email":"ashish.gautam.talentelgia@gmail.com"},"license":"MIT","peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"lucide-react":"^0.263.1"},"devDependencies":{"@types/react":"^18.0.0","react":"^18.0.0","react-dom":"^18.0.0","tsup":"^8.0.0","typescript":"^5.0.0"},"repository":{"type":"git","url":"git+https://github.com/ashish_gautam/react-collapsible-sidebar.git"},"bugs":{"url":"https://github.com/ashish_gautam/react-collapsible-sidebar/issues"},"homepage":"https://github.com/ashish_gautam/react-collapsible-sidebar#readme","_id":"@ashish_gautam/react-collapsible-sidebar@1.0.1","gitHead":"9306dd565301cdce7e294818f6f4e494b19152f8","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-dnP5NV3oFEYBVGLpJj5ZcPffktPNtq3ESTzqx0+z160Pg7hcPbWuQTxuwfGN3MYJZRezrK8qVq91TGBOVN0SPA==","shasum":"8ab1d9cab790d946d6ec06a67ad694f003366e01","tarball":"https://registry.npmjs.org/@ashish_gautam/react-collapsible-sidebar/-/react-collapsible-sidebar-1.0.1.tgz","fileCount":10,"unpackedSize":15477,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCcSiDUt3vtYEIRHWOzc21GlD9LjgAUq4b5P7+atpa9yQIgN0vuoMp4dSlNq4aJoKkcm3oooo34Bb+kYX5eEcU2Wog="}]},"_npmUser":{"name":"ashish_gautam","email":"ashish.gautam.talentelgia@gmail.com"},"directories":{},"maintainers":[{"name":"ashish_gautam","email":"ashish.gautam.talentelgia@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-collapsible-sidebar_1.0.1_1785155663268_0.6032899400125247"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-03T10:20:42.813Z","modified":"2026-07-27T12:34:23.614Z","1.0.0":"2025-10-03T10:20:43.240Z","1.0.1":"2026-07-27T12:34:23.453Z"},"bugs":{"url":"https://github.com/ashish_gautam/react-collapsible-sidebar/issues"},"author":{"name":"Ashish Gautam","email":"ashish.gautam.talentelgia@gmail.com"},"license":"MIT","homepage":"https://github.com/ashish_gautam/react-collapsible-sidebar#readme","keywords":["react","sidebar","collapsible","navigation","component","typescript"],"repository":{"type":"git","url":"git+https://github.com/ashish_gautam/react-collapsible-sidebar.git"},"description":"A collapsible sidebar component for React with TypeScript support","maintainers":[{"name":"ashish_gautam","email":"ashish.gautam.talentelgia@gmail.com"}],"readme":"NPM : https://www.npmjs.com/package/@ashish_gautam/react-collapsible-sidebar\n\n# React Collapsible Sidebar\n\nA beautiful, customizable collapsible sidebar component for React applications with TypeScript support. Ships with its own styles — no Tailwind required.\n\n## Features\n\n- Customizable styling via props\n- Responsive design — hidden on mobile, shown on `md:` breakpoint\n- Full TypeScript support with exported types\n- Smooth collapse/expand animations\n- Icon support via lucide-react\n- Badge support for navigation items\n- Smart tooltips when sidebar is collapsed\n- Accessible with proper ARIA attributes\n\n## Installation\n\n```bash\nnpm install @ashish_gautam/react-collapsible-sidebar lucide-react\n```\n\n`lucide-react` is required for icons.\n\n## Import\n\n```tsx\nimport { CollapsibleSidebar } from '@ashish_gautam/react-collapsible-sidebar';\nimport '@ashish_gautam/react-collapsible-sidebar/styles.css';\n```\n\nYou must import the CSS file for the component to render correctly.\n\n## Basic Usage\n\n```tsx\nimport React, { useState } from 'react';\nimport { CollapsibleSidebar } from '@ashish_gautam/react-collapsible-sidebar';\nimport '@ashish_gautam/react-collapsible-sidebar/styles.css';\nimport { Home, Settings, User, Package } from 'lucide-react';\n\nfunction App() {\n  const [currentPage, setCurrentPage] = useState(0);\n\n  const navItems = [\n    { label: 'Dashboard', icon: <Home size={20} />, index: 0 },\n    { label: 'Settings', icon: <Settings size={20} />, index: 1 },\n    { label: 'Profile', icon: <User size={20} />, index: 2, badge: 3 },\n    { label: 'Products', icon: <Package size={20} />, index: 3 },\n  ];\n\n  return (\n    <div className=\"flex min-h-screen\">\n      <CollapsibleSidebar\n        navItems={navItems}\n        currentPage={currentPage}\n        onPageChange={setCurrentPage}\n        logoText=\"My App\"\n      />\n      <main className=\"flex-1\">\n        {/* Your main content here */}\n      </main>\n    </div>\n  );\n}\n```\n\n## Advanced Usage with Custom Logo\n\n```tsx\nimport { Package2 } from 'lucide-react';\n\n<CollapsibleSidebar\n  navItems={navItems}\n  currentPage={currentPage}\n  onPageChange={setCurrentPage}\n  logo={<Package2 size={24} />}\n  logoText=\"Awesome App\"\n  defaultCollapsed={false}\n  activeButtonClassName=\"my-custom-active\"\n  inactiveButtonClassName=\"my-custom-inactive\"\n/>\n```\n\n## API Reference\n\n### Props\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `navItems` | `NavItem[]` | Yes | - | Array of navigation items to display |\n| `currentPage` | `number` | Yes | - | Index of the currently active page |\n| `onPageChange` | `(index: number) => void` | Yes | - | Callback fired when a nav item is clicked |\n| `logo` | `React.ReactNode` | No | - | Custom logo component to display |\n| `logoText` | `string` | No | `'App Name'` | Text to display next to the logo |\n| `defaultCollapsed` | `boolean` | No | `false` | Initial collapsed state of the sidebar |\n| `className` | `string` | No | `''` | Additional CSS classes for the sidebar container |\n| `buttonClassName` | `string` | No | `''` | Additional CSS classes for all nav buttons |\n| `activeButtonClassName` | `string` | No | (uses default active style) | CSS classes for the active nav button |\n| `inactiveButtonClassName` | `string` | No | (uses default inactive style) | CSS classes for inactive nav buttons |\n\n### Types\n\n#### NavItem\n\n```typescript\ninterface NavItem {\n  label: string;        // Display text for the nav item\n  icon: React.ReactNode; // Icon component (e.g., from lucide-react)\n  index: number;        // Unique index for the nav item\n  badge?: number;       // Optional badge count to display\n}\n```\n\n#### CollapsibleSidebarProps\n\nFull type definition is exported from the package for TypeScript users.\n\n## Styling\n\nThe component uses its own built-in styles via CSS classes prefixed with `rcs-`. No Tailwind CSS is required.\n\nYou can customize the appearance using the `className`, `activeButtonClassName`, and `inactiveButtonClassName` props with your own CSS classes, or globally override any `.rcs-*` class.\n\nThe included `styles.css` is small (~3KB minified) and scoped to the `rcs-` prefix so it won't conflict with your app styles.\n\n## Responsive Behavior\n\nThe sidebar is hidden on mobile devices (< 768px) by default using `display: none` with a `@media (min-width: 768px)` breakpoint. To make it visible on mobile, override with CSS:\n\n```css\n.rcs-sidebar {\n  display: flex;\n}\n```\n\nFor a better mobile experience, consider wrapping the sidebar in a drawer/sheet component.\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Support\n\nIf you encounter any issues or have questions, please file an issue on the [GitHub repository](https://github.com/ashish_gautam/react-collapsible-sidebar/issues).\n","readmeFilename":"README.md"}