🎨 Mejora la estructura y estilos del menú

Rrenombra clases, ajusta estilos CSS y actualiza la lógica de JavaScript
para una mejor gestión de submenús.
This commit is contained in:
Manuel Cillero 2025-09-29 02:07:10 +02:00
parent c0577a0773
commit 423b30475b
8 changed files with 84 additions and 85 deletions

View file

@ -18,7 +18,7 @@ impl Component for Group {
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! {
div id=[self.id()] class="menu-group" {
div id=[self.id()] class="menu__group" {
(self.elements().render(cx))
}
})

View file

@ -1,11 +1,9 @@
use crate::prelude::*;
//use super::{Megamenu, Submenu};
type Label = L10n;
type Content = Typed<Html>;
type SubmenuItems = Typed<menu::Submenu>;
//type MegamenuGroups = Typed<Megamenu>;
type MegamenuGroups = Typed<menu::Megamenu>;
#[derive(AutoDefault)]
pub enum ItemKind {
@ -16,7 +14,7 @@ pub enum ItemKind {
LinkBlank(Label, FnPathByContext),
Html(Content),
Submenu(Label, SubmenuItems),
// Megamenu(Label, MegamenuGroups),
Megamenu(Label, MegamenuGroups),
}
#[rustfmt::skip]
@ -41,61 +39,65 @@ impl Component for Item {
match self.item_kind() {
ItemKind::Void => PrepareMarkup::None,
ItemKind::Label(label) => PrepareMarkup::With(html! {
li class="menu__label" {
li class="menu__item menu__item--label" {
span title=[description] {
(left_icon)
(label.using(cx))
span class="menu__label" { (label.using(cx)) }
(right_icon)
}
}
}),
ItemKind::Link(label, path) => PrepareMarkup::With(html! {
li class="menu__link" {
li class="menu__item menu__item--link" {
a href=(path(cx)) title=[description] {
(left_icon)
(label.using(cx))
span class="menu__label" { (label.using(cx)) }
(right_icon)
}
}
}),
ItemKind::LinkBlank(label, path) => PrepareMarkup::With(html! {
li class="menu__link" {
li class="menu__item menu__item--link" {
a href=(path(cx)) title=[description] target="_blank" {
(left_icon)
(label.using(cx))
span class="menu__label" { (label.using(cx)) }
(right_icon)
}
}
}),
ItemKind::Html(content) => PrepareMarkup::With(html! {
li class="menu__html" {
li class="menu__item menu__item--html" {
(content.render(cx))
}
}),
ItemKind::Submenu(label, submenu) => PrepareMarkup::With(html! {
li class="menu__children" {
li class="menu__item menu__item--children" {
a href="#" title=[description] {
(left_icon)
(label.using(cx)) i class="menu__icon bi-chevron-down" {}
span class="menu__label" { (label.using(cx)) }
(Icon::svg(html! {
path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708" {}
}).render(cx))
}
div class="menu__subs" {
div class="menu__children menu__children--submenu" {
(submenu.render(cx))
}
}
}),
/*
ItemKind::Megamenu(label, megamenu) => PrepareMarkup::With(html! {
li class="menu__children" {
li class="menu__item menu__item--children" {
a href="#" title=[description] {
(left_icon)
(label.escaped(cx.langid())) i class="menu__icon bi-chevron-down" {}
span class="menu__label" { (label.using(cx)) }
(Icon::svg(html! {
path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708" {}
}).render(cx))
}
div class="menu__subs menu__mega" {
div class="menu__children menu__children--mega" {
(megamenu.render(cx))
}
}
}),
*/
}
}
}

View file

@ -18,7 +18,7 @@ impl Component for Megamenu {
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! {
div id=[self.id()] class="menu__groups" {
div id=[self.id()] class="menu__mega" {
(self.groups().render(cx))
}
})

View file

@ -54,7 +54,9 @@ impl Component for Menu {
class="menu__trigger"
title=[L10n::l("menu_toggle").lookup(cx)]
{
span {} span {} span {}
(Icon::svg(html! {
path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5" {}
}).render(cx))
}
}
}

View file

@ -19,9 +19,9 @@ impl Component for Submenu {
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! {
div id=[self.id()] class="menu__items" {
div id=[self.id()] class="menu__submenu" {
@if let Some(title) = self.title().lookup(cx) {
h4 class="menu__title" { (title) }
h4 class="menu__submenu-title" { (title) }
}
ul {
(self.items().render(cx))