From 39ba3a4ea9535d0e116a79a0def48315d9cdb7b7 Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 8 Nov 2022 00:34:01 +0100 Subject: [PATCH] Simplify menus --- assets/css/header.scss | 140 ------------------------- assets/css/menu.scss | 156 ++++++++++++++++++++++++++++ assets/css/style.scss | 1 + assets/js/languageSelector.js | 23 ---- assets/js/menu.js | 83 +++++++-------- layouts/partials/footer.html | 3 +- layouts/partials/header.html | 5 +- layouts/partials/language-menu.html | 10 ++ layouts/partials/menu.html | 45 +------- layouts/partials/mobile-menu.html | 20 ++++ 10 files changed, 236 insertions(+), 250 deletions(-) create mode 100644 assets/css/menu.scss delete mode 100644 assets/js/languageSelector.js create mode 100644 layouts/partials/language-menu.html create mode 100644 layouts/partials/mobile-menu.html diff --git a/assets/css/header.scss b/assets/css/header.scss index edcc5f9..61c45a8 100644 --- a/assets/css/header.scss +++ b/assets/css/header.scss @@ -1,17 +1,3 @@ -@mixin menu { - $shadow-color: opacify($background, .8); - $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color; - position: absolute; - background: $background; - box-shadow: $shadow; - color: white; - border: 2px solid; - margin: 0; - padding: 10px; - list-style: none; - z-index: 99; -} - .header { display: flex; flex-direction: column; @@ -45,130 +31,4 @@ text-decoration: none; } } - - .menu { - display: flex; - align-items: flex-start; - margin: 20px 1px; - - @media ($phone) { - @include menu; - top: 50px; - right: 0; - - &.hidden-on-mobile { - display: none; - } - } - - &__inner { - display: flex; - flex-wrap: wrap; - list-style: none; - margin: 0; - padding: 0; - - &--desktop { - @media ($phone) { - display: none; - } - } - - &--mobile { - display: none; - - @media ($phone) { - display: block; - } - } - - li { - &:not(:last-of-type) { - margin-right: 20px; - margin-bottom: 10px; - flex: 0 0 auto; - } - } - - @media ($phone) { - flex-direction: column; - align-items: flex-start; - padding: 0; - - li { - margin: 0; - padding: 5px; - } - } - } - - &__sub-inner { - position: relative; - list-style: none; - padding: 0; - margin: 0; - - &:not(:only-child) { - margin-left: 20px; - } - - &-more { - @include menu; - top: 0; - left: 0; - - &-trigger { - color: $accent; - user-select: none; - cursor: pointer; - } - - li { - margin: 0; - padding: 5px; - white-space: nowrap; - } - } - } - - .spacer { - flex-grow: 1 !important; - } - - .language-selector { - position: relative; - list-style: none; - margin: 0; - - &-current { - list-style-type: none; - display: flex; - flex-direction: row; - color: $accent; - cursor: pointer; - margin-right: 0 !important; - } - - &__more { - @include menu; - top: 0; - right: 0; - } - } - - &-trigger { - display: none; - color: $accent; - border: 2px solid; - margin-left: 10px; - height: 100%; - padding: 3px 8px; - position: relative; - cursor: pointer; - - @media ($phone) { - display: block; - } - } - } } diff --git a/assets/css/menu.scss b/assets/css/menu.scss new file mode 100644 index 0000000..e0cd156 --- /dev/null +++ b/assets/css/menu.scss @@ -0,0 +1,156 @@ +@mixin menu { + display: none; + flex-direction: column; + $shadow-color: opacify($background, .8); + $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color; + position: absolute; + background: $background; + box-shadow: $shadow; + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + top: 10px; + left: 0; + list-style: none; + z-index: 99; +} + +@mixin header-menu-trigger { + color: $accent; + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; +} + +.navigation-menu { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin: 20px 1px; + + @media ($phone) { + margin: 0; + } + + &__inner { + display: flex; + flex: 1; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + + > li { + flex: 0 0 auto; + margin-bottom: 10px; + + &:not(:last-of-type) { + margin-right: 20px; + } + } + + @media ($phone) { + flex-direction: column; + align-items: flex-start; + padding: 0; + + li { + margin: 0; + padding: 5px; + } + } + } + + .spacer { + flex-grow: 1 !important; + } +} + +.menu { + display: flex; + flex-direction: column; + position: relative; + list-style: none; + padding: 0; + margin: 0; + + &__trigger { + margin-right: 0 !important; + color: $accent; + user-select: none; + cursor: pointer; + } + + &__dropdown { + @include menu; + + .open & { + display: flex; + } + + > li { + flex: 0 0 auto; + + &:not(:last-of-type) { + margin-bottom: 10px; + } + + a { + display: flex; + padding: 5px; + } + } + } + + &--desktop { + @media ($phone) { + display: none + } + } + + &--mobile { + .menu__trigger { + @include header-menu-trigger; + display: none; + + @media ($phone) { + display: block; + } + } + + .menu__dropdown { + @media ($phone) { + left: auto; + right: 0; + } + } + + li { + flex: 0 0 auto; + + &:not(:last-of-type) { + margin-bottom: 10px; + } + } + } + + &--language-selector { + .menu__trigger { + @include header-menu-trigger; + + @media ($phone) { + display: none; + } + } + + .menu__dropdown { + left: auto; + right: 0; + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index ccdb8a8..f32f759 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -5,6 +5,7 @@ @import "form"; @import "header"; +@import "menu"; @import "logo"; @import "main"; @import "post"; diff --git a/assets/js/languageSelector.js b/assets/js/languageSelector.js deleted file mode 100644 index 23c9acb..0000000 --- a/assets/js/languageSelector.js +++ /dev/null @@ -1,23 +0,0 @@ -const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth"); -const isMobile = () => window.matchMedia(mobileQuery).matches; - -const languageSelector = document.querySelector(".language-selector-current"); -const moreLanguagesContainer = document.querySelector(".language-selector__more"); - -document.body.addEventListener("click", () => { - if ( - !isMobile() && - moreLanguagesContainer && - !moreLanguagesContainer.classList.contains("hidden") - ) { - moreLanguagesContainer.classList.add("hidden"); - } -}); - -languageSelector && - languageSelector.addEventListener("click", (e) => { - if (!isMobile()) { - e.stopPropagation(); - moreLanguagesContainer.classList.toggle("hidden"); - } - }); diff --git a/assets/js/menu.js b/assets/js/menu.js index 24bf45e..3b662e7 100644 --- a/assets/js/menu.js +++ b/assets/js/menu.js @@ -1,49 +1,44 @@ const container = document.querySelector(".container"); -const menu = document.querySelector(".menu"); -const mobileMenuTrigger = document.querySelector(".menu-trigger"); -const desktopMenu = document.querySelector(".menu__inner--desktop"); -const desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger"); -const menuMore = document.querySelector(".menu__sub-inner-more"); -const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth"); -const isMobile = () => window.matchMedia(mobileQuery).matches; -const handleMenuClasses = () => { - menuMore && menuMore.classList.toggle("hidden-on-mobile", !isMobile()); -}; - -// Common - -menu && menu.addEventListener("click", (e) => e.stopPropagation()); -menuMore && menuMore.addEventListener("click", (e) => e.stopPropagation()); - -// handleMenuClasses(); +const allMenus = document.querySelectorAll(".menu"); +// Hide menus on body click document.body.addEventListener("click", () => { - if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) { - menuMore.classList.add("hidden"); - } else if (isMobile() && !menu.classList.contains("hidden")) { - menu.classList.add("hidden"); - } -}); - -window.addEventListener("resize", handleMenuClasses); - -// Mobile menu - -mobileMenuTrigger && - mobileMenuTrigger.addEventListener("click", (e) => { - e.stopPropagation(); - menu && menu.classList.toggle("hidden-on-mobile"); - }); - -// Desktop menu - -desktopMenuTrigger && - desktopMenuTrigger.addEventListener("click", (e) => { - e.stopPropagation(); - menuMore && menuMore.classList.toggle("hidden"); - - if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) { - menuMore.style.left = "auto"; - menuMore.style.right = 0; + allMenus.forEach(menu => { + if (menu.classList.contains("open")) { + menu.classList.remove("open"); } }); +}); + +// Reset menus on resize +window.addEventListener("resize", () => { + allMenus.forEach(menu => { + menu.classList.remove("open"); + }); +}); + +// Handle desktop menu +allMenus.forEach(menu => { + const trigger = menu.querySelector(".menu__trigger"); + const dropdown = menu.querySelector(".menu__dropdown"); + + trigger.addEventListener("click", e => { + e.stopPropagation(); + + if (menu.classList.contains("open")) { + menu.classList.remove("open"); + } else { + // Close all menus... + allMenus.forEach(m => m.classList.remove("open")); + // ...before opening the current one + menu.classList.add("open"); + } + + if (dropdown.getBoundingClientRect().right > container.getBoundingClientRect().right) { + dropdown.style.left = "auto"; + dropdown.style.right = 0; + } + }); + + dropdown.addEventListener("click", e => e.stopPropagation()); +}); diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 4577293..fe25e1a 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -13,10 +13,9 @@ {{ $menu := resources.Get "js/menu.js" | js.Build }} -{{ $languageSelector := resources.Get "js/languageSelector.js" | js.Build }} {{ $prism := resources.Get "js/prism.js" | js.Build }} -{{ $bundle := slice $menu $languageSelector $prism | resources.Concat "bundle.js" | resources.Minify }} +{{ $bundle := slice $menu $prism | resources.Concat "bundle.js" | resources.Minify }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 23214f8..b43e320 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -4,7 +4,10 @@ {{ partial "logo.html" . }} {{ if len $.Site.Menus }} -
menu
+ {{ partial "mobile-menu.html" . }} + {{ end }} + {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }} + {{ partial "language-menu.html" . }} {{ end }} {{ if len $.Site.Menus }} diff --git a/layouts/partials/language-menu.html b/layouts/partials/language-menu.html new file mode 100644 index 0000000..c9f7c66 --- /dev/null +++ b/layouts/partials/language-menu.html @@ -0,0 +1,10 @@ + diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index d0afa4d..41b0d1c 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -1,5 +1,5 @@ -