Style: Make header adaptive by intro. a hamburg. menu for mobile viewp.

Co-authored-by: c6ristian <c6ristian@christian.moe>
This commit is contained in:
June 2023-10-31 00:11:46 +01:00 committed by jtbx
parent 80a9b0a2d3
commit 7fa5fea2a9
4 changed files with 210 additions and 11 deletions

View file

@ -0,0 +1,33 @@
"use strict";
function setScrolling(enable = true) {
const body = document.body;
if (enable) {
body.style.overflow = "unset";
}
else {
body.style.overflow = "hidden";
}
};
document.addEventListener("DOMContentLoaded", () => {
const hamburgerMenuCheckbox = document.querySelector(".menu-button");
// When the hamburger menu is open, disable scrolling.
hamburgerMenuCheckbox.addEventListener("change", () => {
if (hamburgerMenuCheckbox.checked) {
setScrolling(false);
}
else {
setScrolling(true);
}
});
window.addEventListener("resize", () => {
if (window.innerWidth > 768 && hamburgerMenuCheckbox.checked) {
// Uncheck the checkbox to disable scrolling and to get to the original state.
hamburgerMenuCheckbox.checked = false;
hamburgerMenuCheckbox.dispatchEvent(new Event("change"));
}
});
});

View file

@ -127,6 +127,7 @@ body>main {
line-height: 1.0em; line-height: 1.0em;
max-width: 8em; max-width: 8em;
padding: 5px; padding: 5px;
white-space: nowrap;
color: $roomstate_color_unknown; color: $roomstate_color_unknown;
@ -143,7 +144,7 @@ body>main {
} }
} }
// CCCHH Icon in Menu // CCCHH icon & hamburger menu in header
@media only screen and (prefers-color-scheme: light) { @media only screen and (prefers-color-scheme: light) {
.invert-on-light { .invert-on-light {
filter: invert(1); filter: invert(1);
@ -252,6 +253,166 @@ body>main {
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
padding: 0; padding: 0;
margin: 0; margin: 0;
--main-header-content-height: calc(var(--font-size) * var(--line-height));
.container {
display: block flex;
position: relative;
flex-direction: row;
justify-content: start;
align-items: center;
column-gap: var(--spacing);
}
.menu-button,
.hamburger,
.in-nav-home {
// Don't display, when not in mobile mode.
display: none;
}
.menu {
// Set this to 100% to force the roomstate to "right-align".
width: 100%;
}
.ccchh-logo {
padding-top: var(--nav-element-spacing-vertical);
padding-bottom: var(--nav-element-spacing-vertical);
img {
height: var(--main-header-content-height);
}
}
// Use the brakpoints and viewports, which we need, from here:
// https://github.com/picocss/pico/blob/5f6e3c1abd56a4e55d395f16b526f9e5548bda34/scss/_variables.scss#L46
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
) !default;
$viewports: (
sm: 510px,
) !default;
// When the header content doesn't display nicely anymore, switch to mobile mode.
@media (max-width: map-get($breakpoints, md)) {
.hamburger-button {
display: unset;
position: absolute;
top: calc(var(--nav-element-spacing-vertical));
right: var(--spacing);
height: var(--main-header-content-height);
// To have an attempt at a good-looking cross, when converting the burger
// stack to one, set the width to the height / sin(45).
width: calc(var(--main-header-content-height) / 0.707106781);
}
.menu-button {
z-index: 3;
opacity: 0%;
border: 0;
margin: 0;
}
.hamburger {
display: flex;
flex-direction: column;
justify-content: space-between;
.hamburger-line {
height: 4px;
width: 100%;
background-color: white;
}
}
.in-nav-home {
display: unset;
}
// Don't display the menu per default in mobile mode.
.menu {
display: none;
}
.menu-button:checked ~ .menu {
display: unset;
position: fixed;
width: 100%;
height: 100%;
top: calc(var(--main-header-content-height) + (var(--nav-element-spacing-vertical) * 2) + 3px);
left: 0;
background-color: var(--background-color);
ul,
li {
display: block;
padding-top: calc(var(--nav-element-spacing-vertical) * 0.5);
padding-bottom: calc(var(--nav-element-spacing-vertical) * 0.5);
}
ul {
padding-left: var(--spacing);
padding-right: var(--spacing);
}
li {
padding-left: 0;
padding-right: 0;
}
.main-nav {
margin: auto;
}
// Use the media queries, which we need, from here:
// https://github.com/picocss/pico/blob/5f6e3c1abd56a4e55d395f16b526f9e5548bda34/scss/layout/_container.scss#L15
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
ul {
padding-left: 0;
padding-right: 0;
}
.main-nav {
max-width: map-get($viewports, "sm");
}
}
}
}
.hamburger-line-top {
transform-origin: top right;
transition: all 0.4s ease-in-out;
}
.hamburger-line-middle {
transition: all 0.2s ease-in-out;
}
.hamburger-line-bottom {
transform-origin: bottom right;
transition: all 0.4s ease-in-out;
}
.menu-button:checked~.hamburger {
.hamburger-line-top {
// After some adjustments to make the cross look decent, rotate -45deg.
transform: translateX(-1.5px) translateY(-1.5px) rotate(-45deg);
}
.hamburger-line-middle {
transform: scaleY(0);
}
.hamburger-line-bottom {
// After some adjustments to make the cross look decent, rotate 45deg.
transform: translateX(-1.5px) translateY(1.5px) rotate(45deg);
}
}
}
} }

View file

@ -1,8 +1,21 @@
<header class="main-header header"> <header class="main-header header">
<div class="container"> <div class="container">
{{ $image := resources.Get "images/logo.svg" }}
<a href="{{ .Site.Home.RelPermalink }}" class="ccchh-logo">
<img src="{{ $image.RelPermalink }}" class="invert-on-light" alt="CCCHH Icon">
</a>
<input class="menu-button hamburger-button" type="checkbox">
<div class="hamburger hamburger-button invert-on-light">
<div class="hamburger-line hamburger-line-top"></div>
<div class="hamburger-line hamburger-line-middle"></div>
<div class="hamburger-line hamburger-line-bottom"></div>
</div>
<nav class="menu"> <nav class="menu">
{{- partial "menu.html" (dict "menuID" "main" "page" . ) -}} {{- partial "menu.html" (dict "menuID" "main" "page" . ) -}}
</nav> </nav>
<div class="roomstate" id="roomstate">
<span class="state">unbekannt</span><br><span class="duration">(seit&nbsp;)</span>
</div>
</div> </div>
</header> </header>

View file

@ -2,10 +2,9 @@
{{- $menuID := .menuID -}} {{- $menuID := .menuID -}}
{{- $menuContent := index site.Menus .menuID -}} {{- $menuContent := index site.Menus .menuID -}}
<ul> <ul class="main-nav">
{{- if compare.Eq $menuID "main" -}} {{- if compare.Eq $menuID "main" -}}
{{- $image := resources.Get "images/logo.svg" }} <li><a href="/{{ .Site.Home.RelPermalink }}" class="in-nav-home">Home</a></li>
<li><a href="/{{ .Site.Home.URL }}"><img src="{{ $image.RelPermalink }}" class="invert-on-light" width="150px" alt="CCCHH Icon"></a></li>
{{- end }} {{- end }}
{{- range $menuContent }} {{- range $menuContent }}
<li> <li>
@ -22,10 +21,3 @@
>{{ or (T .Identifier) .Name | safeHTML }}</a></li> >{{ or (T .Identifier) .Name | safeHTML }}</a></li>
{{- end }} {{- end }}
</ul> </ul>
{{ if compare.Eq $menuID "main" -}}
<ul>
<li class="roomstate" id="roomstate">
<span class="state">unbekannt</span><br><span class="duration">(seit&nbsp;)</span>
</li>
</ul>
{{- end -}}