Add menu trigger to desktop

This commit is contained in:
panr 2019-02-01 08:39:12 +01:00
parent 4254f4c314
commit 88d7d5ddba
10 changed files with 24 additions and 15 deletions

View File

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

View File

@ -2,7 +2,9 @@
<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>
{{ 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 }}
@ -10,21 +12,27 @@
<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>
{{ if not .HasChildren }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
{{ end }}
</ul>
{{ end }}
</ul>
{{ else }}
{{ range $.Site.Menus.main }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ 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 }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ if not .HasChildren }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
{{ end }}
</ul>
</nav>

View File

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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?");
/***/ }),

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long