Sidebar

Flexiwind provides a flexible sidebar system that can be customized to fit various design needs. While sidebars may look different, they share common logic for toggling and resizing functionality.

The sidebar system uses AlpineJS for interactivity and provides a global setup that works with any sidebar implementation.

When to Use

• Use sidebars for app-level navigation and persistent contextual actions.
• Prefer collapsible behavior in dense dashboard interfaces.
• Keep primary navigation predictable across resized/open states.

Installation

To use sidebars in your application, run the installation command:

php artisan flexi:add sidebar-wrapper

What this command installs:

• Sidebar plugin file: resources/js/sidebar-plugin.js
• Sidebar wrapper component: resources/views/components/ui/sidebar-wrapper.blade.php

Manual setup required:

After running the CLI command, you need to manually import the sidebar plugin in your application's JavaScript file (typically app.js ):

// Import sidebar plugin
import "./sidebar-plugin.js";

// Your other app.js imports and initialization code
// ...

This manual import ensures the sidebar plugin is properly initialized when AlpineJS loads in your application.

Global Setup

The sidebar functionality is handled through an AlpineJS plugin that provides toggle and resize capabilities for all sidebars.

AlpineJS Plugin

The sidebar plugin is automatically initialized when AlpineJS loads. It provides two main directives:

Plugin Features

• Automatic toggle functionality for opening/closing sidebars
• Resize functionality for collapsing/expanding sidebar width
• Overlay management with proper aria attributes
• Body scroll prevention when sidebar is open on mobile
• Cleanup on component destruction

Sidebar Wrapper Component

The x-ui.sidebar-wrapper component provides the base structure for any sidebar implementation:

Component structure:

<!-- Basic sidebar wrapper structure -->
<x-ui.sidebar-wrapper class="your-sidebar-classes">
    <!-- Your sidebar content here -->
    <nav>
        <!-- Navigation items -->
    </nav>
</x-ui.sidebar-wrapper>

Usage Examples

Demo Example

Basic Sidebar Implementation

Here's how to implement a basic sidebar using the wrapper component:

<!-- Basic sidebar implementation -->
<x-ui.sidebar-wrapper class="fixed h-dvh w-72 bg-bg-surface border-r border-bg-muted transition-all -translate-x-full fx-open:translate-x-0 lg:translate-x-0 z-80">
    <nav class="flex-1 p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center gap-x-2.5 px-3 py-2 rounded-md hover:bg-bg-muted">
                    <span class="iconify ph--house"></span>
                    <span>Dashboard</span>
                </a>
            </li>
        </ul>
    </nav>
</x-ui.sidebar-wrapper>

Sidebar with Toggle Button

Add a toggle button to control the sidebar visibility:

<!-- Toggle button -->
<button data-toggle-sidebar class="lg:hidden p-2 rounded-md hover:bg-bg-muted">
    <span class="iconify ph--list text-xl"></span>
</button>

<!-- Sidebar with toggle functionality -->
<x-ui.sidebar-wrapper 
    class="fixed h-dvh w-72 bg-bg-surface border-r border-bg-muted transition-all -translate-x-full fx-open:translate-x-0 z-80">
    
    <!-- Sidebar content -->
    <div class="p-4">
        <h2 class="font-semibold">Sidebar Content</h2>
        <!-- Your sidebar content here -->
    </div>
</x-ui.sidebar-wrapper>

Sidebar with Resize Functionality

Add resize functionality to collapse/expand the sidebar:

<!-- Sidebar with resize functionality -->
<x-ui.sidebar-wrapper 
    class="fixed h-dvh bg-bg-surface border-r border-bg-muted transition-all group
           w-72 lg:fx-resized:w-16 -translate-x-full fx-open:translate-x-0 lg:translate-x-0 z-80">
    
    <!-- Resize toggle button -->
    <button data-toggle-sidebar-size class="hidden lg:block p-2 rounded-md hover:bg-bg-muted">
        <span class="iconify ph--caret-left text-xl group-aria-expanded:rotate-180 transition-transform"></span>
    </button> 
    
    <!-- Sidebar content -->
    <nav class="flex-1 p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center gap-x-2.5 px-3 py-2 rounded-md hover:bg-bg-muted">
                    <span class="iconify ph--house"></span>
                    <span class="in-fx-resized:hidden">Dashboard</span>
                </a>
            </li>
        </ul>
    </nav>
</x-ui.sidebar-wrapper>

Data Attributes and States

The sidebar system uses data attributes to manage states:

Styling Guidelines

When creating custom sidebar implementations, follow these guidelines:

• Use fx-open: prefix for classes that should apply when sidebar is open
• Use has-fx-active: prefix for active navigation items
• Apply proper z-index values (z-70 for overlay, z-80 for sidebar)
• Use responsive classes to hide/show sidebar on different screen sizes
• Include proper transitions for smooth animations