Navbar Simple

Contrato del layout

Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.

Slots

Ninguno

Filas repetibles

nav_link — link_url, link_label

panel_link — link_url, link_label

Componentes requeridos

logonav-linkbuttonburger-icon

Anatomía CSS

<div class="layoutNavbarSimple">

</div>

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.

/* Layout: navbar-simple — structure only.
   Pildora flotante citada del nav-bar de ATOM: barra centrada sobre el
   contenido con radio 0.375em, contorno hairline translucido (su
   nav-bar__outline) y controles de 2.5em con padding 0.4375em. sticky, no
   fixed (fixed se rompe dentro de hosts con transform en un ancestro). El
   hide/show en scroll es el behavior nav-autohide, opt-in via
   data-nav-autohide — este css NO anima (ley: layouts sin motion). */
.l-navbar-simple {
  position: sticky;
  top: 20px;
  /* offset natural en reposo (sticky top solo actua al scrollear) */
  margin-block-start: 20px;
  z-index: 30;
  width: calc(100% - 2 * var(--container-padding));
  max-width: var(--size-container-content);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0.4375em;
  background-color: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 0.375em;
}
.l-navbar-simple__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 2.5em;
  /* aire lateral del nav-logo de ATOM */
  padding-inline: 0.5em;
}
.l-navbar-simple__links {
  display: flex;
  gap: 24px;
  align-items: center;
}
.l-navbar-simple__cta {
  flex-shrink: 0;
}
.l-navbar-simple__burger {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 8px;
  background: none;
  border: 0;
  color: #0a0a0a;
  cursor: pointer;
}
.l-navbar-simple__panel {
  /* mismo tratamiento de pildora; separado 0.375em (gap del nav-bar__width ATOM) */
  width: calc(100% - 2 * var(--container-padding));
  max-width: var(--size-container-content);
  margin-inline: auto;
  margin-block-start: 0.375em;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 24px 32px;
  background-color: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 0.375em;
}
.l-navbar-simple__panel-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.l-navbar-simple__panel[hidden] {
  display: none;
}
/* Sin nav links no hay menu que colapsar: fuera burger y panel, y el CTA
   (fijo) permanece visible tambien en movil. */
.l-navbar-simple:not(:has(.l-navbar-simple__links .nav-link)) .l-navbar-simple__burger {
  display: none;
}
.l-navbar-simple__panel:not(:has(.nav-link)) {
  display: none;
}
.l-navbar-simple__panel-cta {
  align-self: start;
  margin-block-start: 8px;
}
@media (max-width: 768px) {
  .l-navbar-simple__links,
  .l-navbar-simple__cta {
    display: none;
  }
  .l-navbar-simple:not(:has(.l-navbar-simple__links .nav-link)) .l-navbar-simple__cta {
    display: flex;
  }
  .l-navbar-simple__burger {
    /* flex, no block: es el display del atomo burger-icon — con block sus
       lineas (spans) pierden el contexto flex y colapsan a 0x0. Un layout
       muestra/oculta componentes; no les cambia el display propio. */
    display: flex;
  }
}
@media (min-width: 769px) {
  .l-navbar-simple__panel {
    display: none !important;
  }
}