Shell bar

Barra de navegación superior de la aplicación: .cl-shell. Es el nav superior de todas las apps (en cl_nomina vive en layouts/_shell_bar). Se compone de logo, tabs de sección, buscador, acciones de ícono y avatar del usuario.

Completo

Logo, tabs de sección, buscador, acciones y avatar. El elemento raíz queda fijo (position: sticky) en la parte superior de la app.

CL Clavisco · Nómina

Dashboard Planillas Empleados Reportes

<header class="cl-shell">
  <div class="cl-shell-logo">
    <span class="cl-shell-logo-mark">CL</span>
    <span>Clavisco · Nómina</span>
  </div>
  <div class="cl-shell-tabs">
    <a class="cl-shell-tab is-active" href="#">Dashboard</a>
    <a class="cl-shell-tab" href="#">Planillas</a>
    <a class="cl-shell-tab" href="#">Empleados</a>
    <a class="cl-shell-tab" href="#">Reportes</a>
  </div>
  <div class="cl-shell-spacer"></div>
  <button class="cl-shell-search">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-3.5-3.5"/></svg>
    Buscar por nombre, código o categoría…
    <span class="cl-shell-kbd">⌘K</span>
  </button>
  <div class="cl-shell-divider"></div>
  <button class="cl-shell-icon-btn" title="Cambiar tema"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z"/></svg></button>
  <button class="cl-shell-icon-btn" title="Notificaciones">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2H4.5z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>
    <span class="cl-shell-badge">3</span>
  </button>
  <span class="cl-shell-avatar">MJ</span>
</header>

Compacto (sin buscador)

Para apps o layouts angostos: logo, acciones esenciales y avatar.

CL Clavisco · App

<header class="cl-shell">
  <div class="cl-shell-logo">
    <span class="cl-shell-logo-mark">CL</span>
    <span>Clavisco · App</span>
  </div>
  <div class="cl-shell-spacer"></div>
  <button class="cl-shell-icon-btn" title="Notificaciones">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2H4.5z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>
    <span class="cl-shell-badge">3</span>
  </button>
  <span class="cl-shell-avatar">MJ</span>
</header>