SiteHeader · @codigosinsiesta/theme

Demo

Logo: Pulsa Alt+1 .. Alt+4 con el cursor fuera del select.

Atajos disparados

— ninguno todavía —

Uso

app.svelte

<script>
  import { SiteHeader } from '@codigosinsiesta/theme/layout';
  const links = [
    { href: '#hero',    label: 'Inicio' },
    { href: '#about',   label: 'Sobre mí' },
    { href: '#projects', label: 'Proyectos' }
  ];
</script>

<SiteHeader {links} activeHref="#hero" logoVariant="both">
  {#snippet controls()}
    <button>🌗 Light</button>
    <button aria-label="Accesibilidad">♿</button>
  {/snippet}
</SiteHeader>

Atajos de teclado integrados

El componente registra Alt+1 a Alt+9 automáticamente para los primeros 9 links (máximo del modifier numérico). Cada atajo dispara:

Si href empieza por # → scrollIntoView suave al elemento.
Si href es absoluto/relativo → window.location.href (navegación).

Desactiva con keyboardShortcuts={false} si interfiere con shortcuts de tu app.

Los kbd badges junto a cada link son visibles solo en desktop. En mobile (<=768px) se ocultan — el modifier Alt no aplica en pantallas táctiles.

Responsive

Por debajo de 768px el nav colapsa dentro de un <details> nativo. El <summary> renderiza el icono bars-3.svg (Heroicons v0.6.0) como botón hamburguer. Sin JS custom de toggle — el browser gestiona el estado open/closed.

API

Prop	Tipo	Default	Descripción
`links`	`Link[]`	`[]`	Array de `{ href, label }`. Solo se usan los primeros 9 para atajos.
`activeHref`	`string`	`''`	Link con este href recibe `aria-current="page"`.
`logoVariant`	`'owl' \| 'wordmark' \| 'both'`	`'both'`	Qué assets de marca renderiza.
`homeHref`	`string`	`'/'`	Destino del click en logo.
`keyboardShortcuts`	`boolean`	`true`	Si `false`, no registra Alt+N.
`ariaLabel`	`string`	`'Navegación principal'`	`aria-label` del `<nav>`.
`controls`	`Snippet`	—	Snippet renderizado a la derecha (desktop) / dentro de details (mobile).
`logo`	`Snippet`	—	Override completo del logo. Si se proporciona, `logoVariant` se ignora.

Links externos

Cualquier href que matchee http(s)://, mailto: o tel: se renderiza automáticamente con target="_blank" + rel="noopener noreferrer". No necesitas marcarlo manualmente.

Casos de uso

Portfolio CsS: nav entre secciones one-page con Alt+N.
Landings de talleres: nav minimal con CTA principal en controls.
Apps con sidebar: usar logoVariant="owl" compacto + nav en sidebar custom.