Simplify menus

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;
-      }
-    }
-  }
 }

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;
+    }
+  }
+}

assets/css/style.scss

@@ -5,6 +5,7 @@
 @import "form";
 
 @import "header";
+@import "menu";
 @import "logo";
 @import "main";
 @import "post";

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");
-    }
-  });

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());
+});

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>
 

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 }}

layouts/partials/language-menu.html

@@ -0,0 +1,10 @@
+<ul class="menu menu--desktop menu--language-selector">
+  <li class="menu__trigger">{{ .Language.LanguageName }}&nbsp;▾</li>
+  <li>
+    <ul class="menu__dropdown">
+      {{ range $.Site.Home.AllTranslations }}
+        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+      {{ end }}
+    </ul>
+  </li>
+</ul>

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 }}&nbsp;▾</li>
+          <ul class="menu">
+            <li class="menu__trigger">{{ $.Site.Params.MenuMore }}&nbsp;▾</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 }}&nbsp;▾
-        </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>

layouts/partials/mobile-menu.html

@@ -0,0 +1,20 @@
+<ul class="menu menu--mobile">
+  <li class="menu__trigger">Menu&nbsp;▾</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>