{"_id":"@aravindvjn/react-sidebar","_rev":"8-03134a0c57e3de3e7004989d11f82a97","name":"@aravindvjn/react-sidebar","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"@aravindvjn/react-sidebar","version":"0.0.1","_id":"@aravindvjn/react-sidebar@0.0.1","maintainers":[{"name":"aravindvjn","email":"aravind284479@gmail.com"}],"dist":{"shasum":"fddc636e190b8e13e8cebd8eaae163026cb63641","tarball":"https://registry.npmjs.org/@aravindvjn/react-sidebar/-/react-sidebar-0.0.1.tgz","fileCount":7,"integrity":"sha512-u1FHHH7O8ReGw0p3yxEQNZEfUk588OXw4bL3NogBQAF4ejD22QWOWaGiLNuX23jRyY+ZsPLIyJHzI9C2ufZOuA==","signatures":[{"sig":"MEQCIFzcnXpY6wiQo8rixOTuHCW/46nSPuup4ftSpv+GUHZOAiBkfTkWNUeMk8zKgyk/5gdRWC8HMHWlyKmtk4wPt5U/Gg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83053},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"tsup"},"_npmUser":{"name":"aravindvjn","email":"aravind284479@gmail.com"},"_npmVersion":"11.9.0","directories":{},"_nodeVersion":"25.6.1","_hasShrinkwrap":false,"peerDependencies":{"react":">=18","motion":">=11","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-sidebar_0.0.1_1776612793751_0.663857274294418","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@aravindvjn/react-sidebar","version":"0.0.2","_id":"@aravindvjn/react-sidebar@0.0.2","maintainers":[{"name":"aravindvjn","email":"aravind284479@gmail.com"}],"dist":{"shasum":"8617e70a0a6d52da86d29ac383bdb81b9d283e94","tarball":"https://registry.npmjs.org/@aravindvjn/react-sidebar/-/react-sidebar-0.0.2.tgz","fileCount":8,"integrity":"sha512-lCCt8XFvqXtRaw0QLvKwAfW79jgxMI3ovn1Y/zvvNWGuPtfZsyr0wN95FR6PmjwoVtd5x2vU3eN6FTUrPDWE0Q==","signatures":[{"sig":"MEUCIBGpc6KfNB02WquA0Bsw43oKKRSTNdWvqrwceti1+DA9AiEAhPMTxw3t89KZ4h/DzOsyBqylX2iyuTpPJJeqpFeZ1oA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":87445},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"tsup"},"_npmUser":{"name":"aravindvjn","email":"aravind284479@gmail.com"},"_npmVersion":"11.9.0","description":"A flexible, responsive React Sidebar component built with Context API. Supports nested menus, hover expand, mobile drawer, and smooth animations without locking you into any router or styling system.","directories":{},"_nodeVersion":"25.6.1","_hasShrinkwrap":false,"peerDependencies":{"react":">=18","motion":">=11","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-sidebar_0.0.2_1776613478262_0.2471212459770118","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@aravindvjn/react-sidebar","version":"0.0.3","_id":"@aravindvjn/react-sidebar@0.0.3","maintainers":[{"name":"aravindvjn","email":"aravind284479@gmail.com"}],"dist":{"shasum":"87903c8cf9e50a4338ebf3ccd7d2972720b23b93","tarball":"https://registry.npmjs.org/@aravindvjn/react-sidebar/-/react-sidebar-0.0.3.tgz","fileCount":9,"integrity":"sha512-TljN1K59JZJIHvq2Jr58FlIDos3ugd4aljRHLdWYUeAt3sMpuaLzf6e1X3Z9iMO489i7pebYmdmcVlAD2Z2G4Q==","signatures":[{"sig":"MEUCIEFTh/rWnVa7BQzZs7btjbb/zmZBcYxsXtlWmT3pDZxgAiEAgq4Vhva2ZYEMy01DZonSkRot4rjmIdY8GOClbXyPzS0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89400},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup"},"_npmUser":{"name":"aravindvjn","email":"aravind284479@gmail.com"},"_npmVersion":"11.9.0","description":"A flexible, responsive React Sidebar component built with Context API. Supports nested menus, hover expand, mobile drawer, and smooth animations without locking you into any router or styling system.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.6.1","_hasShrinkwrap":false,"peerDependencies":{"react":">=18","motion":">=11","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-sidebar_0.0.3_1776614733223_0.4472765014359883","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@aravindvjn/react-sidebar","version":"0.0.4","_id":"@aravindvjn/react-sidebar@0.0.4","maintainers":[{"name":"aravindvjn","email":"aravind284479@gmail.com"}],"dist":{"shasum":"1a99ae946c30b856eb5eade9935f577a03af55b9","tarball":"https://registry.npmjs.org/@aravindvjn/react-sidebar/-/react-sidebar-0.0.4.tgz","fileCount":9,"integrity":"sha512-K+ZZDcPunHJwAYPTDKE2lD0VF3SfU4mr5r0KAJO7a73KutwEzsauJFziW/6VoVEil+Pcz6vWBu+4t95J9l+T1w==","signatures":[{"sig":"MEUCIQCbb/ccw6TRZ/vh0+tnws2srhf+Q0BgeqZVSgiKdEDr+AIgFZE2HsJTc0Xtf3bWMKoeGXVutduQc3+mXPjoSEpIOVI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":89350},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup"},"_npmUser":{"name":"aravindvjn","email":"aravind284479@gmail.com"},"_npmVersion":"11.9.0","description":"A flexible, responsive React Sidebar component built with Context API. Supports nested menus, hover expand, mobile drawer, and smooth animations without locking you into any router or styling system.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.6.1","_hasShrinkwrap":false,"peerDependencies":{"react":">=18","motion":">=11","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-sidebar_0.0.4_1776615132280_0.7949762627100443","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@aravindvjn/react-sidebar","version":"0.0.6","_id":"@aravindvjn/react-sidebar@0.0.6","maintainers":[{"name":"aravindvjn","email":"aravind284479@gmail.com"}],"dist":{"shasum":"bd0434bd17b3affa3afe26b3cb2fa71a3a8031df","tarball":"https://registry.npmjs.org/@aravindvjn/react-sidebar/-/react-sidebar-0.0.6.tgz","fileCount":8,"integrity":"sha512-rG9awkuj2RcCuGpX9Vuzbmya9ED7s/wfHw+MtjO50ctv4pE3znitAKldkPyOg/Sgr9i+Yb9bmfdngzm5AqFQRQ==","signatures":[{"sig":"MEYCIQC/jAhqJQjzfD2RK8y6Mz7GciGx98zwQgTKkAQt4GFc+AIhAK9IPlptvIDxJQjz3W7D/fh93no7v9luvnwJF6A/YPWv","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84876},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup"},"_npmUser":{"name":"aravindvjn","email":"aravind284479@gmail.com"},"_npmVersion":"11.9.0","description":"A flexible, responsive React Sidebar component built with Context API. Supports nested menus, hover expand, mobile drawer, and smooth animations without locking you into any router or styling system.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.6.1","_hasShrinkwrap":false,"peerDependencies":{"react":">=18","motion":">=11","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-sidebar_0.0.6_1776615620085_0.38357411114768825","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@aravindvjn/react-sidebar","version":"0.0.7","_id":"@aravindvjn/react-sidebar@0.0.7","maintainers":[{"name":"aravindvjn","email":"aravind284479@gmail.com"}],"dist":{"shasum":"3391417999e5888f6110aeafa173c36b26c31d0a","tarball":"https://registry.npmjs.org/@aravindvjn/react-sidebar/-/react-sidebar-0.0.7.tgz","fileCount":9,"integrity":"sha512-/sup5yjc+LeFeVI5dfAx4A0zdaCnpSb+KxNVDxNGnRMZu3IfY6ZvK5aCHOsbCiHv/y+A/xGWjSBCXKE2Qv9ylA==","signatures":[{"sig":"MEYCIQDETXFpXFkZSfjmHT0GykQdi62B8lzGzyPw/eZoJ8bGCgIhAJSxqX3PNCexshVDHGbJy4shp6o8sfr3ltVOG+P1FQZX","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":88017},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup && cp src/lib/sidebar/styles.css dist/styles.css"},"_npmUser":{"name":"aravindvjn","email":"aravind284479@gmail.com"},"_npmVersion":"11.9.0","description":"A flexible, responsive React Sidebar component built with Context API. Supports nested menus, hover expand, mobile drawer, and smooth animations without locking you into any router or styling system.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.6.1","_hasShrinkwrap":false,"peerDependencies":{"react":">=18","motion":">=11","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-sidebar_0.0.7_1776616152042_0.07569808096750563","host":"s3://npm-registry-packages-npm-production"}},"0.0.8":{"name":"@aravindvjn/react-sidebar","version":"0.0.8","_id":"@aravindvjn/react-sidebar@0.0.8","maintainers":[{"name":"aravindvjn","email":"aravind284479@gmail.com"}],"dist":{"shasum":"dd0d6f8d4e055d0a40d7d1108db58e93a70567e7","tarball":"https://registry.npmjs.org/@aravindvjn/react-sidebar/-/react-sidebar-0.0.8.tgz","fileCount":9,"integrity":"sha512-DRZXy/wthNAEU2RLaaIAjZLBonzvD1jtjahNbtvyq4k+w5H83Zb757+ZhBIAgoXaWQLqc2zIt5EYINIeG0cntw==","signatures":[{"sig":"MEUCIB3m2EPpkqM3zoURMiFaDn6BsKivFfVqMACyrxrEUxTeAiEAsE7vcnsoBv56ABkwbdUuX+RZF8obiJ0bIbRxzgggUSs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":88350},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsup && cp src/lib/sidebar/styles.css dist/styles.css"},"_npmUser":{"name":"aravindvjn","email":"aravind284479@gmail.com"},"_npmVersion":"11.9.0","description":"A flexible, responsive React sidebar component built with the Context API. Supports nested menus, hover expansion, mobile drawer behavior, and smooth animations, without being tied to any routing or styling library.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.6.1","_hasShrinkwrap":false,"peerDependencies":{"react":">=18","motion":">=11","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-sidebar_0.0.8_1776616313665_0.8523867370097493","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@aravindvjn/react-sidebar","version":"1.0.0","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"sideEffects":["./dist/styles.css"],"peerDependencies":{"react":">=18","react-dom":">=18","motion":">=11"},"scripts":{"build":"tsup && cp src/lib/sidebar/styles.css dist/styles.css"},"_id":"@aravindvjn/react-sidebar@1.0.0","description":"A flexible, responsive React sidebar component built with the Context API. Supports nested menus, hover expansion, mobile drawer behavior, and smooth animations, without being tied to any routing or styling library.","_nodeVersion":"25.6.1","_npmVersion":"11.9.0","dist":{"integrity":"sha512-YNAHaq/JsdeAeqIu6VI5EAluA/E/E11cCvB9b4xvDj3NGgppk8G5PCmvbPRG7GnmNgArOjKANf2nHgqCrqnn4A==","shasum":"ac5abeea659c459c54e0355fe78a93f6c29b6686","tarball":"https://registry.npmjs.org/@aravindvjn/react-sidebar/-/react-sidebar-1.0.0.tgz","fileCount":9,"unpackedSize":88350,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAshk206oiccXnpWqt17Q8ROhnKUzmfHHZHTbNIIFwQ4AiEAlHzfZNGTUouSfUXHtdFWZJIIxufxUEnrTsBiQ54+5Q8="}]},"_npmUser":{"name":"aravindvjn","email":"aravind284479@gmail.com"},"directories":{},"maintainers":[{"name":"aravindvjn","email":"aravind284479@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-sidebar_1.0.0_1776616371917_0.8654309114855716"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-19T15:33:13.638Z","modified":"2026-04-19T16:32:52.160Z","0.0.1":"2026-04-19T15:33:13.893Z","0.0.2":"2026-04-19T15:44:38.406Z","0.0.3":"2026-04-19T16:05:33.361Z","0.0.4":"2026-04-19T16:12:12.444Z","0.0.6":"2026-04-19T16:20:20.232Z","0.0.7":"2026-04-19T16:29:12.201Z","0.0.8":"2026-04-19T16:31:53.799Z","1.0.0":"2026-04-19T16:32:52.061Z"},"description":"A flexible, responsive React sidebar component built with the Context API. Supports nested menus, hover expansion, mobile drawer behavior, and smooth animations, without being tied to any routing or styling library.","maintainers":[{"name":"aravindvjn","email":"aravind284479@gmail.com"}],"readme":"# @aravindvjn/react-sidebar\n\nA flexible, responsive React sidebar component built with the Context API.\nSupports nested menus, hover expansion, mobile drawer behavior, and smooth animations, without being tied to any routing or styling library.\n\n---\n\n## Features\n\n* Lightweight and reusable\n* Built with React Context API\n* Works in both mobile and desktop layouts\n* Router agnostic (Next.js, React Router, etc.)\n* Smooth animations powered by Motion\n* Nested menu and submenu support\n* Fully customizable\n* Ships with default CSS (no Tailwind required)\n\n---\n\n## Installation\n\n```bash\nnpm install @aravindvjn/react-sidebar\n```\n\nor\n\n```bash\npnpm add @aravindvjn/react-sidebar\n```\n\n---\n\n## Peer Dependencies\n\n```bash\nnpm install react react-dom motion\n```\n\n---\n\n## Usage\n\n### 1. Import styles (required)\n\n```tsx\nimport \"@aravindvjn/react-sidebar/styles.css\";\n```\n\n### 2. Use components\n\n```tsx\nimport {\n  Sidebar,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@aravindvjn/react-sidebar\";\n\nimport { useState } from \"react\";\n\nconst items = [\n  {\n    id: \"dashboard\",\n    label: \"Dashboard\",\n    path: \"/dashboard\",\n  },\n  {\n    id: \"users\",\n    label: \"Users\",\n    children: [\n      {\n        id: \"all-users\",\n        label: \"All Users\",\n        path: \"/users\",\n      },\n      {\n        id: \"pending-users\",\n        label: \"Pending Users\",\n        path: \"/users/pending\",\n      },\n    ],\n  },\n];\n\nexport default function App() {\n  const [pathname, setPathname] = useState(\"/dashboard\");\n\n  return (\n    <SidebarProvider\n      items={items}\n      pathname={pathname}\n      onNavigate={(path) => setPathname(path)}\n    >\n      <div style={{ display: \"flex\", minHeight: \"100vh\" }}>\n        <Sidebar\n          renderHeader={\n            <div\n              style={{\n                padding: \"20px 16px\",\n                fontSize: 16,\n                fontWeight: 600,\n              }}\n            >\n              My App\n            </div>\n          }\n        />\n\n        <main style={{ flex: 1, padding: 24 }}>\n          <SidebarTrigger>\n            Toggle Sidebar\n          </SidebarTrigger>\n\n          <p style={{ marginTop: 16 }}>\n            Current path: {pathname}\n          </p>\n        </main>\n      </div>\n    </SidebarProvider>\n  );\n}\n```\n\n---\n\n## Menu Item Structure\n\n```ts\ntype SidebarItem = {\n  id: string;\n  label: string;\n  icon?: React.ReactNode;\n  path?: string;\n  children?: SidebarItem[];\n  disabled?: boolean;\n};\n```\n\n---\n\n## SidebarProvider Props\n\n| Prop              | Type                     | Description            |\n| ----------------- | ------------------------ | ---------------------- |\n| `items`           | `SidebarItem[]`          | Sidebar menu items     |\n| `pathname`        | `string`                 | Current active path    |\n| `onNavigate`      | `(path: string) => void` | Navigation handler     |\n| `defaultExpanded` | `boolean`                | Initial expanded state |\n| `defaultPinned`   | `boolean`                | Keep sidebar expanded  |\n| `collapseMode`    | `\"hover\" \\| \"toggle\"`    | Expansion behavior     |\n\n---\n\n## Sidebar Props\n\n| Prop             | Type              | Description             |\n| ---------------- | ----------------- | ----------------------- |\n| `className`      | `string`          | Custom container styles |\n| `renderHeader`   | `React.ReactNode` | Custom header content   |\n| `expandedWidth`  | `number`          | Width when expanded     |\n| `collapsedWidth` | `number`          | Width when collapsed    |\n\n---\n\n## Styling\n\nThis package ships with a default stylesheet.\n\nYou can override styles in two ways:\n\n### 1. Override className\n\n```tsx\n<Sidebar className=\"my-sidebar\" />\n```\n\n### 2. Override CSS variables\n\n```css\n:root {\n  --rv-sidebar-bg: #111827;\n  --rv-sidebar-active-bg: #22c55e;\n  --rv-sidebar-active-text: #04130a;\n}\n```\n\n---\n\n## Behavior\n\n* Hover to expand (when `collapseMode=\"hover\"`)\n* Click to toggle submenu\n* Automatically highlights active menu using `pathname`\n* Mobile drawer with overlay\n* Closes on navigation (mobile)\n\n---\n\n## Mobile Support\n\n* Automatic breakpoint detection\n* Slide-in sidebar\n* Background overlay\n* Click outside to close\n\n---\n\n## Animations\n\nAnimations are powered by Motion:\n\n* Sidebar expand/collapse\n* Submenu open/close\n* Mobile drawer transitions\n\n---\n\n## Advanced Usage\n\nAccess internal state using the hook:\n\n```tsx\nimport { useSidebar } from \"@aravindvjn/react-sidebar\";\n\nconst { isExpanded, isMobile } = useSidebar();\n```\n\n---\n\n## Versioning\n\n* `patch` → bug fixes\n* `minor` → new features\n* `major` → breaking changes\n\n---\n\n## Roadmap\n\n* Controlled state mode\n* Render prop support\n* Headless (unstyled) version\n* Improved accessibility\n\n---\n\n## License\n\nMIT\n\n---\n\n## Author\n\nAravind Vijayan\n","readmeFilename":"README.md"}