change menu behavior

This commit is contained in:
panr 2022-06-21 17:15:11 +02:00
parent 7f097d7700
commit 5cf4720aff
3 changed files with 5 additions and 8 deletions

View file

@ -7,9 +7,7 @@ const menuMore = document.querySelector(".menu__sub-inner-more");
const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
const isMobile = () => window.matchMedia(mobileQuery).matches;
const handleMenuClasses = () => {
mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile());
menu && menu.classList.toggle("hidden", isMobile());
menuMore && menuMore.classList.toggle("hidden", !isMobile());
menuMore && menuMore.classList.toggle("hidden-on-mobile", !isMobile());
};
// Common
@ -17,7 +15,7 @@ const handleMenuClasses = () => {
menu && menu.addEventListener("click", (e) => e.stopPropagation());
menuMore && menuMore.addEventListener("click", (e) => e.stopPropagation());
handleMenuClasses();
// handleMenuClasses();
document.body.addEventListener("click", () => {
if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {
@ -34,7 +32,7 @@ window.addEventListener("resize", handleMenuClasses);
mobileMenuTrigger &&
mobileMenuTrigger.addEventListener("click", (e) => {
e.stopPropagation();
menu && menu.classList.toggle("hidden");
menu && menu.classList.toggle("hidden-on-mobile");
});
// Desktop menu

View file

@ -18,8 +18,7 @@
{{ $bundle := slice $menu $languageSelector $prism | resources.Concat "bundle.js" | resources.Minify }}
<script type="text/javascript" async src="{{ $bundle.RelPermalink }}"></script>
<script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
<!-- Extended footer section-->
{{ partial "extended_footer.html" . }}

View file

@ -1,4 +1,4 @@
<nav class="menu">
<nav class="menu hidden-on-mobile">
<ul class="menu__inner menu__inner--desktop">
{{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
{{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}