working on menu

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;
+    display: flex;mobile
-    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 {
     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>

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;
-  }
+}