Ein Grundlayout, das eine linke Seitenleiste und eine obere Kopfzeile kombiniert und am häufigsten in modernen SaaS-Anwendungen und Admin-Dashboards verwendet wird.

Anwendungsfälle und Funktionen

• Verwaltungsbildschirm/SaaS-Produkt: Ideal für Anwendungen mit vielen Navigationselementen.
• Responsive-Kompatibilität: Die Seitenleiste, die immer auf dem Desktop angezeigt wird, ist so konzipiert, dass sie auf Mobil- und Tablet-Bildschirmen ausgeblendet wird (im tatsächlichen Betrieb wird sie in einer Schublade mit einem Hamburger-Menü usw. angezeigt).
• Flexbox-Layout: Eine Struktur, die durch die Kombination von Dienstprogrammen wie „flex-1“ und „min-w-0“ so berechnet wurde, dass sie der gesamten Bildschirmhöhe entspricht. Nur der Hauptinhaltsbereich scrollt, die Kopfzeile und die Seitenleiste sind fixiert.

Kernpunkte von Design und UX (Design & UX)

• Trennung des Scrollbereichs: Die Navigation auf der linken Seite („nav“ innerhalb von „aside“) und das Scrollen des Hauptinhalts („main“) auf der rechten Seite sind unabhängig voneinander, sodass auch lange Menüs den Hauptbildschirm nicht beeinträchtigen.
• Benutzerdefinierte Bildlaufleiste: Wir verwenden „::-webkit-scrollbar“, um die standardmäßige dicke Bildlaufleiste in ein dünneres, schlankeres Design zu ändern, das das Rauschen der Benutzeroberfläche reduziert.
• Gut sichtbare hierarchische Struktur: Durch die Kombination von Hintergrundfarben („bg-slate-50“ und „bg-white“), Rändern („border-slate-200“) und hellen Schatten („shadow-sm“) werden die Grenzen jedes Abschnitts natürlich ausgedrückt.

So passen Sie es an (Anpassungsanleitung)

• Breite der Seitenleiste: Sie können die Breite anpassen, indem Sie „w-64“ (16rem = 256px), angegeben in „aside“, in „w-72“ oder „w-56“ ändern.
• Kopfzeilenhöhe: Sie können die Gesamthöhe steuern, indem Sie „Kopfzeile“ und den Logobereich oben in der Seitenleiste von „h-16“ (4rem = 64px) in „h-14“ usw. ändern.
• Themenfarbe ändern: Bitte ersetzen Sie „Indigo-600“ usw., die in jedem Symbol und aktiven Menü verwendet werden, durch Ihre Markenfarbe (z. B. „Blau-600“ oder „Violett-500“).

Implementierungscode (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- Seitenleiste -->
<aside class="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 shrink-0">
  <div class="h-16 flex items-center px-6 border-b border-slate-200 shrink-0">
    <a href="#" class="font-bold text-lg text-indigo-600">NexusApp</a>
  </div>
  
  <nav class="flex-1 overflow-y-auto py-4 px-3">
    <ul class="space-y-1">
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-600">
          Dashboard
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50">
          Team
        </a>
      </li>
    </ul>
  </nav>
</aside>

<!-- Hauptcontainer -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- Header -->
  <header class="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-200 shadow-sm shrink-0">
    <div class="flex items-center gap-4">
      <!-- Menüumschaltung für Mobilgeräte -->
      <button class="md:hidden p-2 text-slate-500 hover:text-slate-900 rounded-md">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
      </button>
    </div>
    
    <div class="flex items-center gap-4">
      <button class="p-2 text-slate-400 hover:text-slate-600 rounded-full">
        <!-- Notification icons, etc. -->
      </button>
      <div class="h-8 w-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm font-bold">
        JS
      </div>
    </div>
  </header>
  
  <!-- Main content area -->
  <main class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
      <!-- Place page-specific content here -->
      <h1 class="text-2xl font-bold text-slate-900 mb-6">Dashboard</h1>
    </div>
  </main>
</div>
</div>

Browser-Unterstützung

• Funktioniert ordnungsgemäß mit den neuesten Versionen moderner Browser (Chrome, Safari, Firefox, Edge).
• Alte Browser (IE usw.) werden nicht unterstützt, da Flexbox („flex“, „flex-1“, „flex-col“) stark genutzt wird.