commit 39ba3a4ea9535d0e116a79a0def48315d9cdb7b7
parent 09628b6b3dce145d85b21e6cc9b60b952fbedc55
Author: panr <radoslaw.koziel@gmail.com>
Date: Tue, 8 Nov 2022 00:34:01 +0100
Simplify menus
Diffstat:
10 files changed, 229 insertions(+), 243 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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");
- }
+ allMenus.forEach(menu => {
+ if (menu.classList.contains("open")) {
+ menu.classList.remove("open");
+ }
+ });
});
-window.addEventListener("resize", handleMenuClasses);
-
-// Mobile menu
-
-mobileMenuTrigger &&
- mobileMenuTrigger.addEventListener("click", (e) => {
- e.stopPropagation();
- menu && menu.classList.toggle("hidden-on-mobile");
+// Reset menus on resize
+window.addEventListener("resize", () => {
+ allMenus.forEach(menu => {
+ menu.classList.remove("open");
});
+});
-// Desktop menu
+// Handle desktop menu
+allMenus.forEach(menu => {
+ const trigger = menu.querySelector(".menu__trigger");
+ const dropdown = menu.querySelector(".menu__dropdown");
-desktopMenuTrigger &&
- desktopMenuTrigger.addEventListener("click", (e) => {
+ trigger.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;
+ 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
@@ -13,10 +13,9 @@
</footer>
{{ $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 }}
<script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -4,7 +4,10 @@
{{ partial "logo.html" . }}
</div>
{{ if len $.Site.Menus }}
- <div class="menu-trigger">menu</div>
+ {{ partial "mobile-menu.html" . }}
+ {{ end }}
+ {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
+ {{ partial "language-menu.html" . }}
{{ end }}
</div>
{{ if len $.Site.Menus }}
diff --git a/layouts/partials/language-menu.html b/layouts/partials/language-menu.html
@@ -0,0 +1,10 @@
+<ul class="menu menu--desktop menu--language-selector">
+ <li class="menu__trigger">{{ .Language.LanguageName }} ▾</li>
+ <li>
+ <ul class="menu__dropdown">
+ {{ range $.Site.Home.AllTranslations }}
+ <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+ {{ end }}
+ </ul>
+ </li>
+</ul>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
@@ -1,5 +1,5 @@
-<nav class="menu hidden-on-mobile">
- <ul class="menu__inner menu__inner--desktop">
+<nav class="navigation-menu">
+ <ul class="navigation-menu__inner menu--desktop">
{{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
{{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
{{ if not .HasChildren }}
@@ -8,10 +8,10 @@
{{ end }}
{{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
<li>
- <ul class="menu__sub-inner">
- <li class="menu__sub-inner-more-trigger">{{ $.Site.Params.MenuMore }} ▾</li>
+ <ul class="menu">
+ <li class="menu__trigger">{{ $.Site.Params.MenuMore }} ▾</li>
<li>
- <ul class="menu__sub-inner-more hidden">
+ <ul class="menu__dropdown">
{{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
{{ if not .HasChildren }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
@@ -30,39 +30,4 @@
{{ end }}
{{ end }}
</ul>
- <span class="spacer"></span>
- <ul class="menu__inner menu__inner--desktop">
- {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
- <li>
- <ul class="language-selector">
- <li class="language-selector-current">
- {{ .Language.LanguageName }} ▾
- </li>
- <li>
- <ul class="language-selector__more hidden">
- {{ range $.Site.Home.AllTranslations }}
- <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
- {{ end }}
- </ul>
- </li>
- </ul>
- </li>
- {{ end }}
- </ul>
-
- <ul class="menu__inner menu__inner--mobile">
- {{ range $.Site.Menus.main }}
- {{ if not .HasChildren }}
- <li><a href="{{ .URL }}">{{ .Name }}</a></li>
- {{ end }}
- {{ end }}
- {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
- <hr />
- {{ range $.Site.Home.AllTranslations }}
- <li>
- <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
- </li>
- {{ end }}
- {{ end }}
- </ul>
</nav>
diff --git a/layouts/partials/mobile-menu.html b/layouts/partials/mobile-menu.html
@@ -0,0 +1,20 @@
+<ul class="menu menu--mobile">
+ <li class="menu__trigger">Menu ▾</li>
+ <li>
+ <ul class="menu__dropdown">
+ {{ range $.Site.Menus.main }}
+ {{ if not .HasChildren }}
+ <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+ {{ end }}
+ {{ end }}
+ {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
+ <hr />
+ {{ range $.Site.Home.AllTranslations }}
+ <li>
+ <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+ </li>
+ {{ end }}
+ {{ end }}
+ </ul>
+ </li>
+</ul>