Sidebar (App)

🏠 Shell App (Glassy) Variant

Sidebar navigation optimized for signed-in application UI with dark/glassy surfaces. Automatically activated inside .app-shell scope.

Complete Shell App Sidebar

Full sidebar navigation rendered in glassy context. Demonstrates brand, navigation items, groups, and footer toggle all together on a dark/glassy surface.

Main Content Area

Content appears here when sidebar is expanded. All text uses Shell App Typography with optimized colors for glassy background readability.

Sidebar width: . Click the toggle button in the sidebar footer to switch states.

HTML Snippet

<!-- Sidebar (Signed-in App Shell) -->
<div x-data="sidebarApp()">
  <aside class="sidebar-app" x-ref="sidebar">
    <!-- Brand -->
    <div class="sidebar-brand">
      <a href="/" class="sidebar-brand-link">
        <div class="sidebar-brand-logo">L</div>
        <span class="sidebar-brand-name">AzylKampinos</span>
      </a>
    </div>

    <!-- Navigation -->
    <nav class="sidebar-nav">
      <ul class="sidebar-nav-list">
        <li>
          <a href="/dashboard" class="sidebar-nav-item is-active" @click="closeMobile()">
            <svg class="sidebar-nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </svg>
            <span class="sidebar-nav-label">Dashboard</span>
          </a>
        </li>
      </ul>

      <?php if ($user['is_admin']): ?>
      <div class="sidebar-group">
        <div class="sidebar-group-title">Admin</div>
        <ul class="sidebar-nav-list">
          <li>
            <a href="/admin/users" class="sidebar-nav-item" @click="closeMobile()">
              <svg class="sidebar-nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
              <span class="sidebar-nav-label">Users</span>
            </a>
          </li>
        </ul>
      </div>
      <?php endif; ?>
    </nav>

    <!-- Footer -->
    <div class="sidebar-footer">
      <button class="sidebar-toggle" @click="toggleCollapse()" title="Collapse sidebar">
        <svg class="sidebar-toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
        </svg>
      </button>
    </div>
  </aside>
</div>

Usage Guidelines

✅ Do

• Use sidebar for all signed-in pages (dashboard, admin, client area)
• Filter menu items by user permissions (RBAC) using conditional PHP
• Set is-active class on current page's nav item
• Use Heroicons inline SVG for all navigation icons
• Call closeMobile() on nav clicks to auto-close drawer
• Combine with Topbar (App Minimal) for complete app header
• Adjust main content margin-left (256px expanded, 80px collapsed)

❌ Don't

• Don't add logo/brand to sidebar (use Topbar for branding)
• Don't hardcode menu items—use a config array filtered by permissions
• Don't use custom icon styles—only Heroicons inline SVG
• Don't remove collapse toggle (users expect this feature)
• Don't modify CSS classes—they're tied to Alpine.js state management
• Don't forget mobile overlay backdrop (required for drawer UX)
• Don't use inline styles except for essential margins/spacing

CSS Location

Sidebar styles are defined in:

/assets/css/sidebar-app.css

Includes: Layout, spacing, colors, interactive states, mobile drawer behavior, responsive breakpoints, dark mode support, and Alpine.js state-driven styling.

🏠 Shell App (Glassy) Variant

Complete Shell App Sidebar

Main Content Area

Usage Guidelines

✅ Do

❌ Don't

CSS Location

Related Documentation

Navbar

Colors

Typography