Mobile Header

blog/src/components/Header.astro

@@ -1,8 +1,10 @@
 <header>
-  <span id="name">Blauwasser Mausis</span>
+  <span>Blauwasser Mausis</span>
   <span class="vertical-line"></span>
+
   <nav>
     <div class="nav-left">
+      <span id="side-nav-header">Blauwasser Mausis</span>
       <a class="nav-link" href="/">Startseite</a>
       <!-- <a class="nav-link" href="/about">Über uns</a> -->
     </div>
@@ -11,77 +13,136 @@
       <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>
+  <input type="checkbox" id="menu-toggle" class="menu-icon" />
+  <label for="menu-toggle" class="menu-icon" aria-label="Menü öffnen">
+    ☰
+  </label>
+
+  <label for="menu-toggle" class="menu-backdrop"></label>
 </header>
 
 <style>
   * {
+    box-sizing: border-box;
     color: var(--primary-text);
   }
 
   header {
-    padding: 32px;
+    position: relative;
-    display: flex;mobile
     width: 100%;
+    padding: 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-  }
+    gap: 20px;
-
-  a {
-    padding-left: 16px;
-    color: var(--primary-text);
-    width: fit-content;
-  }
-
-  .nav-right {
-    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);
+    display: flex;
-      background: #ddd;
+    align-items: center;
-      height: 100vw;
+    justify-content: space-between;
+    flex: 1;
+  }
+
+  .nav-left,
+  .nav-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  a {
+    color: var(--primary-text);
+    text-decoration: none;
+  }
+
+  #menu-toggle,
+  .menu-icon,
+  .menu-backdrop,
+  #side-nav-header {
+    display: none;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .menu-icon {
+      display: block;
+      position: relative;
+      font-size: 1.6rem;
+      cursor: pointer;
+      z-index: 4;
+    }
+
+    #menu-toggle {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    #side-nav-header {
+      display: block;
+      padding-bottom: 32px;
+    }
+
+    nav {
+      position: fixed;
+      top: 0;
+      left: 0;
       width: 66vw;
+      height: 100vh;
+      padding: 42px 24px 24px;
+      background: #ddd;
+
       display: flex;
       flex-direction: column;
-      align-items: start;
+      align-items: flex-start;
-      transform: translateX(0);
+      justify-content: flex-start;
-      will-change: transform;
+      gap: 30px;
-      transition: 0.3s transform linear;
-      z-index: 1;
 
-      ul {
+      transform: translateX(-100%);
-        list-style: none;
+      transition: transform 0.3s ease;
-        padding: 20px 0;
+      z-index: 3;
-        margin: 0;
-
-        li {
-          padding: 10px 20px;
-        }
-      }
     }
 
+    .nav-left,
     .nav-right {
       flex-direction: column;
+      align-items: flex-start;
     }
+
+    .nav-left {
+      margin-bottom: auto;
+    }
+
+    nav:has(~ #menu-toggle:checked) {
+      transform: translateX(0);
+    }
+
+    .menu-backdrop {
+      display: block;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.25);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+      z-index: 2;
+    }
+
+    #menu-toggle:checked ~ .menu-backdrop {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+  }
+
+  .vertical-line {
+    visibility: hidden;
   }
 </style>

blog/src/pages/rss.xml.js

@@ -12,6 +12,7 @@ export async function GET(context) {
         site: context.site,
         items: posts.map(post => ({
             title: post.frontmatter.title,
+            subtitle: post.frontmatter.subtitle,
             pubDate: Date.parse(post.frontmatter.date),
             description: post.frontmatter.description,
             link: post.url,