🎨 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:
parent
c0577a0773
commit
423b30475b
8 changed files with 84 additions and 85 deletions
|
@ -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))
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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))
|
||||
}
|
||||
}
|
||||
}),
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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))
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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))
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue