{"_id":"@dcdavidev/vanilla-sidenav","name":"@dcdavidev/vanilla-sidenav","dist-tags":{"latest":"3.2.0"},"versions":{"3.2.0":{"name":"@dcdavidev/vanilla-sidenav","version":"3.2.0","description":"A simple side nav","keywords":["sidenav","simple sidenav","simple-sidenav","simpler-sidenav"],"homepage":"https://github.com/dcdavidev/sidenav","bugs":{"url":"https://github.com/dcdavidev/sidenav/issues"},"repository":{"type":"git","url":"git+https://github.com/dcdavidev/sidenav.git"},"license":"MIT","author":{"name":"Davide Di Criscito"},"type":"module","exports":{".":{"types":"./dist/index.d.cts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.cts","devDependencies":{"@dcdavidev/tsconfig":"latest","tsdown":"latest"},"scripts":{"prebuild":"rm -rf dist","build":"tsdown","dev":"tsdown --watch"},"_id":"@dcdavidev/vanilla-sidenav@3.2.0","_integrity":"sha512-1KWTna10HkmwrSnZgot33tq9/LTnewUm64rZ7SqO3razu+vNmLFdhbaxRccFWCA3rThInTh1frmAT8k3lW8ktg==","_resolved":"/tmp/6e2574f2c8e08b476eb1a4914669ab7f/dcdavidev-vanilla-sidenav-3.2.0.tgz","_from":"file:dcdavidev-vanilla-sidenav-3.2.0.tgz","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-1KWTna10HkmwrSnZgot33tq9/LTnewUm64rZ7SqO3razu+vNmLFdhbaxRccFWCA3rThInTh1frmAT8k3lW8ktg==","shasum":"7b564461193cc86d8d6fdd768a5c93f6dd5cb646","tarball":"https://registry.npmjs.org/@dcdavidev/vanilla-sidenav/-/vanilla-sidenav-3.2.0.tgz","fileCount":7,"unpackedSize":16253,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA3DlW/17CNsSL2drLw+T3LkPMJH1XAwxv2/+FEp+s66AiEA+8oRpfNKA+SJgBokZFQmaEIUZkB6PRphT0nGD+ZhCkA="}]},"_npmUser":{"name":"dcdavidev","email":"dcdavidev@outlook.com"},"directories":{},"maintainers":[{"name":"dcdavidev","email":"dcdavidev@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vanilla-sidenav_3.2.0_1771869238053_0.6529412129988126"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-23T17:53:57.979Z","3.2.0":"2026-02-23T17:53:58.204Z","modified":"2026-02-23T17:53:58.406Z"},"maintainers":[{"name":"dcdavidev","email":"dcdavidev@outlook.com"}],"description":"A simple side nav","homepage":"https://github.com/dcdavidev/sidenav","keywords":["sidenav","simple sidenav","simple-sidenav","simpler-sidenav"],"repository":{"type":"git","url":"git+https://github.com/dcdavidev/sidenav.git"},"author":{"name":"Davide Di Criscito"},"bugs":{"url":"https://github.com/dcdavidev/sidenav/issues"},"license":"MIT","readme":"# @dcdavidev/vanilla-sidenav\n\nA lightweight, high-performance side navigation library written in **pure vanilla JavaScript**. With zero dependencies, it provides a smooth, native-like mobile sidebar experience while maintaining a tiny footprint.\n\n## Features\n\n- 🚀 **Zero Dependencies**: Pure JavaScript, no jQuery or other libraries required.\n- ⚡ **High Performance**: Optimized animations using CSS3 transitions.\n- 🧊 **Page Freezing**: Automatically prevents background scrolling when the menu is active.\n- 🎭 **Smart Masking**: Generates a clickable background overlay to dim the page content.\n- ⌨️ **TypeScript First**: Written in TypeScript with full type definitions included.\n\n## Installation\n\n```shell\n# pnpm\npnpm add @dcdavidev/vanilla-sidenav\n\n# npm\nnpm install @dcdavidev/vanilla-sidenav\n\n# yarn\nyarn add @dcdavidev/vanilla-sidenav\n```\n\n## Quick Start\n\n### 1. HTML Structure\n\nYour template requires a trigger element and the sidenav container.\n\n```html\n<!-- Trigger -->\n<header>\n  <button id=\"toggle-sidenav\">Open Menu</button>\n</header>\n\n<!-- Sidenav -->\n<nav id=\"sidenav\">\n  <div class=\"sidenav-wrapper\">\n    <button class=\"quit-sidenav\">Close</button>\n    <ul>\n      <li><a href=\"#\">Home</a></li>\n      <li><a href=\"#\">Products</a></li>\n      <li><a href=\"#\">Services</a></li>\n      <li><a href=\"#\">Contact</a></li>\n    </ul>\n  </div>\n</nav>\n```\n\n### 2. Basic Initialization\n\nImport the class and initialize it with your selectors:\n\n```javascript\nimport { Sidenav } from '@dcdavidev/vanilla-sidenav';\n\nconst sidenav = new Sidenav({\n  selector: '#sidenav',\n  triggerer: '#toggle-sidenav',\n  quitter: '.quit-sidenav'\n});\n```\n\n## Advanced Usage\n\n### Handling Content Overflow\n\nFor long menus that require scrolling, add the following CSS to your wrapper element:\n\n```css\n#sidenav .sidenav-wrapper {\n  height: 100%;\n  overflow-y: auto;\n}\n```\n\n### Manual Control\n\nYou can also control the sidenav programmatically:\n\n```javascript\nconst sidenav = new Sidenav({ ... });\n\n// Open the menu\nsidenav.open();\n\n// Close the menu\nsidenav.close();\n```\n\n## Options\n\n| Option | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `selector` | `string` | `'#sidenav'` | The CSS selector for your sidenav container. |\n| `triggerer` | `string` | **Required** | The CSS selector for the element that toggles the menu. |\n| `quitter` | `string` | **Required** | Selector for elements inside the menu that close it when clicked. |\n| `align` | `'left' \\| 'right'` | `'left'` | Which side the sidenav should appear on. |\n| `width` | `string` | `'300px'` | The width of the sidenav (with unit). |\n| `gap` | `number` | `56` | Minimum distance from the screen edge on small screens (in pixels). |\n| `top` | `string` | `'56px'` | The top offset of the sidenav. |\n| `opened` | `boolean` | `false` | Whether the sidenav starts open. |\n| `mask` | `boolean` | `true` | Enable/disable the background mask. |\n| `easing` | `string` | `'ease-in-out'` | CSS transition timing function. |\n| `zIndex` | `number` | `3000` | The z-index of the sidenav element. |\n\n## License\n\nMIT © [Davide Di Criscito](https://github.com/dcdavidev)\n","readmeFilename":"README.md","_rev":"1-3b6202c5b75633dbca40688503a0c274"}