hamburger menu und impressum

src/index.html

@@ -17,11 +17,11 @@
       <img src="/assets/hertzlinie_l.svg" class="welle-l" />
       <img src="/assets/hertzlinie_r.svg" class="welle-r" />
       <div id="innerHeader">
-        <a href="#">
+        <a href="#hertzschlag">
           <h1>HertzSCHLAG Archiv</h1>
         </a>
         <nav>
-          <a href="#liste" style="margin-left: 25px">Alle Ausgaben</a>
+          <a href="#about">Impressum</a>
         </nav>
       </div>
     </div>

src/modules/about.ts

@@ -1,7 +1,8 @@
+import { baseUrl } from "../../assets/data.json";
+
 export default function About() {
   const ret = document.createElement("div");
   ret.classList.add("pagewrapper");
-  ret.innerHTML =
+  ret.innerHTML = `<div class='page'><img class='banner' src='${baseUrl}/hertzschlag/images/banner.jpg'></img><h1>Impressum</h1>Malte Jürgens<br>Kurfürstenstr. 12<br>52066 Aachen<h3>Kontakt:</h3><a href='mailto:hertzschlag@hhgym.de'>hertzschlag@hhgym.de</a><br><a href='mailto:maltejur@dismail.de'>maltejur@dismail.de</a></div>`;
-    "<div class='page'><img class='banner' src='https://files.hertzschlag.eu/hertzschlag/images/banner.jpg'></img><h1>Impressum</h1>Malte Jürgens<br>Bergmannstraße 70<br>10961 Berlin<h3>Kontakt:</h3><a href='mailto:hertzschlag@hhgym.de'>hertzschlag@hhgym.de</a><br><a href='mailto:maltejur@web.de'>maltejur@web.de</a></div>";
   return ret;
 }

src/modules/headerHertzblatt.ts

@@ -5,9 +5,13 @@ export default function HeaderHertzschlag() {
   <a href="#hertzblatt">
     <h1>hertz heute / HertzBLATT Archiv</h1>
   </a>
+  <input type="checkbox" id="nav-toggle" name="nav-toggle" />
   <nav>
     <a href="#" style="margin-left: 25px">HertzSCHLAG Archiv</a>
+    <a href="#about" style="margin-left: 25px">Impressum</a>
+    <label for="nav-toggle">✕</label>
   </nav>
+  <label for="nav-toggle">☰</label>
   `;
 
   return el;

src/modules/headerHertzschlag.ts

@@ -5,10 +5,14 @@ export default function HeaderHertzschlag() {
   <a href="#">
     <h1>HertzSCHLAG Archiv</h1>
   </a>
+  <input type="checkbox" id="nav-toggle" name="nav-toggle" />
   <nav>
     <a href="#hertzblatt" style="margin-left: 25px">HertzBLATT Archiv</a>
     <a href="#hertzschlag/liste" style="margin-left: 25px">Alle Ausgaben</a>
+    <a href="#about" style="margin-left: 25px">Impressum</a>
+    <label for="nav-toggle">✕</label>
   </nav>
+  <label for="nav-toggle">☰</label>
   `;
 
   return el;

src/modules/home.ts

@@ -16,6 +16,8 @@ export default function Home() {
       </a>`;
   });
 
+  html += `<a href="/#about" class="impressum">Impressum</a>`;
+
   ret.innerHTML = html;
 
   return ret;

src/modules/router.ts

@@ -58,6 +58,8 @@ export default class Router {
     if (!this.lazy && !didNavigate) {
       this.el.innerHTML = "";
     }
+    const navToggle = document.getElementById("nav-toggle") as HTMLInputElement;
+    if (navToggle && navToggle.checked) navToggle.checked = false;
     this.onpagechange(hash.slice(1));
   }
 }

src/style.css

@@ -104,6 +104,14 @@ body {
   color: rgba(255, 255, 255, 0.8);
 }
 
+#header input {
+  display: none;
+}
+
+#header label {
+  display: none;
+}
+
 .welle-l {
   position: fixed;
   height: 30px;
@@ -172,6 +180,11 @@ body {
   transform: translateY(-4px);
 }
 
+.impressum {
+  margin: auto;
+  color: white;
+}
+
 button,
 .button,
 .button-skeleton {
@@ -320,10 +333,45 @@ iframe {
   }
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 900px) {
   #header nav {
     display: none;
   }
+
+  #header label {
+    display: initial;
+    color: white;
+    position: fixed;
+    top: 33px;
+    right: 110px;
+    cursor: pointer;
+  }
+
+  #header input:checked + nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+  }
+
+  #header nav label {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    color: white;
+    font-size: 2em;
+  }
+
+  #header nav a {
+    font-size: 1.6em !important;
+  }
 }
 
 @media only screen and (max-width: 600px) {
@@ -363,6 +411,11 @@ iframe {
     right: 55px;
   }
 
+  #header label {
+    top: 25px;
+    right: 55px;
+  }
+
   #header nav a {
     font-size: 16px;
     margin-left: 15px;