✨ (pagetop): Añade with_expand() a Navbar

Navbar guarda el punto de corte a partir del cual deja de colapsar
(`Breakpoint::Md` por defecto) y añade la clase `navbar-expand-{nombre}`
o `navbar-expand` si no tiene ancho mínimo. El nombre lo resuelve el
tema activo con `Theme::breakpoint_entry()`.
This commit is contained in:
Manuel Cillero 2026-09-19 01:52:55 +02:00
parent 5bf28ef4f0
commit 9143f1eb26
10 changed files with 271 additions and 49 deletions

View file

@ -3,7 +3,8 @@ use crate::prelude::*;
/// Componente para crear una **barra de navegación**.
///
/// Permite mostrar enlaces, menús desplegables ([`nav::Item::dropdown()`]) y una marca de
/// identidad, en distintas disposiciones controladas por [`navbar::Layout`].
/// identidad, en distintas disposiciones controladas por [`navbar::Layout`]. El punto de corte a
/// partir del cual deja de colapsar se define con [`with_expand()`](Self::with_expand).
///
/// Si no contiene elementos, el componente **no se renderiza**.
///
@ -23,11 +24,13 @@ use crate::prelude::*;
/// ));
/// ```
///
/// Barra **colapsable**, con botón de despliegue:
/// Barra **colapsable**, con botón de despliegue, que muestra su contenido en línea a partir de un
/// punto de corte (por defecto, [`Breakpoint::Md`]):
///
/// ```rust,no_run
/// # use pagetop::prelude::*;
/// let navbar = Navbar::simple_toggle()
/// .with_expand(Breakpoint::Lg)
/// .with_item(navbar::Item::nav(
/// Nav::new()
/// .with_item(nav::Item::link(Lc::n("Home"), "/"))
@ -81,6 +84,10 @@ pub struct Navbar {
props: Props,
/// Devuelve la disposición configurada para la barra de navegación.
layout: navbar::Layout,
/// Devuelve el punto de corte a partir del cual la barra deja de colapsar.
#[default(Breakpoint::Md)]
#[getters(copy)]
expand: Breakpoint,
/// Devuelve la lista de contenidos.
items: Children,
}
@ -101,6 +108,12 @@ impl Component for Navbar {
// de despliegue lo necesita para referenciar ese contenido colapsable con `aria-controls`
// si el *layout* lo incluye.
self.alter_prop(PropsOp::ensure_id(cx.build_id::<Self>(1)));
let class: CowStr = match self.expand().resolved(cx) {
Some(entry) => util::join!("navbar-expand-", entry.name).into(),
None => "navbar-expand".into(),
};
self.alter_prop(PropsOp::prepend_classes(class));
self.alter_prop(PropsOp::prepend_classes("navbar"));
}
@ -218,6 +231,17 @@ impl Navbar {
self
}
/// Define a partir de qué punto de corte ([`Breakpoint`]) la barra de navegación deja de
/// colapsar y muestra su contenido en línea.
///
/// Por debajo de ese punto de corte, en las disposiciones con botón de despliegue el contenido
/// queda oculto tras el botón. Con [`Breakpoint::Xs`] la barra nunca colapsa. Por defecto es
/// [`Breakpoint::Md`].
pub fn with_expand(mut self, bp: Breakpoint) -> Self {
self.expand = bp;
self
}
/// Añade un nuevo contenido a la barra de navegación o modifica la lista de contenidos de la
/// barra con una operación [`TypedOp`].
///