manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

🚧 Revisión del estado de los menús

Browse source
This commit is contained in:
Manuel Cillero 2025-10-10 10:55:51 +02:00
parent 8ceb6fbd9d
commit 3f394769db
3 changed files with 19 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/base/component/menu/item.rs
View file

@ -137,14 +137,14 @@ impl Item {
..Default::default() ..Default::default()
} }
} }
/*
pub fn megamenu(label: L10n, megamenu: Megamenu) -> Self { pub fn megamenu(label: L10n, megamenu: menu::Megamenu) -> Self {
Item { Item {
item_kind: ItemKind::Megamenu(label, MegamenuGroups::with(megamenu)), item_kind: ItemKind::Megamenu(label, MegamenuGroups::with(megamenu)),
..Default::default() ..Default::default()
} }
} }
*/
// **< Item BUILDER >*************************************************************************** // **< Item BUILDER >***************************************************************************
#[builder_fn] #[builder_fn]

5
static/css/menu.css
View file

@ -342,6 +342,11 @@
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.menu.menu--closing .menu__children {
margin-top: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
}
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {

23
static/js/menu.js
View file

@ -1,12 +1,12 @@
const getTitle = (li) => li.querySelector('.menu__label')?.textContent.trim() ?? '';
function menu__showChildren(nav, children) { function menu__showChildren(nav, children) {
const li = children[0]; const li = children[0];
const submenu = li.querySelector('.menu__children'); const submenu = li.querySelector('.menu__children');
submenu.classList.add('active'); submenu.classList.add('active');
submenu.style.animation = 'slideLeft 0.5s ease forwards'; submenu.style.animation = 'slideLeft 0.5s ease forwards';
const labelEl = li.querySelector('.menu__label'); nav.querySelector('.menu__title').textContent = getTitle(li);;
const title = labelEl ? labelEl.textContent.trim() : (li.querySelector('a')?.textContent?.trim() ?? '');
nav.querySelector('.menu__title').innerHTML = title;
nav.querySelector('.menu__header').classList.add('active'); nav.querySelector('.menu__header').classList.add('active');
} }
@ -20,9 +20,7 @@ function menu__hideChildren(nav, children) {
children.shift(); children.shift();
if (children.length > 0) { if (children.length > 0) {
const a = children[0].querySelector('a'); nav.querySelector('.menu__title').textContent = getTitle(children[0]);
const title = (a && a.textContent ? a.textContent.trim() : '');
nav.querySelector('.menu__title').textContent = title;
} else { } else {
nav.querySelector('.menu__header').classList.remove('active'); nav.querySelector('.menu__header').classList.remove('active');
nav.querySelector('.menu__title').textContent = ''; nav.querySelector('.menu__title').textContent = '';
@ -38,7 +36,7 @@ function menu__reset(menu, nav, overlay) {
menu__toggle(nav, overlay); menu__toggle(nav, overlay);
setTimeout(() => { setTimeout(() => {
nav.querySelector('.menu__header').classList.remove('active'); nav.querySelector('.menu__header').classList.remove('active');
nav.querySelector('.menu__title').innerHTML = ''; nav.querySelector('.menu__title').textContent = '';
menu.querySelectorAll('.menu__children').forEach(submenu => { menu.querySelectorAll('.menu__children').forEach(submenu => {
submenu.classList.remove('active'); submenu.classList.remove('active');
submenu.style.removeProperty('animation'); submenu.style.removeProperty('animation');
@ -85,12 +83,13 @@ document.querySelectorAll('.menu').forEach(menu => {
menu__toggle(menuNav, menuOverlay); menu__toggle(menuNav, menuOverlay);
}); });
window.onresize = function () { let resizeTimeout;
window.addEventListener('resize', () => {
if (menuNav.classList.contains('active')) { if (menuNav.classList.contains('active')) {
var fontSizeRoot = parseFloat(getComputedStyle(document.documentElement).fontSize); clearTimeout(resizeTimeout);
if (this.innerWidth >= 62 * fontSizeRoot) { resizeTimeout = setTimeout(() => {
menuChildren = menu__reset(menu, menuNav, menuOverlay); menuChildren = menu__reset(menu, menuNav, menuOverlay);
}, 150);
} }
} });
};
}); });