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

Co-authored-by: c6ristian <c6ristian@christian.moe>

themes/ccchh/assets/js/hamburgerAdditional.js

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

themes/ccchh/assets/sass/main.scss

@@ -127,6 +127,7 @@ body>main {
   line-height: 1.0em;
   max-width: 8em;
   padding: 5px;
+  white-space: nowrap;
 
   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) {
   .invert-on-light {
     filter: invert(1);
@@ -252,6 +253,166 @@ body>main {
   box-shadow: var(--card-box-shadow);
   padding: 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);
+      }
+    }
+  }
 }
 
 

themes/ccchh/layouts/partials/header.html

@@ -1,8 +1,21 @@
 
   <header class="main-header header">
     <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">
       {{- partial "menu.html" (dict "menuID" "main" "page" . ) -}}
       </nav>
+      <div class="roomstate" id="roomstate">
+        <span class="state">unbekannt</span><br><span class="duration">(seit&nbsp;)</span>
+      </div>
     </div>
   </header>

themes/ccchh/layouts/partials/menu.html

@@ -2,10 +2,9 @@
 {{- $menuID := .menuID -}}
 {{- $menuContent := index site.Menus .menuID -}}
 
-    <ul>
+    <ul class="main-nav">
       {{- 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 }}
       {{- range $menuContent }}
       <li>
@@ -22,10 +21,3 @@
         >{{ or (T .Identifier) .Name | safeHTML }}</a></li>
       {{- end }}
     </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 -}}