{"_id":"@benpley/wappler-responsive-sidebar","_rev":"3-b9c7b960d34e6f3a1b26827c9090d7dc","name":"@benpley/wappler-responsive-sidebar","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@benpley/wappler-responsive-sidebar","version":"1.0.0","keywords":["wappler-extension","appconnect","wappler","sidebar","responsive","navigation","component"],"author":{"name":"Ben Pleysier"},"license":"MIT","_id":"@benpley/wappler-responsive-sidebar@1.0.0","maintainers":[{"name":"benpley","email":"ben@pleysier.com.au"}],"dist":{"shasum":"016694073a35faf397f620c7f692f487170beb6d","tarball":"https://registry.npmjs.org/@benpley/wappler-responsive-sidebar/-/wappler-responsive-sidebar-1.0.0.tgz","fileCount":6,"integrity":"sha512-qUxAQxVaoessDtZ7A9SEPAGMqjGb2Lts2uSX95C8AqNjghwKEaGMmo6pZ0BO7F3bbWBZzEIWH8m7a/9R1FohSw==","signatures":[{"sig":"MEUCIQC5LDq3HmoUgknEMgUn5VGDkalamoTqz1pA970jAJDrCwIgapP6LW1esz4JDkI0PR+CEyiS5snsi6pw/JPgcckwue0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32189},"engines":{"node":">=12.0.0"},"_npmUser":{"name":"benpley","email":"ben@pleysier.com.au"},"_npmVersion":"10.9.3","description":"A responsive sidebar component extension for Wappler","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/wappler-responsive-sidebar_1.0.0_1768571321438_0.4061980899913107","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@benpley/wappler-responsive-sidebar","version":"1.0.1","keywords":["wappler-extension","appconnect","wappler","sidebar","responsive","navigation","component"],"author":{"name":"Ben Pleysier"},"license":"MIT","_id":"@benpley/wappler-responsive-sidebar@1.0.1","maintainers":[{"name":"benpley","email":"ben@pleysier.com.au"}],"dist":{"shasum":"fc3541f90dc72b9525c3b318865284753f56189d","tarball":"https://registry.npmjs.org/@benpley/wappler-responsive-sidebar/-/wappler-responsive-sidebar-1.0.1.tgz","fileCount":6,"integrity":"sha512-Ml1WTAr0ZtXCtyIu6RpcOT6tNOwChPsDyflrsd6BYB4SBxSe9IOp+s1kTJLBeNHctSRJes5UW+1xnEdIUko8Eg==","signatures":[{"sig":"MEUCIQDTSPDUKLvqr6hizNych5yR9ewAvp7V985nRII3DrJOPAIgBGGTHdGFYTLpKvfTLQUyQH0mO77K6YUqpDqovBSy3qc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33775},"engines":{"node":">=12.0.0"},"_npmUser":{"name":"benpley","email":"ben@pleysier.com.au"},"_npmVersion":"10.9.3","description":"A responsive sidebar component extension for Wappler","directories":{},"_nodeVersion":"22.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/wappler-responsive-sidebar_1.0.1_1768799915036_0.5908370972245129","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@benpley/wappler-responsive-sidebar","version":"1.0.2","description":"A responsive sidebar component extension for Wappler","author":{"name":"Ben Pleysier"},"license":"MIT","keywords":["wappler-extension","appconnect","wappler","sidebar","responsive","navigation","component"],"engines":{"node":">=12.0.0"},"publishConfig":{"access":"public"},"_id":"@benpley/wappler-responsive-sidebar@1.0.2","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-11ClOl6JjlLruvG65lzQxAiqRy7GoMUjN659JOkX+0CV4kS1ewplGJ3cjM799kqLP+XkgHB5PVYRCCRzt2yeUg==","shasum":"786bd27fef68a48aa966508bfb458ff6f5e62283","tarball":"https://registry.npmjs.org/@benpley/wappler-responsive-sidebar/-/wappler-responsive-sidebar-1.0.2.tgz","fileCount":6,"unpackedSize":34078,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIH7hiGYFeUR358R4mdZIh3nLu4PJ3w0cRSXw21nNeAicAiABf7nvVnTj/tgjyP966ggyoJ18mbWRZ1XT5hx56VrFbw=="}]},"_npmUser":{"name":"benpley","email":"ben@pleysier.com.au"},"directories":{},"maintainers":[{"name":"benpley","email":"ben@pleysier.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/wappler-responsive-sidebar_1.0.2_1768815507307_0.7368081821348276"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-16T13:48:41.356Z","modified":"2026-01-19T09:38:27.561Z","1.0.0":"2026-01-16T13:48:41.600Z","1.0.1":"2026-01-19T05:18:35.188Z","1.0.2":"2026-01-19T09:38:27.449Z"},"author":{"name":"Ben Pleysier"},"license":"MIT","keywords":["wappler-extension","appconnect","wappler","sidebar","responsive","navigation","component"],"description":"A responsive sidebar component extension for Wappler","maintainers":[{"name":"benpley","email":"ben@pleysier.com.au"}],"readme":"# Wappler Responsive Sidebar\n\nA complete responsive sidebar layout component extension for Wappler with header, collapsible navigation, and main content area.\n\n## Features\n\n- ✅ **Fully Responsive** - Desktop sidebar, mobile offcanvas\n- 🎨 **Easy Customization** - Edit CSS file directly for styling\n- 📱 **Mobile-First** - Bootstrap 5 offcanvas on mobile devices\n- 🔧 **Easy to Use** - Slot-based architecture for flexible content\n- 🎯 **App Connect Integration** - Dynamic data binding support\n- ⚡ **Lightweight** - Minimal JavaScript footprint\n\n## Installation\n\n### Via Wappler Extension Manager (Recommended)\n\n1. Open your **Project Settings** in Wappler\n2. Navigate to the **Extensions** section\n3. Click on **Add Extension**\n4. Use the **Extension Browser** dialog to browse or search for `@benpley/wappler-responsive-sidebar`\n5. Click the **Add** button to add the extension to your project\n\n### Via NPM\n\nYou can also install directly via npm:\n\n```bash\nnpm install @benpley/wappler-responsive-sidebar\n```\n\nThen add the extension through Wappler's Extension Manager.\n\n### Manual Installation\n\n1. Download the extension files\n2. Copy the `wappler-responsive-sidebar` folder to your Wappler extensions directory:\n   - **Windows**: `C:\\\\Users\\\\[YourUsername]\\\\AppData\\\\Local\\\\Wappler\\\\extensions\\\\`\n   - **macOS**: `~/Library/Application Support/Wappler/extensions/`\n   - **Linux**: `~/.config/Wappler/extensions/`\n3. Restart Wappler\n\n## Usage\n\n### Basic Setup\n\n1. Open your Wappler project\n2. Add the Responsive Sidebar component from the **Layout** category in the App Connect panel\n3. Customize the slots with your content\n4. Modify `css/responsive-sidebar.css` in your project's public folder to customize styling\n\n### Component Structure\n\nThe sidebar component uses slots for maximum flexibility:\n\n```html\n<responsive-sidebar id=\"sidebar1\" \n                   brand-text=\"My App\" \n                   brand-url=\"/\" \n                   sidebar-title=\"Navigation\">\n  \n  <!-- Brand Logo/Content (optional) -->\n  <div slot=\"brand\">\n    <img src=\"/logo.png\" alt=\"Logo\">\n  </div>\n\n  <!-- Header Right Content (optional) -->\n  <div slot=\"header-right\">\n    <button class=\"btn btn-primary\">Login</button>\n  </div>\n\n  <!-- Sidebar Menu -->\n  <div slot=\"menu\">\n    <ul class=\"list-unstyled\">\n      <li><a href=\"/\" class=\"d-block p-2\">Dashboard</a></li>\n      <li><a href=\"/products\" class=\"d-block p-2\">Products</a></li>\n    </ul>\n  </div>\n\n  <!-- Sidebar Footer (optional) -->\n  <div slot=\"footer\">\n    © 2025 My Company\n  </div>\n\n  <!-- Main Content Area -->\n  <div slot=\"main\">\n    <!-- Your page content here -->\n  </div>\n</responsive-sidebar>\n```\n\n### Available Slots\n\n| Slot | Description | Required |\n|------|-------------|----------|\n| `brand` | Logo or brand content in header | Optional |\n| `header-right` | Right side of header (buttons, user menu, etc.) | Optional |\n| `menu` | Sidebar navigation menu | Required |\n| `footer` | Sidebar footer content | Optional |\n| `main` | Main page content area | Required |\n\n## Properties\n\n### Component Attributes\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `id` | string | - | Unique component identifier (required) |\n| `brand-text` | string | 'Brand' | Brand text displayed in header |\n| `brand-url` | string | '/' | URL for brand link |\n| `sidebar-title` | string | 'Navigation' | Title shown in mobile offcanvas |\n\n### Dynamic Bindings\n\nAll properties support App Connect data binding:\n\n```html\n<responsive-sidebar id=\"sidebar1\" \n                   dmx-bind:brand-text=\"appData.brandName\"\n                   dmx-bind:brand-url=\"appData.homeUrl\">\n```\n\n## Actions\n\nThe component provides the following actions for dynamic updates:\n\n### setBrandText(text)\n\nDynamically change the brand text:\n\n```javascript\nsidebar1.setBrandText('New Brand Name');\n```\n\n### setBrandUrl(url)\n\nDynamically change the brand URL:\n\n```javascript\nsidebar1.setBrandUrl('/new-home');\n```\n\n### setSidebarTitle(title)\n\nDynamically change the sidebar title (mobile view):\n\n```javascript\nsidebar1.setSidebarTitle('Menu');\n```\n\n## Events\n\n| Event | Description |\n|-------|-------------|\n| `rendered` | Fired when the sidebar is initially rendered |\n| `updated` | Fired when the sidebar is updated |\n\n### Event Usage\n\n```html\n<responsive-sidebar id=\"sidebar1\" \n                   dmx-on:rendered=\"console.log('Sidebar rendered')\"\n                   dmx-on:updated=\"refreshData()\">\n```\n\n## Styling\n\n### Custom CSS\n\nAll styling is controlled through the `css/responsive-sidebar.css` file in your project's public folder. Simply edit this file to customize:\n\n- Header colors and shadows\n- Sidebar colors and width\n- Menu item styling and hover effects\n- Responsive breakpoints\n- Dark mode support\n\n**Example customizations:**\n\n```css\n/* Change header background color */\n.bd-navbar {\n  background-color: #2c3e50 !important;\n  color: white;\n}\n\n/* Change sidebar background */\n.bd-sidebar,\n.bd-sidebar .offcanvas-lg,\n.bd-sidebar .offcanvas-body {\n  background-color: #34495e !important;\n}\n\n/* Customize menu links */\n.bd-links a {\n  color: #ecf0f1;\n  border-radius: 0.25rem;\n}\n\n.bd-links a:hover {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\n/* Remove header shadow */\n.bd-navbar {\n  box-shadow: none;\n}\n\n/* Adjust sidebar width */\n@media (min-width: 992px) {\n  .bd-sidebar {\n    min-width: 16rem;\n    max-width: 24rem;\n  }\n}\n```\n\n### CSS Class Reference\n\n| Class | Description |\n|-------|-------------|\n| `.bd-navbar` | Header navbar |\n| `.bd-sidebar` | Sidebar container |\n| `.bd-links` | Sidebar navigation area |\n| `.bd-main` | Main content area |\n| `.bd-layout` | Grid layout container |\n\n## Examples\n\n### Example 1: Simple Dashboard Layout\n\n```html\n<responsive-sidebar id=\"dashboard_sidebar\" \n                   brand-text=\"Dashboard\" \n                   brand-url=\"/dashboard\">\n  <div slot=\"menu\">\n    <ul class=\"list-unstyled\">\n      <li><a href=\"/dashboard\" class=\"d-block p-2\">Home</a></li>\n      <li><a href=\"/analytics\" class=\"d-block p-2\">Analytics</a></li>\n      <li><a href=\"/settings\" class=\"d-block p-2\">Settings</a></li>\n    </ul>\n  </div>\n  \n  <div slot=\"main\">\n    <h1>Welcome to Dashboard</h1>\n  </div>\n</responsive-sidebar>\n```\n\n### Example 2: With User Menu\n\n```html\n<responsive-sidebar id=\"app_sidebar\" brand-text=\"My App\">\n  <div slot=\"header-right\">\n    <div class=\"dropdown\">\n      <button class=\"btn btn-link\" data-bs-toggle=\"dropdown\">\n        <i class=\"fas fa-user\"></i>\n      </button>\n      <ul class=\"dropdown-menu\">\n        <li><a class=\"dropdown-item\" href=\"/profile\">Profile</a></li>\n        <li><a class=\"dropdown-item\" href=\"/logout\">Logout</a></li>\n      </ul>\n    </div>\n  </div>\n  \n  <div slot=\"menu\">\n    <!-- Navigation items -->\n  </div>\n  \n  <div slot=\"main\">\n    <!-- Content -->\n  </div>\n</responsive-sidebar>\n```\n\n### Example 3: Dynamic Menu with App Connect\n\n```html\n<responsive-sidebar id=\"dynamic_sidebar\" \n                   dmx-bind:brand-text=\"appConfig.name\">\n  <div slot=\"menu\">\n    <ul class=\"list-unstyled\" is=\"dmx-repeat\" dmx-bind:repeat=\"menuItems.data\">\n      <li>\n        <a dmx-bind:href=\"url\" class=\"d-block p-2\">\n          <i dmx-bind:class=\"icon\"></i>\n          {{title}}\n        </a>\n      </li>\n    </ul>\n  </div>\n  \n  <div slot=\"main\">\n    <%- await include(content, locals); %>\n  </div>\n</responsive-sidebar>\n```\n\n## Requirements\n\n- **Wappler** 4.0 or higher\n- **Bootstrap 5** (included in most Wappler projects)\n- **Node.js** 12.0.0 or higher (for npm installation)\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Mobile browsers (iOS Safari, Chrome Mobile)\n\n## Troubleshooting\n\n### Sidebar not appearing\n- Ensure Bootstrap 5 is included in your project\n- Check that the component ID is unique\n- Verify that all required slots are present\n\n### Mobile menu not working\n- Ensure Bootstrap 5 JavaScript is loaded\n- Check browser console for JavaScript errors\n\n### Styling issues\n- Check `css/responsive-sidebar.css` in your project's public folder\n- Make sure Bootstrap 5 CSS is loaded before the component CSS\n- Use browser DevTools to inspect CSS specificity conflicts\n\n## License\n\nMIT License - see [LICENSE.md](LICENSE.md) for details\n\nCopyright (c) 2025 Ben Pleysier\n\n## Support\n\nFor issues or questions:\n- Check the troubleshooting section above\n- Visit the [Wappler Community Forum](https://community.wappler.io)\n\n## Changelog\n\n### Version 1.0.2\n- Added Bootstrap 5 Navigation component integration for automatic active link highlighting\n- Enhanced components.hjson to include dmxBootstrap5Navigation.js dependency\n\n### Version 1.0.1\n- Added active navigation link styling (.active class support) to CSS\n\n### Version 1.0.0\n- Initial release\n- Responsive sidebar with Bootstrap 5\n- Slot-based architecture\n- App Connect integration\n- Dynamic property binding\n- External CSS file for easy customization\n\n---\n\n**Made with ❤️ for the Wappler Community**\n","readmeFilename":"README.md"}