Add menu trigger to desktop

README.md

@@ -88,6 +88,8 @@ paginate = 5
 
 to `config.toml` file in your Hugo root directory and change params fields. In case you need, here's [a YAML version](https://gist.github.com/panr/9eeea6f595c257febdadc11763e3a6d1).
 
+**NOTE:** Please keep in mind that currently `main menu` doesn't support nesting.
+
 ## How to run your site
 
 From your Hugo root directory run:
@@ -102,7 +104,7 @@ and go to `localhost:1313` in your browser. From now on all the changes you make
 
 If you have to override some of the styles, **you can do this easily** by adding `static/styles.css` in your root directory and point things you want to change.
 
-Otherwise, if you really want to edit the theme, you need to install Node dependencies. To do this, go to the theme directory (from your Hugo root directory):
+Otherwise, if you really want to edit the theme, you need to install Node dependencies. To do so, go to the theme directory (from your Hugo root directory):
 
 ```
 $ cd themes/terminal

layouts/partials/menu.html

@@ -2,29 +2,37 @@
   <ul class="menu__inner menu__inner--desktop">
     {{ if $.Site.Params.showMenuItems }}
       {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
+        {{ if not .HasChildren }}
           <li><a href="{{ .URL }}">{{ .Name }}</a></li>
         {{ end }}
+      {{ 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 }}
+              {{ if not .HasChildren }}
                 <li><a href="{{ .URL }}">{{ .Name }}</a></li>
               {{ end }}
+            {{ end }}
           </ul>
         {{ end }}
       </ul>
     {{ else }}
       {{ range $.Site.Menus.main }}
+        {{ if not .HasChildren }}
           <li><a href="{{ .URL }}">{{ .Name }}</a></li>
         {{ end }}
       {{ end }}
+    {{ 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 }}
   </ul>
 </nav>

source/css/main.css

@@ -205,6 +205,7 @@ ol ol {
   padding: 40px;
   border-right: 1px solid rgba(255, 255, 255, .1);
   max-width: 864px;
+  min-height: 100vh;
 
   @media (--phone) {
     padding: 20px;

source/js/menu.js

@@ -14,17 +14,15 @@ const isMobileMenu = () => {
 
 // Common
 
-menu.addEventListener("click", e => e.stopPropagation());
-menuMore.addEventListener("click", e => e.stopPropagation());
+menu && menu.addEventListener("click", e => e.stopPropagation());
+menuMore && menuMore.addEventListener("click", e => e.stopPropagation());
 
 isMobileMenu();
 
 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");
   }
 });

static/assets/main.js

@@ -106,7 +106,7 @@ eval("// Add your script here\n\n\n//# sourceURL=webpack:///./source/js/main.js?
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar container = document.querySelector(\".container\");\nvar menu = document.querySelector(\".menu\");\nvar mobileMenuTrigger = document.querySelector(\".menu-trigger\");\nvar desktopMenu = document.querySelector(\".menu__inner--desktop\");\nvar desktopMenuTrigger = document.querySelector(\".menu__sub-inner-more-trigger\");\nvar menuMore = document.querySelector(\".menu__sub-inner-more\");\nvar mobileQuery = getComputedStyle(document.body).getPropertyValue(\"--phoneWidth\");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nvar isMobileMenu = function isMobileMenu() {\n  mobileMenuTrigger && mobileMenuTrigger.classList.toggle(\"hidden\", !isMobile());\n  menu && menu.classList.toggle(\"hidden\", isMobile());\n  menuMore && menuMore.classList.toggle(\"hidden\", !isMobile());\n}; // Common\n\n\nmenu.addEventListener(\"click\", function (e) {\n  return e.stopPropagation();\n});\nmenuMore.addEventListener(\"click\", function (e) {\n  return e.stopPropagation();\n});\nisMobileMenu();\ndocument.body.addEventListener(\"click\", function () {\n  if (!isMobile() && !menuMore.classList.contains(\"hidden\")) {\n    console.log(\"desktop\");\n    menuMore.classList.add(\"hidden\");\n  } else if (isMobile() && !menu.classList.contains(\"hidden\")) {\n    console.log(\"mobile\");\n    menu.classList.add(\"hidden\");\n  }\n});\nwindow.addEventListener(\"resize\", isMobileMenu); // Mobile menu\n\nmobileMenuTrigger && mobileMenuTrigger.addEventListener(\"click\", function (e) {\n  e.stopPropagation();\n  menu && menu.classList.toggle(\"hidden\");\n}); // Desktop menu\n\ndesktopMenuTrigger && desktopMenuTrigger.addEventListener(\"click\", function (e) {\n  e.stopPropagation();\n  menuMore && menuMore.classList.toggle(\"hidden\");\n\n  if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {\n    menuMore.style.left = \"auto\";\n    menuMore.style.right = 0;\n  }\n});\n\n//# sourceURL=webpack:///./source/js/menu.js?");
+eval("\n\nvar container = document.querySelector(\".container\");\nvar menu = document.querySelector(\".menu\");\nvar mobileMenuTrigger = document.querySelector(\".menu-trigger\");\nvar desktopMenu = document.querySelector(\".menu__inner--desktop\");\nvar desktopMenuTrigger = document.querySelector(\".menu__sub-inner-more-trigger\");\nvar menuMore = document.querySelector(\".menu__sub-inner-more\");\nvar mobileQuery = getComputedStyle(document.body).getPropertyValue(\"--phoneWidth\");\n\nvar isMobile = function isMobile() {\n  return window.matchMedia(mobileQuery).matches;\n};\n\nvar isMobileMenu = function isMobileMenu() {\n  mobileMenuTrigger && mobileMenuTrigger.classList.toggle(\"hidden\", !isMobile());\n  menu && menu.classList.toggle(\"hidden\", isMobile());\n  menuMore && menuMore.classList.toggle(\"hidden\", !isMobile());\n}; // Common\n\n\nmenu && menu.addEventListener(\"click\", function (e) {\n  return e.stopPropagation();\n});\nmenuMore && menuMore.addEventListener(\"click\", function (e) {\n  return e.stopPropagation();\n});\nisMobileMenu();\ndocument.body.addEventListener(\"click\", function () {\n  if (!isMobile() && !menuMore.classList.contains(\"hidden\")) {\n    menuMore.classList.add(\"hidden\");\n  } else if (isMobile() && !menu.classList.contains(\"hidden\")) {\n    menu.classList.add(\"hidden\");\n  }\n});\nwindow.addEventListener(\"resize\", isMobileMenu); // Mobile menu\n\nmobileMenuTrigger && mobileMenuTrigger.addEventListener(\"click\", function (e) {\n  e.stopPropagation();\n  menu && menu.classList.toggle(\"hidden\");\n}); // Desktop menu\n\ndesktopMenuTrigger && desktopMenuTrigger.addEventListener(\"click\", function (e) {\n  e.stopPropagation();\n  menuMore && menuMore.classList.toggle(\"hidden\");\n\n  if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {\n    menuMore.style.left = \"auto\";\n    menuMore.style.right = 0;\n  }\n});\n\n//# sourceURL=webpack:///./source/js/menu.js?");
 
 /***/ }),