maride/hugo-theme-terminal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify menus

Browse Source
This commit is contained in:
panr 2022-11-08 00:34:01 +01:00
parent 09628b6b3d
commit 39ba3a4ea9
10 changed files with 236 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
assets/css/header.scss
View File

@ -1,17 +1,3 @@
@mixin menu {
$shadow-color: opacify($background, .8);
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
position: absolute;
background: $background;
box-shadow: $shadow;
color: white;
border: 2px solid;
margin: 0;
padding: 10px;
list-style: none;
z-index: 99;
}
.header {
display: flex;
flex-direction: column;
@ -45,130 +31,4 @@
text-decoration: none;
}
}
.menu {
display: flex;
align-items: flex-start;
margin: 20px 1px;
@media ($phone) {
@include menu;
top: 50px;
right: 0;
&.hidden-on-mobile {
display: none;
}
}
&__inner {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
&--desktop {
@media ($phone) {
display: none;
}
}
&--mobile {
display: none;
@media ($phone) {
display: block;
}
}
li {
&:not(:last-of-type) {
margin-right: 20px;
margin-bottom: 10px;
flex: 0 0 auto;
}
}
@media ($phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
margin: 0;
padding: 5px;
}
}
}
&__sub-inner {
position: relative;
list-style: none;
padding: 0;
margin: 0;
&:not(:only-child) {
margin-left: 20px;
}
&-more {
@include menu;
top: 0;
left: 0;
&-trigger {
color: $accent;
user-select: none;
cursor: pointer;
}
li {
margin: 0;
padding: 5px;
white-space: nowrap;
}
}
}
.spacer {
flex-grow: 1 !important;
}
.language-selector {
position: relative;
list-style: none;
margin: 0;
&-current {
list-style-type: none;
display: flex;
flex-direction: row;
color: $accent;
cursor: pointer;
margin-right: 0 !important;
}
&__more {
@include menu;
top: 0;
right: 0;
}
}
&-trigger {
display: none;
color: $accent;
border: 2px solid;
margin-left: 10px;
height: 100%;
padding: 3px 8px;
position: relative;
cursor: pointer;
@media ($phone) {
display: block;
}
}
}
}

156
assets/css/menu.scss Normal file
View File

@ -0,0 +1,156 @@
@mixin menu {
display: none;
flex-direction: column;
$shadow-color: opacify($background, .8);
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
position: absolute;
background: $background;
box-shadow: $shadow;
color: white;
border: 2px solid;
margin: 0;
padding: 10px;
top: 10px;
left: 0;
list-style: none;
z-index: 99;
}
@mixin header-menu-trigger {
color: $accent;
border: 2px solid;
margin-left: 10px;
height: 100%;
padding: 3px 8px;
margin-bottom: 0 !important;
position: relative;
cursor: pointer;
}
.navigation-menu {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin: 20px 1px;
@media ($phone) {
margin: 0;
}
&__inner {
display: flex;
flex: 1;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
> li {
flex: 0 0 auto;
margin-bottom: 10px;
&:not(:last-of-type) {
margin-right: 20px;
}
}
@media ($phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
margin: 0;
padding: 5px;
}
}
}
.spacer {
flex-grow: 1 !important;
}
}
.menu {
display: flex;
flex-direction: column;
position: relative;
list-style: none;
padding: 0;
margin: 0;
&__trigger {
margin-right: 0 !important;
color: $accent;
user-select: none;
cursor: pointer;
}
&__dropdown {
@include menu;
.open & {
display: flex;
}
> li {
flex: 0 0 auto;
&:not(:last-of-type) {
margin-bottom: 10px;
}
a {
display: flex;
padding: 5px;
}
}
}
&--desktop {
@media ($phone) {
display: none
}
}
&--mobile {
.menu__trigger {
@include header-menu-trigger;
display: none;
@media ($phone) {
display: block;
}
}
.menu__dropdown {
@media ($phone) {
left: auto;
right: 0;
}
}
li {
flex: 0 0 auto;
&:not(:last-of-type) {
margin-bottom: 10px;
}
}
}
&--language-selector {
.menu__trigger {
@include header-menu-trigger;
@media ($phone) {
display: none;
}
}
.menu__dropdown {
left: auto;
right: 0;
}
}
}

1
assets/css/style.scss
View File

@ -5,6 +5,7 @@
@import "form";
@import "header";
@import "menu";
@import "logo";
@import "main";
@import "post";

23
assets/js/languageSelector.js
View File

@ -1,23 +0,0 @@
const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
const isMobile = () => window.matchMedia(mobileQuery).matches;
const languageSelector = document.querySelector(".language-selector-current");
const moreLanguagesContainer = document.querySelector(".language-selector__more");
document.body.addEventListener("click", () => {
if (
!isMobile() &&
moreLanguagesContainer &&
!moreLanguagesContainer.classList.contains("hidden")
) {
moreLanguagesContainer.classList.add("hidden");
}
});
languageSelector &&
languageSelector.addEventListener("click", (e) => {
if (!isMobile()) {
e.stopPropagation();
moreLanguagesContainer.classList.toggle("hidden");
}
});

83
assets/js/menu.js
View File

@ -1,49 +1,44 @@
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 handleMenuClasses = () => {
menuMore && menuMore.classList.toggle("hidden-on-mobile", !isMobile());
};
// Common
menu && menu.addEventListener("click", (e) => e.stopPropagation());
menuMore && menuMore.addEventListener("click", (e) => e.stopPropagation());
// handleMenuClasses();
const allMenus = document.querySelectorAll(".menu");
// Hide menus on body click
document.body.addEventListener("click", () => {
if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {
menuMore.classList.add("hidden");
} else if (isMobile() && !menu.classList.contains("hidden")) {
menu.classList.add("hidden");
}
});
window.addEventListener("resize", handleMenuClasses);
// Mobile menu
mobileMenuTrigger &&
mobileMenuTrigger.addEventListener("click", (e) => {
e.stopPropagation();
menu && menu.classList.toggle("hidden-on-mobile");
});
// 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;
allMenus.forEach(menu => {
if (menu.classList.contains("open")) {
menu.classList.remove("open");
}
});
});
// Reset menus on resize
window.addEventListener("resize", () => {
allMenus.forEach(menu => {
menu.classList.remove("open");
});
});
// Handle desktop menu
allMenus.forEach(menu => {
const trigger = menu.querySelector(".menu__trigger");
const dropdown = menu.querySelector(".menu__dropdown");
trigger.addEventListener("click", e => {
e.stopPropagation();
if (menu.classList.contains("open")) {
menu.classList.remove("open");
} else {
// Close all menus...
allMenus.forEach(m => m.classList.remove("open"));
// ...before opening the current one
menu.classList.add("open");
}
if (dropdown.getBoundingClientRect().right > container.getBoundingClientRect().right) {
dropdown.style.left = "auto";
dropdown.style.right = 0;
}
});
dropdown.addEventListener("click", e => e.stopPropagation());
});

3
layouts/partials/footer.html
View File

@ -13,10 +13,9 @@
</footer>
{{ $menu := resources.Get "js/menu.js" | js.Build }}
{{ $languageSelector := resources.Get "js/languageSelector.js" | js.Build }}
{{ $prism := resources.Get "js/prism.js" | js.Build }}
{{ $bundle := slice $menu $languageSelector $prism | resources.Concat "bundle.js" | resources.Minify }}
{{ $bundle := slice $menu $prism | resources.Concat "bundle.js" | resources.Minify }}
<script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>

5
layouts/partials/header.html
View File

@ -4,7 +4,10 @@
{{ partial "logo.html" . }}
</div>
{{ if len $.Site.Menus }}
<div class="menu-trigger">menu</div>
{{ partial "mobile-menu.html" . }}
{{ end }}
{{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
{{ partial "language-menu.html" . }}
{{ end }}
</div>
{{ if len $.Site.Menus }}

10
layouts/partials/language-menu.html Normal file
View File

@ -0,0 +1,10 @@
<ul class="menu menu--desktop menu--language-selector">
<li class="menu__trigger">{{ .Language.LanguageName }}&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
{{ range $.Site.Home.AllTranslations }}
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
{{ end }}
</ul>
</li>
</ul>

45
layouts/partials/menu.html
View File

@ -1,5 +1,5 @@
<nav class="menu hidden-on-mobile">
<ul class="menu__inner menu__inner--desktop">
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
{{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
{{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
{{ if not .HasChildren }}
@ -8,10 +8,10 @@
{{ end }}
{{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
<li>
<ul class="menu__sub-inner">
<li class="menu__sub-inner-more-trigger">{{ $.Site.Params.MenuMore }}&nbsp;▾</li>
<ul class="menu">
<li class="menu__trigger">{{ $.Site.Params.MenuMore }}&nbsp;▾</li>
<li>
<ul class="menu__sub-inner-more hidden">
<ul class="menu__dropdown">
{{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
{{ if not .HasChildren }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
@ -30,39 +30,4 @@
{{ end }}
{{ end }}
</ul>
<span class="spacer"></span>
<ul class="menu__inner menu__inner--desktop">
{{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
<li>
<ul class="language-selector">
<li class="language-selector-current">
{{ .Language.LanguageName }}&nbsp;▾
</li>
<li>
<ul class="language-selector__more hidden">
{{ range $.Site.Home.AllTranslations }}
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
{{ end }}
</ul>
</li>
</ul>
</li>
{{ 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 }}
{{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
<hr />
{{ range $.Site.Home.AllTranslations }}
<li>
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
</li>
{{ end }}
{{ end }}
</ul>
</nav>

20
layouts/partials/mobile-menu.html Normal file
View File

@ -0,0 +1,20 @@
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
{{ range $.Site.Menus.main }}
{{ if not .HasChildren }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
{{ end }}
{{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}
<hr />
{{ range $.Site.Home.AllTranslations }}
<li>
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
</li>
{{ end }}
{{ end }}
</ul>
</li>
</ul>