new navbar layout

pass/public/styles/base.less

@@ -158,14 +158,61 @@ button {
   }
 }
 
+@logo-break-point: 610px; // Breakpoint when nav items won't fit besides logo
+#nav-opener {
+  position: absolute;
+  left: -100%;
+  @media (max-width: @logo-break-point) {
+    + nav > label > svg > .line {
+      transition: rotate 300ms ease-in 0ms, opacity 0ms 300ms,
+        y 300ms ease-in 300ms, fill 300ms ease-in 300ms;
+      rotate: 0deg;
+      transform-origin: center;
+    }
+    &:checked {
+      + nav {
+        grid-template-areas: "logo key-management nav-opener" ". general .";
+        > label {
+          border-width: 0;
+          transition: border-width 0ms 0ms;
+
+          > svg {
+            fill: red;
+            > .line {
+              transition: y 300ms ease-in 0ms, rotate 300ms ease-in 300ms,
+                opacity 0ms 300ms, fill 300ms ease-in 300ms;
+              &.top {
+                y: 45px;
+                rotate: 45deg;
+              }
+
+              &.middle {
+                opacity: 0;
+              }
+
+              &.bottom {
+                y: 45px;
+                rotate: -45deg;
+              }
+            }
+          }
+        }
+
+        > ul.general {
+          display: flex;
+        }
+      }
+    }
+  }
+}
 nav#primary-nav {
-  @logo-break-point: 720px; // Breakpoint when nav items won't fit besides logo
   @nav-items-break-point: 560px; // Breakpoint when nav items won't fit into their own row
 
   background-color: @color-main;
   color: @color-main-font-color;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-areas: "logo general key-management";
+  grid-template-columns: auto 1fr 1fr;
   position: sticky;
   top: 0;
   z-index: 99999;
@@ -173,16 +220,19 @@ nav#primary-nav {
   gap: 0 2rem;
   padding: 0.5rem 1rem;
 
-  #page-logo a {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    text-decoration: none;
-    color: inherit;
+  #page-logo {
+    grid-area: logo;
+    a {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      text-decoration: none;
+      color: inherit;
 
-    > img {
-      width: 1.7rem;
-      filter: brightness(0) invert(1);
+      > img {
+        width: 1.7rem;
+        filter: brightness(0) invert(1);
+      }
     }
   }
 
@@ -224,61 +274,31 @@ nav#primary-nav {
         }
       }
     }
+
+    &.general {
+      grid-area: general;
+      gap: 0.5rem;
+    }
+    &.key-management {
+      grid-area: key-management;
+      justify-content: flex-end;
+    }
+  }
+
+  label {
+    grid-area: nav-opener;
   }
 
   @media (max-width: @logo-break-point) {
+    grid-template-areas: "logo key-management nav-opener";
+    grid-template-columns: auto 1fr auto;
     > ul {
-      max-height: 0;
-      visibility: hidden;
-      transition: max-height 0.5s, padding 0.5s;
-      justify-content: space-around;
-
-      > li.whitespace {
+      justify-content: center;
+      gap: 0.5rem;
+      &.general {
         display: none;
-      }
-    }
-
-    > input#nav-opener {
-      display: block;
-      visibility: hidden;
-      flex-grow: 1;
-
-      &:checked {
-        + label {
-          border-width: 0;
-          transition: border-width 0ms 0ms;
-
-          > svg {
-            fill: red;
-
-            > .line {
-              transition: y 300ms ease-in 0ms, rotate 300ms ease-in 300ms,
-                opacity 0ms 300ms, fill 300ms ease-in 300ms;
-
-              //y 300ms ease-in, rotate 300ms ease-in 300ms,
-              //  opacity 0ms 300ms, fill 300ms ease-in 300ms;
-              &.top {
-                y: 45px;
-                rotate: 45deg;
-              }
-
-              &.middle {
-                opacity: 0;
-              }
-
-              &.bottom {
-                y: 45px;
-                rotate: -45deg;
-              }
-            }
-          }
-        }
-
-        ~ ul {
-          max-height: 500px;
-          padding: 1rem 0;
-          visibility: visible;
-        }
+        flex-direction: column;
+        padding: 1rem;
       }
     }
 
@@ -293,29 +313,17 @@ nav#primary-nav {
 
       > svg {
         fill: var(--navbar-opener-color);
-
-        > .line {
-          transition: rotate 300ms ease-in 0ms, opacity 0ms 300ms,
-            y 300ms ease-in 300ms, fill 300ms ease-in 300ms;
-          rotate: 0deg;
-          transform-origin: center;
-        }
       }
     }
   }
 
-  @media (max-width: @nav-items-break-point) {
+  @media (max-width: 380px) {
+    gap: 0.5rem;
     > ul {
-      flex-direction: column;
-      width: 100%;
-      gap: 1rem;
-
-      > li {
-        text-align: center;
-
-        &.whitespace {
-          display: none;
-        }
+      justify-content: center;
+      .key-management {
+        gap: 0.5rem;
+        font-size: 0.9rem;
       }
     }
   }

pass/views/templates/page_header.ejs

@@ -64,26 +64,26 @@
 </head>
 
 <body>
+  <input type="checkbox" name="nav-opener" id="nav-opener" aria-hidden="true">
   <nav id="primary-nav">
     <div id="page-logo">
       <a href="/">
         <img src="<%= baseDir _%>/images/metager-schloss-orange.svg" alt="MetaGer Schloss">
       </a>
     </div>
-    <input type="checkbox" name="nav-opener" id="nav-opener" aria-hidden="true">
     <label for="nav-opener">
-      <svg class="hamburger" viewBox="0 0 100 100" width="2rem" height="2rem">
+      <svg class="hamburger" viewBox="0 0 100 100" width="20px" height="20px">
         <rect class="line top" x="10" y="25" width="80" height="10" rx="5"></rect>
         <rect class="line middle" x="10" y="45" width="80" height="10" rx="5"></rect>
         <rect class="line bottom" x="10" y="65" width="80" height="10" rx="5"></rect>
       </svg>
     </label>
-    <ul>
+    <ul class="general">
       <li><a href="<%= baseDir _%>/"><%= req.t("leftnav.informations", { ns: 'pageheader'}) _%></a></li>
       <li><a href="<%= baseDir _%>/cost"><%= req.t("leftnav.price", { ns: 'pageheader'}) _%></a></li>
       <li><a href="<%= baseDir %>/help/faq"><%= req.t("leftnav.help", { ns: 'pageheader'}) _%></a></li>
-      <li class="whitespace"></li>
-      
+    </ul>
+    <ul class="key-management">
       <%_ if((typeof req.cookies !== "undefined" && typeof req.cookies.key !== "undefined") || typeof key !== "undefined") { _%>
       <li><a href="<%= baseDir _%>/key/enter"><%= req.t("rightnav.manage", { ns: 'pageheader'}) _%></a></li>
       <li>|</li>
@@ -93,5 +93,6 @@
       <li><a href="<%= baseDir _%>/key/create" class="button"><%= req.t("rightnav.start", { ns: 'pageheader'}) _%></a></li>
       <%_ } _%>
     </ul>
+    
   </nav>
   <main>
\ No newline at end of file