Wappler Responsive Sidebar

A complete responsive sidebar layout component extension for Wappler with header, collapsible navigation, and main content area.

Features

- ✅ Fully Responsive - Desktop sidebar, mobile offcanvas
- 🎨 Easy Customization - Edit CSS file directly for styling
- 📱 Mobile-First - Bootstrap 5 offcanvas on mobile devices
- 🔧 Easy to Use - Slot-based architecture for flexible content
- 🎯 App Connect Integration - Dynamic data binding support
- ⚡ Lightweight - Minimal JavaScript footprint

Installation

$3

1. Open your Project Settings in Wappler
2. Navigate to the Extensions section
3. Click on Add Extension
4. Use the Extension Browser dialog to browse or search for @benpley/wappler-responsive-sidebar
5. Click the Add button to add the extension to your project

$3

You can also install directly via npm:

``bash
npm install @benpley/wappler-responsive-sidebar
`

Then add the extension through Wappler's Extension Manager.

$3

1. Download the extension files
2. Copy the wappler-responsive-sidebar folder to your Wappler extensions directory:
- Windows: C:\\Users\\[YourUsername]\\AppData\\Local\\Wappler\\extensions\\
- macOS: ~/Library/Application Support/Wappler/extensions/
- Linux: ~/.config/Wappler/extensions/
3. Restart Wappler

Usage

$3

1. Open your Wappler project
2. Add the Responsive Sidebar component from the Layout category in the App Connect panel
3. Customize the slots with your content
4. Modify css/responsive-sidebar.css in your project's public folder to customize styling

$3

The sidebar component uses slots for maximum flexibility:

`html
brand-text="My App"
brand-url="/"
sidebar-title="Navigation">


















`

$3

| Slot | Description | Required |
|------|-------------|----------|
| brand | Logo or brand content in header | Optional |
| header-right | Right side of header (buttons, user menu, etc.) | Optional |
| menu | Sidebar navigation menu | Required |
| footer | Sidebar footer content | Optional |
| main | Main page content area | Required |

Properties

$3

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| id | string | - | Unique component identifier (required) |
| brand-text | string | 'Brand' | Brand text displayed in header |
| brand-url | string | '/' | URL for brand link |
| sidebar-title | string | 'Navigation' | Title shown in mobile offcanvas |

$3

All properties support App Connect data binding:

`html
dmx-bind:brand-text="appData.brandName"
dmx-bind:brand-url="appData.homeUrl">
`

Actions

The component provides the following actions for dynamic updates:

$3

Dynamically change the brand text:

`javascript
sidebar1.setBrandText('New Brand Name');
`

$3

Dynamically change the brand URL:

`javascript
sidebar1.setBrandUrl('/new-home');
`

$3

Dynamically change the sidebar title (mobile view):

`javascript
sidebar1.setSidebarTitle('Menu');
`

Events

| Event | Description |
|-------|-------------|
| rendered | Fired when the sidebar is initially rendered |
| updated | Fired when the sidebar is updated |

$3

`html
dmx-on:rendered="console.log('Sidebar rendered')"
dmx-on:updated="refreshData()">
`

Styling

$3

All styling is controlled through the css/responsive-sidebar.css file in your project's public folder. Simply edit this file to customize:

- Header colors and shadows
- Sidebar colors and width
- Menu item styling and hover effects
- Responsive breakpoints
- Dark mode support

Example customizations:

`css
/ Change header background color /
.bd-navbar {
background-color: #2c3e50 !important;
color: white;
}

/ Change sidebar background /
.bd-sidebar,
.bd-sidebar .offcanvas-lg,
.bd-sidebar .offcanvas-body {
background-color: #34495e !important;
}

/ Customize menu links /
.bd-links a {
color: #ecf0f1;
border-radius: 0.25rem;
}

.bd-links a:hover {
background-color: rgba(255, 255, 255, 0.1);
}

/ Remove header shadow /
.bd-navbar {
box-shadow: none;
}

/ Adjust sidebar width /
@media (min-width: 992px) {
.bd-sidebar {
min-width: 16rem;
max-width: 24rem;
}
}
`

$3

| Class | Description |
|-------|-------------|
| .bd-navbar | Header navbar |
| .bd-sidebar | Sidebar container |
| .bd-links | Sidebar navigation area |
| .bd-main | Main content area |
| .bd-layout | Grid layout container |

Examples

$3

`html
brand-text="Dashboard"
brand-url="/dashboard">


Welcome to Dashboard

`

$3

`html



`

$3

`html
dmx-bind:brand-text="appConfig.name">


<%- await include(content, locals); %>

`

Requirements

- Wappler 4.0 or higher
- Bootstrap 5 (included in most Wappler projects)
- Node.js 12.0.0 or higher (for npm installation)

Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

Troubleshooting

$3

- Ensure Bootstrap 5 is included in your project
- Check that the component ID is unique
- Verify that all required slots are present

$3

- Ensure Bootstrap 5 JavaScript is loaded
- Check browser console for JavaScript errors

$3

- Check css/responsive-sidebar.css` in your project's public folder
- Make sure Bootstrap 5 CSS is loaded before the component CSS
- Use browser DevTools to inspect CSS specificity conflicts

License

MIT License - see LICENSE.md for details

Copyright (c) 2025 Ben Pleysier

Support

For issues or questions:
- Check the troubleshooting section above
- Visit the Wappler Community Forum

Changelog

$3

- Added Bootstrap 5 Navigation component integration for automatic active link highlighting
- Enhanced components.hjson to include dmxBootstrap5Navigation.js dependency

$3

- Added active navigation link styling (.active class support) to CSS

$3

- Initial release
- Responsive sidebar with Bootstrap 5
- Slot-based architecture
- App Connect integration
- Dynamic property binding
- External CSS file for easy customization

---

Made with ❤️ for the Wappler Community