Un diseño básico que combina una barra lateral izquierda y un encabezado superior, que se usa más comúnmente en aplicaciones SaaS y paneles de administración modernos.

Casos de uso y características

• Pantalla de gestión/producto SaaS: Ideal para aplicaciones con muchos elementos de navegación.
• Compatibilidad Responsive: La barra lateral que siempre se muestra en el escritorio está diseñada para ocultarse en las pantallas de móviles y tabletas (en funcionamiento real, se muestra en un cajón con un menú de hamburguesas, etc.).
• Diseño de Flexbox: una estructura calculada para ajustarse a la altura completa de la pantalla combinando utilidades como flex-1 y min-w-0. Sólo se desplaza el área de contenido principal, el encabezado y la barra lateral son fijos.

Puntos claves del diseño y UX (Design & UX)

• Separación del área de desplazamiento: La navegación a la izquierda (nav dentro de aside) y el desplazamiento del contenido principal (main) a la derecha son independientes, por lo que incluso los menús largos no interfieren con la pantalla principal.
• Barra de desplazamiento personalizada: utilizamos ::-webkit-scrollbar para cambiar la barra de desplazamiento gruesa predeterminada por un diseño más delgado y elegante que reduce el ruido de la interfaz de usuario.
• Estructura jerárquica altamente visible: al combinar colores de fondo (bg-slate-50 y bg-white), bordes (border-slate-200) y sombras claras (shadow-sm), los límites de cada sección se expresan de forma natural.

Cómo personalizar (Guía de personalización)

• Ancho de la barra lateral: Puede ajustar el ancho cambiando w-64 (16rem = 256px) especificado en aside a w-72 o w-56.
• Altura del encabezado: puede controlar la altura general cambiando el “encabezado” y el área del logotipo en la parte superior de la barra lateral de “h-16” (4rem = 64px) a “h-14”, etc.
• Cambiar color del tema: reemplace indigo-600, etc. utilizado en cada ícono y menú activo con el color de su marca (por ejemplo, blue-600 o violet-500).

código de implementación (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>

<!-- Contenedor principal -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- Encabezado -->
  <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 menú para móvil -->
      <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>

Soporte del navegador

• Funciona correctamente con las últimas versiones de los navegadores modernos (Chrome, Safari, Firefox, Edge).
• Los navegadores antiguos (IE, etc.) no son compatibles ya que Flexbox (flex, flex-1, flex-col) se usa mucho.