supafast-ui · sub-skill: LAYOUT & NAVEGACIÓN

Patrones de página, sidebar y secciones. Densidad media, superficies separadas por borde (no sombra), space-y-4 como ritmo vertical por defecto.

Sidebar colapsable (patrón canónico)

• <aside> sticky a pantalla completa, ancho conmutable, transición solo de width: sticky top-0 h-screen shrink-0 border-r border-border bg-background transition-[width] duration-200 con w-60 (expandido) / w-16 (colapsado).
• Estado de colapso persistido en localStorage (clave tipo ptv:sidebar-collapsed).
• Interior: flex h-full flex-col gap-4 p-3.
• Toggle: botón size-8 ghost (rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground), iconos PanelLeftClose / PanelLeftOpen de lucide.
• Pie con border-t border-border pt-3 para el menú de usuario.

NavLink activo / inactivo (clave de la nav)

className={cn(
  'group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
  collapsed && 'justify-center px-0',
  active
    ? 'bg-primary/10 text-primary'
    : 'text-muted-foreground hover:bg-muted hover:text-foreground',
)}

• Activo = fondo tenue bg-primary/10 + texto text-primary.
• Inactivo = text-muted-foreground, hover sube a text-foreground con bg-muted.
• Match por prefijo de ruta (pathname === prefix || pathname.startsWith(prefix + '/')).
• Icono size-4 shrink-0 text-current; label oculto cuando collapsed.

SectionBlock (encabezado + contenido)

Componente reutilizable para secciones de página:

<section className="space-y-4">
  <h2 className="text-xl font-semibold text-foreground">{title}</h2>
  <div>{children}</div>
</section>

• titlePlacement: 'outside' | 'inside' — fuera del bloque (default) o dentro con mb-4.
• Título siempre text-xl font-semibold text-foreground.

Cards / superficies

• Card = bg-card border border-border rounded-2xl (panel) o rounded-xl (surface) + padding p-4/p-6.
• Separar con borde, no con sombra. Sombras solo en flotantes (popover/dialog/switch).
• Dentro de cards, secciones internas con border-t border-border pt-… o space-y-….

Layout de página

• Shell: sidebar fija + <main> con scroll propio; contenido con max-w-7xl cuando aplica.
• Ritmo vertical de página: space-y-4 / space-y-6 entre secciones.
• Grids: grid gap-4 + grid-cols-… responsivos (sm:/md:/lg:). Gaps gap-3/gap-4.
• Toolbars/filtros: fila flex items-center gap-2, búsqueda + botones outline/ghost.

Reglas

• Texto secundario siempre text-muted-foreground; nunca grises hex sueltos.
• Estados activos = tono tenue del primary (/10), no fondo sólido salvo CTA.
• Móvil: el mismo sidebar colapsa; no se duplica una MobileNav aparte (se eliminó).