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

Via Wappler Extension Manager (Recommended)

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

Via NPM

You can also install directly via npm:

npm install @benpley/wappler-responsive-sidebar

Then add the extension through Wappler's Extension Manager.

Manual Installation

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

Basic Setup

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

Component Structure

The sidebar component uses slots for maximum flexibility:

<responsive-sidebar id="sidebar1" 
                   brand-text="My App" 
                   brand-url="/" 
                   sidebar-title="Navigation">
  
  <!-- Brand Logo/Content (optional) -->
  <div slot="brand">
    <img src="/logo.png" alt="Logo">
  </div>

  <!-- Header Right Content (optional) -->
  <div slot="header-right">
    <button class="btn btn-primary">Login</button>
  </div>

  <!-- Sidebar Menu -->
  <div slot="menu">
    <ul class="list-unstyled">
      <li><a href="/" class="d-block p-2">Dashboard</a></li>
      <li><a href="/products" class="d-block p-2">Products</a></li>
    </ul>
  </div>

  <!-- Sidebar Footer (optional) -->
  <div slot="footer">
    © 2025 My Company
  </div>

  <!-- Main Content Area -->
  <div slot="main">
    <!-- Your page content here -->
  </div>
</responsive-sidebar>

Available Slots

| 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

Component Attributes

| 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 |

Dynamic Bindings

All properties support App Connect data binding:

<responsive-sidebar id="sidebar1" 
                   dmx-bind:brand-text="appData.brandName"
                   dmx-bind:brand-url="appData.homeUrl">

Actions

The component provides the following actions for dynamic updates:

setBrandText(text)

Dynamically change the brand text:

sidebar1.setBrandText('New Brand Name');

setBrandUrl(url)

Dynamically change the brand URL:

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

setSidebarTitle(title)

Dynamically change the sidebar title (mobile view):

sidebar1.setSidebarTitle('Menu');

Events

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

Event Usage

<responsive-sidebar id="sidebar1" 
                   dmx-on:rendered="console.log('Sidebar rendered')"
                   dmx-on:updated="refreshData()">

Styling

Custom CSS

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:

/* 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;
  }
}

CSS Class Reference

| 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

Example 1: Simple Dashboard Layout

<responsive-sidebar id="dashboard_sidebar" 
                   brand-text="Dashboard" 
                   brand-url="/dashboard">
  <div slot="menu">
    <ul class="list-unstyled">
      <li><a href="/dashboard" class="d-block p-2">Home</a></li>
      <li><a href="/analytics" class="d-block p-2">Analytics</a></li>
      <li><a href="/settings" class="d-block p-2">Settings</a></li>
    </ul>
  </div>
  
  <div slot="main">
    <h1>Welcome to Dashboard</h1>
  </div>
</responsive-sidebar>

Example 2: With User Menu

<responsive-sidebar id="app_sidebar" brand-text="My App">
  <div slot="header-right">
    <div class="dropdown">
      <button class="btn btn-link" data-bs-toggle="dropdown">
        <i class="fas fa-user"></i>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="/profile">Profile</a></li>
        <li><a class="dropdown-item" href="/logout">Logout</a></li>
      </ul>
    </div>
  </div>
  
  <div slot="menu">
    <!-- Navigation items -->
  </div>
  
  <div slot="main">
    <!-- Content -->
  </div>
</responsive-sidebar>

Example 3: Dynamic Menu with App Connect

<responsive-sidebar id="dynamic_sidebar" 
                   dmx-bind:brand-text="appConfig.name">
  <div slot="menu">
    <ul class="list-unstyled" is="dmx-repeat" dmx-bind:repeat="menuItems.data">
      <li>
        <a dmx-bind:href="url" class="d-block p-2">
          <i dmx-bind:class="icon"></i>
          {{title}}
        </a>
      </li>
    </ul>
  </div>
  
  <div slot="main">
    <%- await include(content, locals); %>
  </div>
</responsive-sidebar>

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

Sidebar not appearing

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

Mobile menu not working

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

Styling issues

• 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

Version 1.0.2

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

Version 1.0.1

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

Version 1.0.0

• 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