Um layout básico que combina uma barra lateral esquerda e um cabeçalho superior, mais comumente usado em aplicativos SaaS modernos e painéis de administração.

Casos de uso e recursos

• Tela de gerenciamento/produto SaaS: Ideal para aplicações com muitos itens de navegação.
• Compatibilidade responsiva: A barra lateral que sempre aparece na área de trabalho foi projetada para ficar oculta nas telas de celulares e tablets (na operação real, é exibida em uma gaveta com um menu de hambúrguer, etc.).
• Layout Flexbox: Uma estrutura calculada para caber na altura total da tela combinando utilitários como flex-1 e min-w-0. Apenas a área de conteúdo principal rola, o cabeçalho e a barra lateral são fixos.

Pontos-chave de design e UX (Design & UX)

• Separação da área de rolagem: A navegação à esquerda (nav dentro de aside) e a rolagem do conteúdo principal (main) à direita são independentes, portanto mesmo menus longos não interferem na tela principal.
• Barra de rolagem personalizada: Usamos ::-webkit-scrollbar para alterar a barra de rolagem grossa padrão para um design mais fino e elegante que reduz o ruído da interface do usuário.
• Estrutura hierárquica altamente visível: Ao combinar cores de fundo (bg-slate-50 e bg-white), bordas (border-slate-200) e sombras claras (shadow-sm), os limites de cada seção são expressos naturalmente.

Como personalizar (Guia de Personalização)

• Largura da barra lateral: Você pode ajustar a largura alterando w-64 (16rem = 256px) especificado em aside para w-72 ou w-56.
• Altura do cabeçalho: Você pode controlar a altura geral alterando o header e a área do logotipo na parte superior da barra lateral de h-16 (4rem = 64px) para h-14, etc.
• Alterar a cor do tema: Substitua indigo-600 etc. usado em cada ícone e menu ativo pela cor da sua marca (por exemplo, blue-600 ou violet-500).

código de implementação (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- barra lateral -->
<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>

<!-- Contêiner principal -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- Cabeçalho -->
  <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">
      <!-- Alternar menu para dispositivos móveis -->
      <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>

Suporte ao navegador

• Funciona corretamente com as versões mais recentes dos navegadores modernos (Chrome, Safari, Firefox, Edge).
• Navegadores antigos (IE, etc.) não são suportados, pois o Flexbox (flex, flex-1, flex-col) é muito usado.