Add menu item counter to config

stroupaloop · Jan 31, 2019 · 4254f4c · 4254f4c
1 parent 02f9e07
commit 4254f4c
Show file tree

Hide file tree

Showing 13 changed files with 432 additions and 28 deletions.
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
@@ -1,5 +1,28 @@
 <nav class="menu">
-  <ul class="menu__inner">
+  <ul class="menu__inner menu__inner--desktop">
+    {{ if $.Site.Params.showMenuItems }}
+      {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
+        <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+      {{ end }}
+      <ul class="menu__sub-inner">
+        {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
+          <li class="menu__sub-inner-more-trigger">{{ $.Site.Params.MenuMore }} ▾</li>
+
+          <ul class="menu__sub-inner-more hidden">
+            {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
+              <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+            {{ end }}
+          </ul>
+        {{ end }}
+      </ul>
+    {{ else }}
+      {{ range $.Site.Menus.main }}
+        <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+      {{ end }}
+    {{ end }}
+  </ul>
+
+  <ul class="menu__inner menu__inner--mobile">
     {{ range $.Site.Menus.main }}
       <li><a href="{{ .URL }}">{{ .Name }}</a></li>
     {{ end }}

diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "postcss-color-mod-function": "^3.0.3",
     "postcss-import": "^11.1.0",
     "postcss-loader": "^2.0.5",
+    "postcss-mixins": "^6.2.1",
     "postcss-nested": "^3.0.0",
     "postcss-preset-env": "^5.2.2",
     "postcss-reporter": "^5.0.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -5,11 +5,13 @@ const postCSSPresetEnv = require("postcss-preset-env");
 const browsers = require("browserslist");
 const cssnano = require("cssnano");
 const color = require("postcss-color-mod-function");
+const mixins = require("postcss-mixins");
 
 module.exports = () => ({
   plugins: [
     url,
     imports,
+    mixins,
     nested,
     postCSSPresetEnv({
       stage: 1,

diff --git a/source/css/header.css b/source/css/header.css
@@ -1,3 +1,15 @@
+@define-mixin menu {
+  position: absolute;
+  background: var(--background);
+  box-shadow: var(--shadow);
+  color: white;
+  border: 2px solid;
+  margin: 0;
+  padding: 10px;
+  list-style: none;
+  z-index: 99;
+}
+
 .header {
   display: flex;
   flex-direction: column;
@@ -28,17 +40,14 @@
   }
 
   .menu {
+    --shadow-color: color-mod(var(--background) a(80%));
+    --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
     margin: 20px 0;
 
     @media (--phone) {
-      position: absolute;
-      background: var(--background);
-      border: 2px solid;
+      @mixin menu;
       top: 50px;
       right: 0;
-      margin: 0;
-      padding: 10px;
-      z-index: 99;
     }
 
     &__inner {
@@ -48,6 +57,20 @@
       margin: 0;
       padding: 0;
 
+      &--desktop {
+        @media (--phone) {
+          display: none;
+        }
+      }
+
+      &--mobile {
+        display: none;
+
+        @media (--phone) {
+          display: block;
+        }
+      }
+
       li {
         &:not(:last-of-type) {
           margin-right: 20px;
@@ -68,6 +91,35 @@
       }
     }
 
+    &__sub-inner {
+      position: relative;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      &:not(:only-child) {
+        margin-left: 20px;
+      }
+
+      &-more {
+        @mixin menu;
+        top: 35px;
+        left: 0;
+
+        &-trigger {
+          color: var(--accent);
+          user-select: none;
+          cursor: pointer;
+        }
+
+        li {
+          margin: 0;
+          padding: 5px;
+          white-space: nowrap;
+        }
+      }
+    }
+
     &-trigger {
       color: var(--accent);
       border: 2px solid;

diff --git a/source/js/menu.js b/source/js/menu.js
@@ -1,16 +1,53 @@
-// Mobile menu
-
-const menuTrigger = document.querySelector(".menu-trigger");
+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 isMobileMenu = () => {
-  menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
+  mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile());
   menu && menu.classList.toggle("hidden", isMobile());
+  menuMore && menuMore.classList.toggle("hidden", !isMobile());
 };
 
+// Common
+
+menu.addEventListener("click", e => e.stopPropagation());
+menuMore.addEventListener("click", e => e.stopPropagation());
+
 isMobileMenu();
 
-menuTrigger && menuTrigger.addEventListener("click", () => menu && menu.classList.toggle("hidden"));
+document.body.addEventListener("click", () => {
+  if (!isMobile() && !menuMore.classList.contains("hidden")) {
+    console.log("desktop");
+    menuMore.classList.add("hidden");
+  } else if (isMobile() && !menu.classList.contains("hidden")) {
+    console.log("mobile");
+    menu.classList.add("hidden");
+  }
+});
 
 window.addEventListener("resize", isMobileMenu);
+
+// Mobile menu
+
+mobileMenuTrigger &&
+  mobileMenuTrigger.addEventListener("click", e => {
+    e.stopPropagation();
+    menu && menu.classList.toggle("hidden");
+  });
+
+// 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;
+    }
+  });