Базовый макет, сочетающий в себе левую боковую панель и верхний заголовок, наиболее часто используемый в современных SaaS-приложениях и панелях администратора.

Варианты использования и возможности

• Экран управления/продукт SaaS: идеально подходит для приложений с множеством элементов навигации.
• Адаптивная совместимость: боковая панель, которая всегда отображается на рабочем столе, предназначена для скрытия на экранах мобильных устройств и планшетов (в реальной работе она отображается в ящике с гамбургер-меню и т. д.).
• Макет Flexbox: структура, рассчитанная на всю высоту экрана путем объединения таких утилит, как flex-1 и min-w-0. Прокручивается только основная область контента, заголовок и боковая панель зафиксированы.

##Ключевые моменты дизайна и UX (Design & UX)

• Разделение области прокрутки: навигация слева («навигация» внутри «в сторону») и прокрутка основного контента («основной») справа независимы, поэтому даже длинные меню не мешают работе главного экрана.
• Пользовательская полоса прокрутки: мы используем ::-webkit-scrollbar, чтобы изменить толстую полосу прокрутки по умолчанию на более тонкую и гладкую, что уменьшает шум пользовательского интерфейса.
• Хорошо видимая иерархическая структура: за счет комбинирования цветов фона («bg-slate-50» и «bg-white»), границ («border-slate-200») и светлых теней («shadow-sm») границы каждого раздела выражены естественно.

Как настроить (Руководство по настройке)

• Ширина боковой панели: вы можете отрегулировать ширину, изменив значение w-64 (16rem = 256 пикселей), указанное в aside, на w-72 или w-56. – Высота заголовка: вы можете контролировать общую высоту, изменяя заголовок и область логотипа в верхней части боковой панели с «h-16» (4rem = 64 пикселей) на «h-14» и т. д.
• Изменить цвет темы: замените indigo-600 и т. д., используемые в каждом значке и активном меню, на цвет вашего бренда (например, blue-600 или violet-500).

код реализации (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- боковая панель -->
<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>

<!-- Основной контейнер -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- Заголовок -->
  <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">
      <!-- Переключение меню для мобильных устройств -->
      <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>

Поддержка браузера

• Корректно работает с последними версиями современных браузеров (Chrome, Safari, Firefox, Edge).
• Старые браузеры (IE и т. д.) не поддерживаются, поскольку интенсивно используются Flexbox (flex, flex-1, flex-col).