395 lines
15 KiB
Rust
395 lines
15 KiB
Rust
use pagetop::prelude::*;
|
|
|
|
use crate::LOCALES_BOOTSIER;
|
|
use crate::theme::*;
|
|
|
|
const TOGGLE_COLLAPSE: &str = "collapse";
|
|
const TOGGLE_OFFCANVAS: &str = "offcanvas";
|
|
|
|
/// Componente para crear una **barra de navegación** ([`navbar`]).
|
|
///
|
|
/// Permite mostrar enlaces, menús y una marca de identidad en distintas disposiciones (simples, con
|
|
/// botón de despliegue o dentro de un [`offcanvas`]), controladas por [`navbar::Layout`]. También
|
|
/// puede fijarse en la parte superior o inferior del documento mediante [`navbar::Position`].
|
|
///
|
|
/// Si no contiene elementos, el componente **no se renderiza**.
|
|
///
|
|
/// # Ejemplos
|
|
///
|
|
/// Barra **simple**, sólo con un menú horizontal:
|
|
///
|
|
/// ```rust
|
|
/// use pagetop::prelude::*;
|
|
/// use pagetop_bootsier::theme::*;
|
|
///
|
|
/// let navbar = Navbar::simple()
|
|
/// .with_item(navbar::Item::nav(
|
|
/// Nav::new()
|
|
/// .with_item(nav::Item::link(L10n::n("Home"), |_| "/".into()))
|
|
/// .with_item(nav::Item::link(L10n::n("About"), |_| "/about".into()))
|
|
/// .with_item(nav::Item::link(L10n::n("Contact"), |_| "/contact".into()))
|
|
/// ));
|
|
/// ```
|
|
///
|
|
/// Barra **colapsable**, con botón de despliegue y contenido en el desplegable cuando colapsa:
|
|
///
|
|
/// ```rust
|
|
/// # use pagetop::prelude::*;
|
|
/// # use pagetop_bootsier::theme::*;
|
|
/// let navbar = Navbar::simple_toggle()
|
|
/// .with_expand(BreakPoint::MD)
|
|
/// .with_item(navbar::Item::nav(
|
|
/// Nav::new()
|
|
/// .with_item(nav::Item::link(L10n::n("Home"), |_| "/".into()))
|
|
/// .with_item(nav::Item::link_blank(L10n::n("Docs"), |_| "https://docs.rs".into()))
|
|
/// .with_item(nav::Item::link(L10n::n("Support"), |_| "/support".into()))
|
|
/// ));
|
|
/// ```
|
|
///
|
|
/// Barra con **marca de identidad a la izquierda** y menú a la derecha, típica de una cabecera:
|
|
///
|
|
/// ```rust
|
|
/// # use pagetop::prelude::*;
|
|
/// # use pagetop_bootsier::theme::*;
|
|
/// let brand = navbar::Brand::new()
|
|
/// .with_title(L10n::n("PageTop"))
|
|
/// .with_route(Some(|cx| cx.route("/")));
|
|
///
|
|
/// let navbar = Navbar::brand_left(brand)
|
|
/// .with_item(navbar::Item::nav(
|
|
/// Nav::new()
|
|
/// .with_item(nav::Item::link(L10n::n("Home"), |_| "/".into()))
|
|
/// .with_item(nav::Item::dropdown(
|
|
/// Dropdown::new()
|
|
/// .with_title(L10n::n("Tools"))
|
|
/// .with_item(dropdown::Item::link(
|
|
/// L10n::n("Generator"), |_| "/tools/gen".into())
|
|
/// )
|
|
/// .with_item(dropdown::Item::link(
|
|
/// L10n::n("Reports"), |_| "/tools/reports".into())
|
|
/// )
|
|
/// ))
|
|
/// .with_item(nav::Item::link_disabled(L10n::n("Disabled"), |_| "#".into()))
|
|
/// ));
|
|
/// ```
|
|
///
|
|
/// Barra con **botón de despliegue a la izquierda** y **marca de identidad a la derecha**:
|
|
///
|
|
/// ```rust
|
|
/// # use pagetop::prelude::*;
|
|
/// # use pagetop_bootsier::theme::*;
|
|
/// let brand = navbar::Brand::new()
|
|
/// .with_title(L10n::n("Intranet"))
|
|
/// .with_route(Some(|cx| cx.route("/")));
|
|
///
|
|
/// let navbar = Navbar::brand_right(brand)
|
|
/// .with_expand(BreakPoint::LG)
|
|
/// .with_item(navbar::Item::nav(
|
|
/// Nav::pills()
|
|
/// .with_item(nav::Item::link(L10n::n("Dashboard"), |_| "/dashboard".into()))
|
|
/// .with_item(nav::Item::link(L10n::n("Users"), |_| "/users".into()))
|
|
/// ));
|
|
/// ```
|
|
///
|
|
/// Barra con el **contenido en un *offcanvas***, ideal para dispositivos móviles o menús largos:
|
|
///
|
|
/// ```rust
|
|
/// # use pagetop::prelude::*;
|
|
/// # use pagetop_bootsier::theme::*;
|
|
/// let oc = Offcanvas::new()
|
|
/// .with_id("main_offcanvas")
|
|
/// .with_title(L10n::n("Main menu"))
|
|
/// .with_placement(offcanvas::Placement::Start)
|
|
/// .with_backdrop(offcanvas::Backdrop::Enabled);
|
|
///
|
|
/// let navbar = Navbar::offcanvas(oc)
|
|
/// .with_item(navbar::Item::nav(
|
|
/// Nav::new()
|
|
/// .with_item(nav::Item::link(L10n::n("Home"), |_| "/".into()))
|
|
/// .with_item(nav::Item::link(L10n::n("Profile"), |_| "/profile".into()))
|
|
/// .with_item(nav::Item::dropdown(
|
|
/// Dropdown::new()
|
|
/// .with_title(L10n::n("More"))
|
|
/// .with_item(dropdown::Item::link(L10n::n("Settings"), |_| "/settings".into()))
|
|
/// .with_item(dropdown::Item::link(L10n::n("Help"), |_| "/help".into()))
|
|
/// ))
|
|
/// ));
|
|
/// ```
|
|
///
|
|
/// Barra **fija arriba**:
|
|
///
|
|
/// ```rust
|
|
/// # use pagetop::prelude::*;
|
|
/// # use pagetop_bootsier::theme::*;
|
|
/// let brand = navbar::Brand::new()
|
|
/// .with_title(L10n::n("Main App"))
|
|
/// .with_route(Some(|cx| cx.route("/")));
|
|
///
|
|
/// let navbar = Navbar::brand_left(brand)
|
|
/// .with_position(navbar::Position::FixedTop)
|
|
/// .with_item(navbar::Item::nav(
|
|
/// Nav::new()
|
|
/// .with_item(nav::Item::link(L10n::n("Dashboard"), |_| "/".into()))
|
|
/// .with_item(nav::Item::link(L10n::n("Donors"), |_| "/donors".into()))
|
|
/// .with_item(nav::Item::link(L10n::n("Stock"), |_| "/stock".into()))
|
|
/// ));
|
|
/// ```
|
|
#[derive(AutoDefault, Clone, Debug, Getters)]
|
|
pub struct Navbar {
|
|
#[getters(skip)]
|
|
id: AttrId,
|
|
/// Devuelve las clases CSS asociadas a la barra de navegación.
|
|
classes: Classes,
|
|
/// Devuelve el punto de ruptura configurado.
|
|
expand: BreakPoint,
|
|
/// Devuelve la disposición configurada para la barra de navegación.
|
|
layout: navbar::Layout,
|
|
/// Devuelve la posición configurada para la barra de navegación.
|
|
position: navbar::Position,
|
|
/// Devuelve la lista de contenidos.
|
|
items: Children,
|
|
}
|
|
|
|
impl Component for Navbar {
|
|
fn new() -> Self {
|
|
Self::default()
|
|
}
|
|
|
|
fn id(&self) -> Option<String> {
|
|
self.id.get()
|
|
}
|
|
|
|
fn setup(&mut self, _cx: &Context) {
|
|
self.alter_classes(ClassesOp::Prepend, {
|
|
let mut classes = "navbar".to_string();
|
|
self.expand().push_class(&mut classes, "navbar-expand", "");
|
|
self.position().push_class(&mut classes);
|
|
classes
|
|
});
|
|
}
|
|
|
|
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
|
// Botón de despliegue (colapso u offcanvas) para la barra.
|
|
fn button(cx: &mut Context, data_bs_toggle: &str, id_content: &str) -> Markup {
|
|
let id_content_target = util::join!("#", id_content);
|
|
let aria_expanded = if data_bs_toggle == TOGGLE_COLLAPSE {
|
|
Some("false")
|
|
} else {
|
|
None
|
|
};
|
|
html! {
|
|
button
|
|
type="button"
|
|
class="navbar-toggler"
|
|
data-bs-toggle=(data_bs_toggle)
|
|
data-bs-target=(id_content_target)
|
|
aria-controls=(id_content)
|
|
aria-expanded=[aria_expanded]
|
|
aria-label=[L10n::t("toggle", &LOCALES_BOOTSIER).lookup(cx)]
|
|
{
|
|
span class="navbar-toggler-icon" {}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Si no hay contenidos, no tiene sentido mostrar una barra vacía.
|
|
let items = self.items().render(cx);
|
|
if items.is_empty() {
|
|
return Ok(html! {});
|
|
}
|
|
|
|
// Asegura que la barra tiene un `id` para poder asociarlo al colapso/offcanvas.
|
|
let id = cx.required_id::<Self>(self.id(), 1);
|
|
|
|
Ok(html! {
|
|
nav id=(&id) class=[self.classes().get()] {
|
|
div class="container-fluid" {
|
|
@match self.layout() {
|
|
// Barra más sencilla: sólo contenido.
|
|
navbar::Layout::Simple => {
|
|
(items)
|
|
},
|
|
|
|
// Barra sencilla que se puede contraer/expandir.
|
|
navbar::Layout::SimpleToggle => {
|
|
@let id_content = util::join!(id, "-content");
|
|
|
|
(button(cx, TOGGLE_COLLAPSE, &id_content))
|
|
div id=(&id_content) class="collapse navbar-collapse" {
|
|
(items)
|
|
}
|
|
},
|
|
|
|
// Barra con marca a la izquierda, siempre visible.
|
|
navbar::Layout::SimpleBrandLeft(brand) => {
|
|
(brand.render(cx))
|
|
(items)
|
|
},
|
|
|
|
// Barra con marca a la izquierda y botón a la derecha.
|
|
navbar::Layout::BrandLeft(brand) => {
|
|
@let id_content = util::join!(id, "-content");
|
|
|
|
(brand.render(cx))
|
|
(button(cx, TOGGLE_COLLAPSE, &id_content))
|
|
div id=(&id_content) class="collapse navbar-collapse" {
|
|
(items)
|
|
}
|
|
},
|
|
|
|
// Barra con botón a la izquierda y marca a la derecha.
|
|
navbar::Layout::BrandRight(brand) => {
|
|
@let id_content = util::join!(id, "-content");
|
|
|
|
(button(cx, TOGGLE_COLLAPSE, &id_content))
|
|
(brand.render(cx))
|
|
div id=(&id_content) class="collapse navbar-collapse" {
|
|
(items)
|
|
}
|
|
},
|
|
|
|
// Barra cuyo contenido se muestra en un offcanvas, sin marca.
|
|
navbar::Layout::Offcanvas(offcanvas) => {
|
|
@let id_content = offcanvas.id().unwrap_or_default();
|
|
|
|
(button(cx, TOGGLE_OFFCANVAS, &id_content))
|
|
@if let Some(oc) = offcanvas.get() {
|
|
(oc.render_offcanvas(cx, Some(self.items())))
|
|
}
|
|
},
|
|
|
|
// Barra con marca a la izquierda y contenido en offcanvas.
|
|
navbar::Layout::OffcanvasBrandLeft(brand, offcanvas) => {
|
|
@let id_content = offcanvas.id().unwrap_or_default();
|
|
|
|
(brand.render(cx))
|
|
(button(cx, TOGGLE_OFFCANVAS, &id_content))
|
|
@if let Some(oc) = offcanvas.get() {
|
|
(oc.render_offcanvas(cx, Some(self.items())))
|
|
}
|
|
},
|
|
|
|
// Barra con contenido en offcanvas y marca a la derecha.
|
|
navbar::Layout::OffcanvasBrandRight(brand, offcanvas) => {
|
|
@let id_content = offcanvas.id().unwrap_or_default();
|
|
|
|
(button(cx, TOGGLE_OFFCANVAS, &id_content))
|
|
(brand.render(cx))
|
|
@if let Some(oc) = offcanvas.get() {
|
|
(oc.render_offcanvas(cx, Some(self.items())))
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
impl Navbar {
|
|
/// Crea una barra de navegación **simple**, sin marca y sin botón.
|
|
pub fn simple() -> Self {
|
|
Self::default().with_layout(navbar::Layout::Simple)
|
|
}
|
|
|
|
/// Crea una barra de navegación **simple pero colapsable**, con botón a la izquierda.
|
|
pub fn simple_toggle() -> Self {
|
|
Self::default().with_layout(navbar::Layout::SimpleToggle)
|
|
}
|
|
|
|
/// Crea una barra de navegación **con marca a la izquierda**, siempre visible.
|
|
pub fn simple_brand_left(brand: navbar::Brand) -> Self {
|
|
Self::default().with_layout(navbar::Layout::SimpleBrandLeft(Embed::with(brand)))
|
|
}
|
|
|
|
/// Crea una barra de navegación con **marca a la izquierda** y **botón a la derecha**.
|
|
pub fn brand_left(brand: navbar::Brand) -> Self {
|
|
Self::default().with_layout(navbar::Layout::BrandLeft(Embed::with(brand)))
|
|
}
|
|
|
|
/// Crea una barra de navegación con **botón a la izquierda** y **marca a la derecha**.
|
|
pub fn brand_right(brand: navbar::Brand) -> Self {
|
|
Self::default().with_layout(navbar::Layout::BrandRight(Embed::with(brand)))
|
|
}
|
|
|
|
/// Crea una barra de navegación cuyo contenido se muestra en un **offcanvas**.
|
|
pub fn offcanvas(oc: Offcanvas) -> Self {
|
|
Self::default().with_layout(navbar::Layout::Offcanvas(Embed::with(oc)))
|
|
}
|
|
|
|
/// Crea una barra de navegación con **marca a la izquierda** y contenido en **offcanvas**.
|
|
pub fn offcanvas_brand_left(brand: navbar::Brand, oc: Offcanvas) -> Self {
|
|
Self::default().with_layout(navbar::Layout::OffcanvasBrandLeft(
|
|
Embed::with(brand),
|
|
Embed::with(oc),
|
|
))
|
|
}
|
|
|
|
/// Crea una barra de navegación con **marca a la derecha** y contenido en **offcanvas**.
|
|
pub fn offcanvas_brand_right(brand: navbar::Brand, oc: Offcanvas) -> Self {
|
|
Self::default().with_layout(navbar::Layout::OffcanvasBrandRight(
|
|
Embed::with(brand),
|
|
Embed::with(oc),
|
|
))
|
|
}
|
|
|
|
// **< Navbar BUILDER >*************************************************************************
|
|
|
|
/// Establece el identificador único (`id`) de la barra de navegación.
|
|
#[builder_fn]
|
|
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
|
|
self.id.alter_id(id);
|
|
self
|
|
}
|
|
|
|
/// Modifica la lista de clases CSS aplicadas a la barra de navegación.
|
|
///
|
|
/// También acepta clases predefinidas para:
|
|
///
|
|
/// - Modificar el color de fondo ([`classes::Background`]).
|
|
/// - Definir la apariencia del texto ([`classes::Text`]).
|
|
#[builder_fn]
|
|
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
|
|
self.classes.alter_classes(op, classes);
|
|
self
|
|
}
|
|
|
|
/// Define a partir de qué punto de ruptura la barra de navegación deja de colapsar.
|
|
#[builder_fn]
|
|
pub fn with_expand(mut self, bp: BreakPoint) -> Self {
|
|
self.expand = bp;
|
|
self
|
|
}
|
|
|
|
/// Define el tipo de disposición que tendrá la barra de navegación.
|
|
#[builder_fn]
|
|
pub fn with_layout(mut self, layout: navbar::Layout) -> Self {
|
|
self.layout = layout;
|
|
self
|
|
}
|
|
|
|
/// Define dónde se mostrará la barra de navegación dentro del documento.
|
|
#[builder_fn]
|
|
pub fn with_position(mut self, position: navbar::Position) -> Self {
|
|
self.position = position;
|
|
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 [`ChildOp`].
|
|
///
|
|
/// # Ejemplo
|
|
///
|
|
/// ```rust,ignore
|
|
/// navbar.with_item(navbar::Item::nav(...));
|
|
/// navbar.with_item(ChildOp::AddMany(vec![
|
|
/// navbar::Item::nav(...).into(),
|
|
/// navbar::Item::text(...).into(),
|
|
/// ]));
|
|
/// ```
|
|
#[builder_fn]
|
|
pub fn with_item(mut self, op: impl Into<ChildOp>) -> Self {
|
|
self.items.alter_child(op.into());
|
|
self
|
|
}
|
|
}
|