🏠 Shell App (Glassy) Layout

Complete signed-in layout optimized for application UI with dark/glassy surfaces. Uses .app-shell scope for consistent Shell App Typography and styling throughout all authenticated interfaces.

Live Preview - Complete Signed-in Layout

Full integration of Sidebar (App) and Content Container (App) using the actual .app-shell, .app-shell__main, and .app-shell-body classes. Click the collapse button in the sidebar footer to see responsive width behavior.

Welcome Janina

Dashboard Overview

This demonstrates the real App Shell layout structure from app-shell-signed-in.css. Notice the background image with dark overlay, viewport-height behavior, and responsive flexbox layout—all defined in the CSS module.

Layout Classes in Use

.app-shell — Viewport-height container with background image and overlay
.app-shell__main — Centered 1280px container with padding
.app-shell-body — Flexbox row for sidebar + content

This is the exact structure your application will use for all signed-in pages. Copy the HTML snippet below to use it in your templates.

Interactive Features

Click the collapse button in the sidebar to see how the content area automatically fills available width using flexbox layout.

All styling comes from CSS modules—no inline styles needed in your application code.

HTML Snippet

<!-- App Shell (Signed-in) - Complete Layout -->
<div class="app-shell" x-data="sidebarApp()">
  <div class="app-shell__main">
    <div class="app-shell-body">
      <!-- Sidebar (App) -->
      <aside class="sidebar-app" x-ref="sidebar">
    <!-- Brand Header -->
    <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>
        <li>
          <a href="/reservations" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <span class="sidebar-nav-label">Reservations</span>
          </a>
        </li>
        <li>
          <a href="/account" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
            <span class="sidebar-nav-label">Account</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>
          <li>
            <a href="/admin/settings" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              </svg>
              <span class="sidebar-nav-label">Settings</span>
            </a>
          </li>
        </ul>
      </div>
      <?php endif; ?>
    </nav>

    <!-- Footer (Collapse Toggle) -->
    <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>

  <!-- Content Container (App) -->
  <div class="content-container-app">
    <!-- Header -->
    <div class="content-container-app__header">
      <h1 class="t-h1">Welcome <?= htmlspecialchars($user['first_name']) ?></h1>
    </div>

    <!-- Content Area -->
    <div class="content-container-app__content">
      <!-- Your page content goes here -->
      <h2 class="t-h3 mb-4">Page Title</h2>
      <p class="t-body mb-6">Use DS Typography classes throughout.</p>
    </div>
  </div>
    </div>
  </div>
</div>

Usage Guidelines

✅ Do

• Use for all signed-in pages (dashboard, admin, client area)
• Compose Sidebar (App) + Content Container (App) exactly as shown
• Use DS Typography classes (.t-h1, .t-body, .t-small) in content area
• Filter sidebar navigation by user permissions (RBAC)
• Set is-active class on current page's nav item
• Test sidebar collapse and mobile drawer behavior
• Replace user name dynamically with PHP variables

❌ Don't

• Don't use for public/guest pages (requires authentication)
• Don't modify sidebar or content container CSS classes
• Don't use Tailwind typography utilities (text-lg, font-semibold)
• Don't add custom button/input styling—use DS Element classes
• Don't hardcode user names—use htmlspecialchars() for security
• Don't remove .app-shell wrapper (required for Shell App scope)
• Don't add topbar navigation (sidebar includes branding)

CSS Location

App Shell layout styles are composed from:

/assets/css/app-shell-signed-in.css
/assets/css/sidebar-app.css
/assets/css/content-container-app.css

Includes: Viewport-height layout structure (.app-shell, .app-shell__main, .app-shell-body), background image with dark overlay, flexbox row layout for sidebar + content, responsive breakpoints, and proper height-filling behavior for panels.

App Shell (Signed-in)