From 0595ecc1e2cd8f8733eb58fbf0e74ef6fd983a95 Mon Sep 17 00:00:00 2001 From: Manuel Cillero Date: Wed, 18 Oct 2023 18:18:19 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Enhance=20c?= =?UTF-8?q?lass=20names=20for=20easier=20extension?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pagetop/src/base/component/menu/item.rs | 20 +-- pagetop/src/base/component/menu/megamenu.rs | 2 +- pagetop/src/base/component/menu/menu_main.rs | 22 +-- pagetop/src/base/component/menu/submenu.rs | 4 +- pagetop/static/base/css/menu.css | 170 +++++++++---------- pagetop/static/base/css/root.css | 83 ++++----- pagetop/static/base/css/styles.css | 2 +- pagetop/static/base/js/menu.js | 60 +++---- 8 files changed, 182 insertions(+), 181 deletions(-) diff --git a/pagetop/src/base/component/menu/item.rs b/pagetop/src/base/component/menu/item.rs index 18108eef..e3b55c47 100644 --- a/pagetop/src/base/component/menu/item.rs +++ b/pagetop/src/base/component/menu/item.rs @@ -55,47 +55,47 @@ impl ComponentTrait for Item { match self.item_type() { ItemType::Void => PrepareMarkup::None, ItemType::Label(label) => PrepareMarkup::With(html! { - li class="menu-label" { + li class="pt-menu__label" { span title=[description] { (label.prepare(cx)) } } }), ItemType::Link(label, path) => PrepareMarkup::With(html! { - li class="menu-link" { + li class="pt-menu__link" { a href=(path(cx)) title=[description] { (label.prepare(cx)) } } }), ItemType::LinkBlank(label, path) => PrepareMarkup::With(html! { - li class="menu-link" { + li class="pt-menu__link" { a href=(path(cx)) title=[description] target="_blank" { (label.prepare(cx)) } } }), ItemType::Html(content) => PrepareMarkup::With(html! { - li class="html" { + li class="pt-menu__html" { (content.prepare(cx)) } }), ItemType::Submenu(label, submenu) => PrepareMarkup::With(html! { - li class="menu-children" { + li class="pt-menu__children" { a href="#" title=[description] { - (label.prepare(cx)) i class="menu-icon bi-chevron-down" {} + (label.prepare(cx)) i class="pt-menu__icon bi-chevron-down" {} } - div class="menu-subs" { + div class="pt-menu__subs" { (submenu.prepare(cx)) } } }), ItemType::Megamenu(label, megamenu) => PrepareMarkup::With(html! { - li class="menu-children" { + li class="pt-menu__children" { a href="#" title=[description] { - (label.prepare(cx)) i class="menu-icon bi-chevron-down" {} + (label.prepare(cx)) i class="pt-menu__icon bi-chevron-down" {} } - div class="menu-subs menu-mega" { + div class="pt-menu__subs pt-menu__mega" { (megamenu.prepare(cx)) } } diff --git a/pagetop/src/base/component/menu/megamenu.rs b/pagetop/src/base/component/menu/megamenu.rs index 946ef060..b65ffb55 100644 --- a/pagetop/src/base/component/menu/megamenu.rs +++ b/pagetop/src/base/component/menu/megamenu.rs @@ -38,7 +38,7 @@ impl ComponentTrait 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="pt-menu__groups" { (self.groups().prepare(cx)) } }) diff --git a/pagetop/src/base/component/menu/menu_main.rs b/pagetop/src/base/component/menu/menu_main.rs index c216444e..25a9ecae 100644 --- a/pagetop/src/base/component/menu/menu_main.rs +++ b/pagetop/src/base/component/menu/menu_main.rs @@ -46,28 +46,28 @@ impl ComponentTrait for Menu { cx.set_param::(PARAM_INCLUDE_ICONS, true); PrepareMarkup::With(html! { - div id=[self.id()] class="menu-container" { - div class="menu-wrapper" { - div class="menu-main" { - div class="menu-overlay" {} - nav class="menu" { - div class="menu-header" { - button type="button" class="menu-arrow" { + div id=[self.id()] class="pt-menu__container" { + div class="pt-menu__wrapper" { + div class="pt-menu__main" { + div class="pt-menu__overlay" {} + nav class="pt-menu__nav" { + div class="pt-menu__header" { + button type="button" class="pt-menu__arrow" { i class="bi-chevron-left" {} } - div class="menu-title" {} - button type="button" class="menu-close" { + div class="pt-menu__title" {} + button type="button" class="pt-menu__close" { i class="bi-x" {} } } - ul class="menu-section" { + ul class="pt-menu__section" { (self.items().prepare(cx)) } } } button type="button" - class="menu-trigger" + class="pt-menu__trigger" title=[L10n::t("menu_toggle", &LOCALES_PAGETOP).into_string(cx)] { span {} span {} span {} diff --git a/pagetop/src/base/component/menu/submenu.rs b/pagetop/src/base/component/menu/submenu.rs index 70de3880..dbd78ace 100644 --- a/pagetop/src/base/component/menu/submenu.rs +++ b/pagetop/src/base/component/menu/submenu.rs @@ -40,9 +40,9 @@ impl ComponentTrait 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="pt-menu__items" { @if let Some(title) = self.title().get().into_string(cx) { - h4 class="menu-title" { (title) } + h4 class="pt-menu__title" { (title) } } ul { (self.items().prepare(cx)) diff --git a/pagetop/static/base/css/menu.css b/pagetop/static/base/css/menu.css index ba525dfb..f5dcbd86 100644 --- a/pagetop/static/base/css/menu.css +++ b/pagetop/static/base/css/menu.css @@ -1,4 +1,4 @@ -.menu-container { +.pt-menu__container { width: 100%; height: auto; margin: 0; @@ -6,14 +6,14 @@ z-index: 999; border: none; outline: none; - background: var(--menu--color-background); + background: var(--pt-menu--color-bg); } -.menu-wrapper { - margin-right: var(--menu--item-gap); +.pt-menu__wrapper { + margin-right: var(--pt-menu--item-gap); } -.menu-wrapper a, -.menu-wrapper button { +.pt-menu__wrapper a, +.pt-menu__wrapper button { cursor: pointer; border: none; outline: none; @@ -21,96 +21,96 @@ text-decoration: none; } -.menu-main .menu ul { +.pt-menu__nav ul { margin: 0; padding: 0; } -.menu-main .menu li { +.pt-menu__nav li { display: inline-block; margin: 0 0 0 1.5rem; - padding: var(--menu--line-padding) 0; - line-height: var(--menu--line-height); + padding: var(--pt-menu--line-padding) 0; + line-height: var(--pt-menu--line-height); list-style: none; list-style-type: none; } -.menu-main .menu li.menu-label, -.menu-main .menu li > a { +.pt-menu__nav li.pt-menu__label, +.pt-menu__nav li > a { position: relative; font-weight: 500; - color: var(--menu--color-base); + color: var(--pt-color); text-rendering: optimizeLegibility; } -.menu-main .menu li > a { +.pt-menu__nav li > a { border: none; outline: none; -webkit-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } -.menu-main .menu li:hover > a { - color: var(--menu--color-highlight); +.pt-menu__nav li:hover > a { + color: var(--pt-menu--color-highlight); } -.menu-main .menu li > a > i.menu-icon { +.pt-menu__nav li > a > i.pt-menu__icon { margin-left: 0.25rem; } -.menu-main .menu li .menu-subs { +.pt-menu__nav li .pt-menu__subs { position: absolute; max-width: 100%; height: auto; padding: 1rem 2rem; border: none; outline: none; - background: var(--menu--color-background); - border-radius: var(--border-radius); - border-top: 3px solid var(--menu--color-highlight); + background: var(--pt-menu--color-bg); + border-radius: var(--pt-menu--border-radius); + border-top: 3px solid var(--pt-menu--color-highlight); z-index: 500; opacity: 0; visibility: hidden; - -webkit-box-shadow: 0 4px 6px -1px var(--menu--color-border), 0 2px 4px -1px var(--menu--color-shadow); - box-shadow: 0 4px 6px -1px var(--menu--color-border), 0 2px 4px -1px var(--menu--color-shadow); + -webkit-box-shadow: 0 4px 6px -1px var(--pt-menu--color-border), 0 2px 4px -1px var(--pt-menu--color-shadow); + box-shadow: 0 4px 6px -1px var(--pt-menu--color-border), 0 2px 4px -1px var(--pt-menu--color-shadow); -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } -.menu-main .menu li.menu-children:hover > .menu-subs { +.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs { margin-top: 0.4rem; opacity: 1; visibility: visible; } -.menu-main .menu li .menu-items { - min-width: var(--menu--item-width-min); - max-width: var(--menu--item-width-max); +.pt-menu__nav li .pt-menu__items { + min-width: var(--pt-menu--item-width-min); + max-width: var(--pt-menu--item-width-max); } -.menu-main .menu li .menu-items .menu-title { +.pt-menu__nav li .pt-menu__items .pt-menu__title { font-family: inherit; font-size: 1rem; font-weight: 500; margin: 0; - padding: var(--menu--line-padding) 0; - line-height: var(--menu--line-height); + padding: var(--pt-menu--line-padding) 0; + line-height: var(--pt-menu--line-height); border: none; outline: none; - color: var(--menu--color-highlight); + color: var(--pt-menu--color-highlight); text-transform: uppercase; text-rendering: optimizeLegibility; } -.menu-main .menu li .menu-items li { +.pt-menu__nav li .pt-menu__items li { display: block; margin-left: 0; } -.menu-main .menu li .menu-mega { +.pt-menu__nav li .pt-menu__mega { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } -.menu-main .menu li .menu-groups { +.pt-menu__nav li .pt-menu__groups { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -118,20 +118,20 @@ flex-wrap: nowrap; } -.menu-header, -.menu-trigger { +.pt-menu__header, +.pt-menu__trigger { display: none; } /* Applies <= 992px */ @media only screen and (max-width: 62em) { - .menu-wrapper { - margin-left: var(--menu--item-gap); + .pt-menu__wrapper { + margin-left: var(--pt-menu--item-gap); } - .menu-trigger { + .pt-menu__trigger { cursor: pointer; - width: var(--menu--trigger-width); - height: var(--menu--item-height); + width: var(--pt-menu--trigger-width); + height: var(--pt-menu--item-height); border: none; outline: none; background: none; @@ -141,23 +141,23 @@ flex-direction: column; justify-content: center; } - .menu-trigger span { + .pt-menu__trigger span { width: 100%; height: 2px; margin: 12.675% 0; - border-radius: var(--border-radius); - background: var(--menu--color-base); + border-radius: var(--pt-border-radius); + background: var(--pt-color); } - .menu-main .menu { + .pt-menu__nav { position: fixed; top: 0; left: 0; - width: var(--menu--side-width); + width: var(--pt-menu--side-width); height: 100%; z-index: 1099; overflow: hidden; - background: var(--menu--color-background); + background: var(--pt-menu--color-bg); -webkit-transform: translate(-100%); -ms-transform: translate(-100%); transform: translate(-100%); @@ -165,38 +165,38 @@ -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } - .menu-main .menu.active { + .pt-menu__main .pt-menu__nav.active { -webkit-transform: translate(0%); -ms-transform: translate(0%); transform: translate(0%); } - .menu-main .menu li { + .pt-menu__nav li { display: block; margin: 0; padding: 0; } - .menu-main .menu li.menu-label, - .menu-main .menu li > a { + .pt-menu__nav li.pt-menu__label, + .pt-menu__nav li > a { display: block; - padding: var(--menu--line-padding) var(--menu--item-height) var(--menu--line-padding) var(--menu--item-gap); - border-bottom: 1px solid var(--menu--color-border); + padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap); + border-bottom: 1px solid var(--pt-menu--color-border); } - .menu-main .menu li ul li.menu-label, - .menu-main .menu li ul li > a { + .pt-menu__nav li ul li.pt-menu__label, + .pt-menu__nav li ul li > a { border-bottom: 0; } - .menu-main .menu li > a > i.menu-icon { + .pt-menu__nav li > a > i.pt-menu__icon { position: absolute; - top: var(--menu--line-padding); - right: var(--menu--line-padding); + top: var(--pt-menu--line-padding); + right: var(--pt-menu--line-padding); font-size: 1.25rem; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } - .menu-main .menu li .menu-subs { + .pt-menu__nav li .pt-menu__subs { position: absolute; display: none; top: 0; @@ -217,23 +217,23 @@ -webkit-box-shadow: none; box-shadow: none; } - .menu-main .menu li .menu-subs.active { + .pt-menu__nav li .pt-menu__subs.active { display: block; } - .menu-main .menu li.menu-children:hover > .menu-subs { + .pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs { margin-top: 0; } - .menu-main .menu li .menu-items .menu-title { - padding: var(--menu--line-padding) var(--menu--item-height) var(--menu--line-padding) var(--menu--item-gap); + .pt-menu__nav li .pt-menu__items .pt-menu__title { + padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap); } - .menu-main .menu li .menu-groups { + .pt-menu__nav li .pt-menu__groups { display: block; } - .menu-main .menu .menu-header { + .pt-menu__nav .pt-menu__header { position: relative; position: -webkit-sticky; position: sticky; @@ -247,24 +247,24 @@ -ms-flex-pack: justify; justify-content: space-between; top: 0; - height: var(--menu--item-height); - border-bottom: 1px solid var(--menu--color-border); - background: var(--menu--color-background); + height: var(--pt-menu--item-height); + border-bottom: 1px solid var(--pt-menu--color-border); + background: var(--pt-menu--color-bg); z-index: 501; } - .menu-main .menu .menu-header .menu-title { - padding: var(--menu--line-padding); + .pt-menu__nav .pt-menu__header .pt-menu__title { + padding: var(--pt-menu--line-padding); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .menu-main .menu .menu-header .menu-close, - .menu-main .menu .menu-header .menu-arrow { - width: var(--menu--item-height); - min-width: var(--menu--item-height); - height: var(--menu--item-height); - line-height: var(--menu--item-height); - color: var(--menu--color-base); + .pt-menu__nav .pt-menu__header .pt-menu__close, + .pt-menu__nav .pt-menu__header .pt-menu__arrow { + width: var(--pt-menu--item-height); + min-width: var(--pt-menu--item-height); + height: var(--pt-menu--item-height); + line-height: var(--pt-menu--item-height); + color: var(--pt-color); cursor: pointer; display: -webkit-box; display: -ms-flexbox; @@ -274,20 +274,20 @@ align-items: center; justify-content: center; } - .menu-main .menu .menu-header .menu-close { + .pt-menu__nav .pt-menu__header .pt-menu__close { font-size: 2.25rem; - border-left: 1px solid var(--menu--color-border); + border-left: 1px solid var(--pt-menu--color-border); } - .menu-main .menu .menu-header .menu-arrow { + .pt-menu__nav .pt-menu__header .pt-menu__arrow { font-size: 1.25rem; - border-right: 1px solid var(--menu--color-border); + border-right: 1px solid var(--pt-menu--color-border); display: none; } - .menu-main .menu .menu-header.active .menu-arrow { + .pt-menu__nav .pt-menu__header.active .pt-menu__arrow { display: flex; } - .menu-main .menu .menu-section { + .pt-menu__nav .pt-menu__section { height: 100%; overflow-y: auto; overflow-x: hidden; @@ -295,7 +295,7 @@ margin: 0; } - .menu-overlay { + .pt-menu__overlay { position: fixed; top: 0; left: 0; @@ -309,7 +309,7 @@ -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } - .menu-overlay.active { + .pt-menu__overlay.active { opacity: 1; visibility: visible; } diff --git a/pagetop/static/base/css/root.css b/pagetop/static/base/css/root.css index 2d5462dd..03827430 100644 --- a/pagetop/static/base/css/root.css +++ b/pagetop/static/base/css/root.css @@ -16,33 +16,33 @@ --max-width: 84.375rem; --max-bg-color: 98.125rem; */ - --sp: 1.125rem; + --pt-gap: 1.125rem; /* --content-left: 5.625rem; - --site-header-height-wide: var(--sp10); - --container-padding: var(--sp); + --site-header-height-wide: var(--pt-gap10); + --container-padding: var(--pt-gap); */ } /* @media (min-width: 75rem) { :root { - --container-padding:var(--sp2); + --container-padding:var(--pt-gap2); } } :root { --scrollbar-width: 0px; --grid-col-count: 6; - --grid-gap: var(--sp); + --grid-gap: var(--pt-gap); --grid-gap-count: calc(var(--grid-col-count) - 1); - --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); + --grid-full-width: calc(100vw - var(--pt-gap2) - var(--scrollbar-width)); --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); } @media (min-width: 43.75rem) { :root { --grid-col-count:14; - --grid-gap: var(--sp2); + --grid-gap: var(--pt-gap2); } } @@ -54,37 +54,37 @@ @media (min-width: 75rem) { :root { - --grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); + --grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--pt-gap4)); } } @media (min-width: 90rem) { :root { - --grid-full-width:calc(var(--max-width) - var(--sp4)); + --grid-full-width:calc(var(--max-width) - var(--pt-gap4)); } } */ :root { - --sp0-25: calc(0.25 * var(--sp)); /* - --sp0-5: calc(0.5 * var(--sp)); + --pt-gap-0-25: calc(0.25 * var(--pt-gap)); + --pt-gap-0-5: calc(0.5 * var(--pt-gap)); */ - --sp0-75: calc(0.75 * var(--sp)); + --pt-gap-0-75: calc(0.75 * var(--pt-gap)); +/* + --pt-gap-1-5: calc(1.5 * var(--pt-gap)); + --pt-gap-2: calc(2 * var(--pt-gap)); + --pt-gap-2-5: calc(2.5 * var(--pt-gap)); + --pt-gap-3: calc(3 * var(--pt-gap)); + --pt-gap-4: calc(4 * var(--pt-gap)); + --pt-gap-5: calc(5 * var(--pt-gap)); + --pt-gap-6: calc(6 * var(--pt-gap)); + --pt-gap-7: calc(7 * var(--pt-gap)); + --pt-gap-8: calc(8 * var(--pt-gap)); + --pt-gap-9: calc(9 * var(--pt-gap)); + --pt-gap-10: calc(10 * var(--pt-gap)); + --pt-gap-11: calc(11 * var(--pt-gap)); + --pt-gap-12: calc(12 * var(--pt-gap)); /* - --sp1: calc(1 * var(--sp)); - --sp1-5: calc(1.5 * var(--sp)); - --sp2: calc(2 * var(--sp)); - --sp2-5: calc(2.5 * var(--sp)); - --sp3: calc(3 * var(--sp)); - --sp4: calc(4 * var(--sp)); - --sp5: calc(5 * var(--sp)); - --sp6: calc(6 * var(--sp)); - --sp7: calc(7 * var(--sp)); - --sp8: calc(8 * var(--sp)); - --sp9: calc(9 * var(--sp)); - --sp10: calc(10 * var(--sp)); - --sp11: calc(11 * var(--sp)); - --sp12: calc(12 * var(--sp)); --color--gray-hue: 201; --color--gray-saturation: 15%; --color--gray-5: hsl(var(--color--gray-hue),var(--color--gray-saturation),5%); @@ -115,22 +115,23 @@ --color--red: #e33f1e; --color--gold: #fdca40; --color--green: #3fa21c; - --header-height-wide-when-fixed: calc(6 * var(--sp)); + --header-height-wide-when-fixed: calc(6 * var(--pt-gap)); --mobile-nav-width: 31.25rem; */ - --border-radius: 0.1875rem; + --pt-border-radius: 0.1875rem; - --menu--color-background: #fafafa; - --menu--color-base: #121212; - --menu--color-highlight: #e91e63; - --menu--color-border: rgba(0, 0, 0, 0.1); - --menu--color-shadow: rgba(0, 0, 0, 0.06); - --menu--line-padding: 0.625rem; - --menu--line-height: 1.875rem; - --menu--item-height: calc(var(--menu--line-padding) + var(--menu--line-height)); - --menu--item-width-min: 14rem; - --menu--item-width-max: 20rem; - --menu--item-gap: 1rem; - --menu--trigger-width: var(--menu--item-height); - --menu--side-width: 20rem; + + --pt-menu--color-bg: #fafafa; + --pt-menu--color-highlight: #e91e63; + --pt-menu--color-border: rgba(0, 0, 0, 0.1); + --pt-menu--color-shadow: rgba(0, 0, 0, 0.06); + --pt-menu--line-padding: 0.625rem; + --pt-menu--line-height: 1.875rem; + --pt-menu--item-height: calc(var(--pt-menu--line-padding) + var(--pt-menu--line-height)); + --pt-menu--item-width-min: 14rem; + --pt-menu--item-width-max: 20rem; + --pt-menu--item-gap: 1rem; + --pt-menu--border-radius: 0.625rem; + --pt-menu--trigger-width: var(--pt-menu--item-height); + --pt-menu--side-width: 20rem; } diff --git a/pagetop/static/base/css/styles.css b/pagetop/static/base/css/styles.css index b3a42dc0..79f2d8ad 100644 --- a/pagetop/static/base/css/styles.css +++ b/pagetop/static/base/css/styles.css @@ -18,7 +18,7 @@ .site-branding-wrapper { display: flex; align-items: flex-end; - column-gap: var(--sp0-75); + column-gap: var(--pt-gap-0-75); } .site-branding-name { letter-spacing: 0.02em; diff --git a/pagetop/static/base/js/menu.js b/pagetop/static/base/js/menu.js index 8fff4f8b..1ad63de3 100644 --- a/pagetop/static/base/js/menu.js +++ b/pagetop/static/base/js/menu.js @@ -1,15 +1,15 @@ -function menuShowChildren(nav, children) { - let submenu = children[0].querySelector('.menu-subs'); +function pt_menu__showChildren(nav, children) { + let submenu = children[0].querySelector('.pt-menu__subs'); submenu.classList.add('active'); submenu.style.animation = 'slideLeft 0.5s ease forwards'; let title = children[0].querySelector('i').parentNode.childNodes[0].textContent; - nav.querySelector('.menu-title').innerHTML = title; - nav.querySelector('.menu-header').classList.add('active'); + nav.querySelector('.pt-menu__title').innerHTML = title; + nav.querySelector('.pt-menu__header').classList.add('active'); } -function menuHideChildren(nav, children) { - let submenu = children[0].querySelector('.menu-subs'); +function pt_menu__hideChildren(nav, children) { + let submenu = children[0].querySelector('.pt-menu__subs'); submenu.style.animation = 'slideRight 0.5s ease forwards'; setTimeout(() => { submenu.classList.remove('active'); @@ -19,70 +19,70 @@ function menuHideChildren(nav, children) { children.shift(); if (children.length > 0) { let title = children[0].querySelector('i').parentNode.childNodes[0].textContent; - nav.querySelector('.menu-title').innerHTML = title; + nav.querySelector('.pt-menu__title').innerHTML = title; } else { - nav.querySelector('.menu-header').classList.remove('active'); - nav.querySelector('.menu-title').innerHTML = ''; + nav.querySelector('.pt-menu__header').classList.remove('active'); + nav.querySelector('.pt-menu__title').innerHTML = ''; } } -function menuToggle(nav, overlay) { +function pt_menu__toggle(nav, overlay) { nav.classList.toggle('active'); overlay.classList.toggle('active'); } -function menuReset(menu, nav) { - nav.querySelector('.menu-header').classList.remove('active'); - nav.querySelector('.menu-title').innerHTML = ''; - menu.querySelectorAll('.menu-subs').forEach(submenu => { +function pt_menu__reset(menu, nav) { + nav.querySelector('.pt-menu__header').classList.remove('active'); + nav.querySelector('.pt-menu__title').innerHTML = ''; + menu.querySelectorAll('.pt-menu__subs').forEach(submenu => { submenu.classList.remove('active'); submenu.style.removeProperty("animation"); }); } -document.querySelectorAll('.menu-container').forEach(menu => { +document.querySelectorAll('.pt-menu__container').forEach(menu => { let menuChildren = []; - const menuNav = menu.querySelector('.menu'); - const menuOverlay = menu.querySelector('.menu-overlay'); + const menuNav = menu.querySelector('.pt-menu__nav'); + const menuOverlay = menu.querySelector('.pt-menu__overlay'); - menu.querySelector('.menu-section').addEventListener('click', (e) => { + menu.querySelector('.pt-menu__section').addEventListener('click', (e) => { if (!menuNav.classList.contains('active')) { return; } - let target = e.target.closest('.menu-children'); + let target = e.target.closest('.pt-menu__children'); if (target && target != menuChildren[0]) { menuChildren.unshift(target); - menuShowChildren(menuNav, menuChildren); + pt_menu__showChildren(menuNav, menuChildren); } }); - menu.querySelector('.menu-arrow').addEventListener('click', () => { - menuHideChildren(menuNav, menuChildren); + menu.querySelector('.pt-menu__arrow').addEventListener('click', () => { + pt_menu__hideChildren(menuNav, menuChildren); }); - menu.querySelector('.menu-close').addEventListener('click', () => { - menuToggle(menuNav, menuOverlay); - menuReset(menu, menuNav); + menu.querySelector('.pt-menu__close').addEventListener('click', () => { + pt_menu__toggle(menuNav, menuOverlay); setTimeout(() => { + pt_menu__reset(menu, menuNav); menuChildren = []; }, 300); }); - menu.querySelector('.menu-trigger').addEventListener('click', () => { - menuToggle(menuNav, menuOverlay); + menu.querySelector('.pt-menu__trigger').addEventListener('click', () => { + pt_menu__toggle(menuNav, menuOverlay); }); menuOverlay.addEventListener('click', () => { - menuToggle(menuNav, menuOverlay); + pt_menu__toggle(menuNav, menuOverlay); }); window.onresize = function () { if (this.innerWidth >= 992) { if (menuNav.classList.contains('active')) { - menuToggle(menuNav, menuOverlay); - menuReset(menu, menuNav); + pt_menu__toggle(menuNav, menuOverlay); setTimeout(() => { + pt_menu__reset(menu, menuNav); menuChildren = []; }, 300); }