From 82944c8fe649e92809b5a1fbf2f4416e2dcf1697 Mon Sep 17 00:00:00 2001
From: ebby <ebbyplay@proton.me>
Date: Thu, 20 Aug 2026 09:10:13 +0200
Subject: [PATCH] working on menu

---
 blog/src/components/Header.astro | 64 +++++++++++++++++++++++---------
 blog/src/styles/global.css       |  9 +++--
 2 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/blog/src/components/Header.astro b/blog/src/components/Header.astro
index a44e1cd..dce7234 100644
--- a/blog/src/components/Header.astro
+++ b/blog/src/components/Header.astro
@@ -11,6 +11,8 @@
       <a class="nav-link" href="/privacy-policy" style="#789">Datenschutz</a>
     </div>
   </nav>
+  <input type="checkbox" id="menu-toggle" class="only-mobile" />
+  <label for="menu-icon" class="only-mobile">☰</label>
 </header>
 
 <style>
@@ -20,23 +22,7 @@
 
   header {
     padding: 32px;
-    display: flex;
-    align-items: center;
-    background-color: #fff;
-  }
-
-  #name {
-    font-weight: bold;
-    font-size: 1.2rem;
-    flex-shrink: 0;
-  }
-
-  .vertical-line {
-    color: var(--primary-text);
-    border-right-width: 3px;
-  }
-
-  nav {
+    display: flex;mobile
     width: 100%;
     display: flex;
     align-items: center;
@@ -53,7 +39,49 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: end;
-    
   }
 
+  .only-mobile {
+    visibility: hidden;
+    display: none;
+  }
+
+  #menu-toggle {
+    appearance: none;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .only-mobile {
+      visibility: visible;
+      display: block;
+    }
+
+    nav {
+      @include position(absolute, 0 null 0 0);
+      background: #ddd;
+      height: 100vw;
+      width: 66vw;
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      transform: translateX(0);
+      will-change: transform;
+      transition: 0.3s transform linear;
+      z-index: 1;
+
+      ul {
+        list-style: none;
+        padding: 20px 0;
+        margin: 0;
+
+        li {
+          padding: 10px 20px;
+        }
+      }
+    }
+
+    .nav-right {
+      flex-direction: column;
+    }
+  }
 </style>
diff --git a/blog/src/styles/global.css b/blog/src/styles/global.css
index 7a0ba60..f38be17 100644
--- a/blog/src/styles/global.css
+++ b/blog/src/styles/global.css
@@ -9,7 +9,8 @@
     /*font-size: 110%;*/
 }
 
-html, body {
+html,
+body {
     height: 100%;
     margin: 0;
 }
@@ -44,7 +45,7 @@ body {
     font-size: 28px;
 }
 
-.headline-link{
+.headline-link {
     color: var(--primary-color);
     text-decoration: none;
 }
@@ -61,8 +62,8 @@ body {
     border-radius: 8px;
 }
 
-  .vertical-line {
+.vertical-line {
     border-right-style: solid;
     padding-left: 16px;
     height: 2rem;
-  }
\ No newline at end of file
+}
\ No newline at end of file