Move navbar to top and increase transparency

src/app/app.css

@@ -10,7 +10,7 @@
   max-width: 1500px;
   min-height: 100svh;
   margin: 0 auto;
-  padding: 1.5rem 1.25rem 3rem;
+  padding: 7.5rem 1.25rem 3rem;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -18,17 +18,19 @@
 
 .sidebar {
   position: fixed;
-  top: 1.5rem;
-  right: 1.5rem;
-  width: 280px;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(1200px, calc(100% - 3rem));
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.2rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.25rem;
+  padding: 0.9rem 1.2rem;
   border: 1px solid #30363d;
-  border-radius: 20px;
-  background: rgba(22, 27, 34, 0.92);
-  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  background: rgba(22, 27, 34, 0.75);
+  backdrop-filter: blur(9px);
   z-index: 3;
 }
 
@@ -55,12 +57,14 @@
 
 .nav {
   display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
+  flex: 1;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
 .nav a {
-  padding: 0.7rem 0.8rem;
+  padding: 0.55rem 0.8rem;
   border: 1px solid transparent;
   border-radius: 12px;
   color: #c9d1d9;
@@ -113,14 +117,7 @@
   }
 
   .sidebar {
-    position: static;
-    width: auto;
-    margin: 0 1.25rem 1.5rem;
-  }
-
-  .nav {
-    flex-direction: row;
-    flex-wrap: wrap;
+    width: calc(100% - 2rem);
   }
 }
 
@@ -134,9 +131,13 @@
     top: 0.75rem;
     right: 0.75rem;
     left: 0.75rem;
+    transform: none;
     width: auto;
     margin: 0;
     gap: 0.6rem;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
     border-radius: 16px;
   }
 
@@ -149,6 +150,7 @@
   }
 
   .nav {
+    flex: 0 0 auto;
     display: none;
     flex-direction: column;
     gap: 0.4rem;

src/app/app.html

@@ -1,13 +1,6 @@
 <div class="shell">
   <app-interactive-background></app-interactive-background>
 
-  <main class="content">
-    <router-outlet></router-outlet>
-    <footer class="site-footer">
-      <p>(c) {{ currentYear }} Tim Kainz | +43 677 62678219</p>
-    </footer>
-  </main>
-
   <aside class="sidebar">
     <div class="sidebar-header">
       <a class="brand" routerLink="/home" (click)="closeMenu()">Tim Kainz</a>
@@ -33,4 +26,11 @@
       <a routerLink="/contact" routerLinkActive="active" (click)="closeMenu()">Contact</a>
     </nav>
   </aside>
+
+  <main class="content">
+    <router-outlet></router-outlet>
+    <footer class="site-footer">
+      <p>(c) {{ currentYear }} Tim Kainz | +43 677 62678219</p>
+    </footer>
+  </main>
 </div>