feat: navigation

Author: therobrob

themes/fiptheme/assets/sass/navigation.scss

@@ -7,6 +7,12 @@
   }
 }
 
+.o-header__curtain:has(~ .o-header__nav--open)  {
+  background-color: rgba(0, 0, 0, .8);
+  inset: 0;
+  position: fixed;
+}
+
 .o-header__nav {
   align-items: center;
   display: flex;
@@ -132,6 +138,8 @@
     align-items: flex-end;
     position: fixed;
     top: 10rem;
+    right: 0;
+    width: 80%;
     z-index: 2;
     background-color: white;
 

themes/fiptheme/layouts/partials/menu.html

@@ -7,6 +7,7 @@
   <a href="/" aria-label="FIP-Guide Startseite" class="o-header__logo">
     <img aria-hidden="true" src="{{ $logo.RelPermalink }}" alt="">
   </a>
+  <div class="o-header__curtain"></div>
   <div class="o-header__nav container">
     <button class="o-nav__menu-button" title="Menü öffnen" aria-expanded="false" aria-haspopup="true">
       {{ T "menu-open" }}