Add menu item counter to config

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;

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