From 1be342d518c57d68138dae3cde5580506a78522b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kleines=20Filmr=C3=B6llchen?= <kleines@filmroellchen.eu>
Date: Thu, 28 Nov 2024 23:22:52 +0100
Subject: [PATCH] hamburger menu and header fixes

---
 static/main.css     | 73 +++++++++++++++++++++++++++++++++++++++++++--
 templates/page.html |  4 +++
 2 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/static/main.css b/static/main.css
index 480a4bd..e22a877 100644
--- a/static/main.css
+++ b/static/main.css
@@ -97,12 +97,16 @@ header {
     grid-area: space-text;
     text-align: right;
     margin-right: 1em;
-    vertical-align: bottom;
-    margin-top: auto;
   }
   #space-image-container {
     grid-area: space-image;
   }
+  #menu-button {
+    display: none;
+  }
+  #menu-checkbox {
+    display: none;
+  }
 }
 
 @media screen and (width > 1700px) {
@@ -122,7 +126,7 @@ header {
 
   header {
     grid-template:
-      "logo logo" minmax(3cm, 10vh)
+      "logo hamburger-menu" minmax(3cm, 10vh)
       "nav nav"
       "space-text space-image" min-content /
       auto min-content;
@@ -133,6 +137,69 @@ header {
       margin-left: auto;
     }
   }
+
+  nav {
+    transition: max-height 0.2s cubic-bezier(0.86, 0, 0.07, 1),
+      margin 0.2s cubic-bezier(0.86, 0, 0.07, 1);
+    overflow-y: hidden;
+    height: auto;
+  }
+
+  /* hamburger menu */
+  #menu-checkbox:not(:checked) ~ nav {
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  #menu-checkbox:checked ~ nav {
+    max-height: 40vh;
+  }
+  #menu-label {
+    grid-area: hamburger-menu;
+    display: block;
+    margin: auto;
+    margin-bottom: 1em;
+    height: 1.2em;
+    width: 2em;
+  }
+  #menu-button {
+    display: block !important;
+    margin-top: 0.5em;
+
+    &,
+    &::before,
+    &::after {
+      display: block;
+      background-color: var(--main-text-color);
+      position: absolute;
+      height: 0.2em;
+      width: 2em;
+      transition: all 200ms ease-in-out;
+      border-radius: 2px;
+    }
+
+    &::before {
+      content: "";
+      margin-top: -0.5em;
+    }
+
+    &::after {
+      content: "";
+      margin-top: 0.5em;
+    }
+  }
+  #menu-checkbox:checked + #menu-label #menu-button {
+    background: transparent;
+    &::before {
+      margin-top: 0;
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      margin-top: 0;
+      transform: rotate(-45deg);
+    }
+  }
 }
 
 /* skip to content element, lots of positioning styles copied from html5-boilerplate */
diff --git a/templates/page.html b/templates/page.html
index 583c019..7d63be6 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -61,6 +61,10 @@ truncate(length=150) %} {% else %} {% set description = "" %} {% endif %}
           src="{{ get_url(path='logo.svg', trailing_slash=false) }}"
           alt="Chaostreff Backnang Logo"
       /></a>
+      <input type="checkbox" id="menu-checkbox" name="menu-checkbox" />
+      <label id="menu-label" for="menu-checkbox"
+        ><div id="menu-button"></div
+      ></label>
       <nav>
         <a href="{{ get_url(path='/#termine') }}">Termine</a>
         <a href="{{ get_url(path='/#kontakt') }}">Kontakt</a>