Add menu trigger to desktop
This commit is contained in:
parent
4254f4c314
commit
88d7d5ddba
@ -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).
|
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
|
## How to run your site
|
||||||
|
|
||||||
From your Hugo root directory run:
|
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.
|
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
|
$ cd themes/terminal
|
||||||
|
@ -2,7 +2,9 @@
|
|||||||
<ul class="menu__inner menu__inner--desktop">
|
<ul class="menu__inner menu__inner--desktop">
|
||||||
{{ if $.Site.Params.showMenuItems }}
|
{{ if $.Site.Params.showMenuItems }}
|
||||||
{{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
|
{{ 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 }}
|
{{ end }}
|
||||||
<ul class="menu__sub-inner">
|
<ul class="menu__sub-inner">
|
||||||
{{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
|
{{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
|
||||||
@ -10,21 +12,27 @@
|
|||||||
|
|
||||||
<ul class="menu__sub-inner-more hidden">
|
<ul class="menu__sub-inner-more hidden">
|
||||||
{{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
|
{{ 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 }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ range $.Site.Menus.main }}
|
{{ range $.Site.Menus.main }}
|
||||||
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
{{ if not .HasChildren }}
|
||||||
|
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||||
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul class="menu__inner menu__inner--mobile">
|
<ul class="menu__inner menu__inner--mobile">
|
||||||
{{ range $.Site.Menus.main }}
|
{{ 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>
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -205,6 +205,7 @@ ol ol {
|
|||||||
padding: 40px;
|
padding: 40px;
|
||||||
border-right: 1px solid rgba(255, 255, 255, .1);
|
border-right: 1px solid rgba(255, 255, 255, .1);
|
||||||
max-width: 864px;
|
max-width: 864px;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
@media (--phone) {
|
@media (--phone) {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
@ -14,17 +14,15 @@ const isMobileMenu = () => {
|
|||||||
|
|
||||||
// Common
|
// Common
|
||||||
|
|
||||||
menu.addEventListener("click", e => e.stopPropagation());
|
menu && menu.addEventListener("click", e => e.stopPropagation());
|
||||||
menuMore.addEventListener("click", e => e.stopPropagation());
|
menuMore && menuMore.addEventListener("click", e => e.stopPropagation());
|
||||||
|
|
||||||
isMobileMenu();
|
isMobileMenu();
|
||||||
|
|
||||||
document.body.addEventListener("click", () => {
|
document.body.addEventListener("click", () => {
|
||||||
if (!isMobile() && !menuMore.classList.contains("hidden")) {
|
if (!isMobile() && !menuMore.classList.contains("hidden")) {
|
||||||
console.log("desktop");
|
|
||||||
menuMore.classList.add("hidden");
|
menuMore.classList.add("hidden");
|
||||||
} else if (isMobile() && !menu.classList.contains("hidden")) {
|
} else if (isMobile() && !menu.classList.contains("hidden")) {
|
||||||
console.log("mobile");
|
|
||||||
menu.classList.add("hidden");
|
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
@ -106,7 +106,7 @@ eval("// Add your script here\n\n\n//# sourceURL=webpack:///./source/js/main.js?
|
|||||||
/***/ (function(module, exports, __webpack_require__) {
|
/***/ (function(module, exports, __webpack_require__) {
|
||||||
|
|
||||||
"use strict";
|
"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
Loading…
Reference in New Issue
Block a user