From c2823c4c2bc2359c05ac2d4323a5cb762d900d41 Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Sun, 23 Nov 2025 00:31:18 +0100
Subject: [PATCH] Revamp navbar layout and styling

Updated the navbar HTML structure for improved layout and visual hierarchy. Enhanced styling by removing redundant background color from CSS and adding new classes for borders, padding, and hover effects. Introduced a left arrow indicator for active and hovered navigation items.
---
 src/app/navbar/navbar.component.css  |  1 -
 src/app/navbar/navbar.component.html | 42 +++++++++++++++++-----------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
index e63a669..e91c890 100644
--- a/src/app/navbar/navbar.component.css
+++ b/src/app/navbar/navbar.component.css
@@ -7,7 +7,6 @@ nav {
 
 .navbar {
   width: 250px;
-  background-color: white;
   padding: 5px;
   transition: color .2s;
 }
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 36a3db4..70c901e 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,27 +1,35 @@
-<nav class="navbar">
-  <ul class="nav-list">
-    <div class="grid grid-cols-1 bg-indigo-50 rounded-md border-1 border-gray-300">
-      @for (item of navItems; track item.path) {
-        <li>
-          <div class="grid grid-cols-1 m-1 rounded-sm">
-            <a [routerLink]="[item.path]"
-               routerLinkActive="active"
-               [routerLinkActiveOptions]="{ exact: true }"
-               class="text-2xl pl-3 hover:bg-gray-200 gradient-text rounded-sm">
-              {{ item.label }}
-            </a>
-          </div>
-        </li>
-      }
-    </div>
+<nav class="navbar bg-white-50 border-r border-gray-300">
+  <ul class="nav-list grid grid-cols-1 p-2">
+    @for (item of navItems; track item.path) {
+      <li class="relative group">
+        <a [routerLink]="[item.path]"
+          routerLinkActive="active"
+          [routerLinkActiveOptions]="{ exact: true }"
+          class="relative block text-2xl px-3 py-2 pl-5 gradient-text">
+
+          <!-- Pfeil links -->
+          <span class="
+            absolute left-2 top-1/2 -translate-y-1/2
+            w-0 h-0 border-t-4 border-b-4 border-l-6 border-t-transparent border-b-transparent border-l-indigo-500
+            opacity-0 transition-all duration-300
+            group-hover:opacity-100
+            group-[.active]:opacity-100
+            group-hover:-translate-x-1
+          "></span>
+
+          {{ item.label }}
+        </a>
+      </li>
+    }
   </ul>
+
   @if (currentUser() != null) {
     <div class="mt-auto flex items-center justify-between gap-x-2 px-3 pb-3 text-gray-600">
       <div class="flex items-center gap-x-1">
         <span>Angemeldet als:</span>
         <span class="text-indigo-500">{{ currentUser()?.displayName }}</span>
       </div>
-      <button (click)="logout()" class="relative top-[1px] rounded opacity-50 hover:opacity-100 text-black">
+      <button (click)="logout()" class="relative top-px rounded opacity-50 hover:opacity-100 text-black">
         <mat-icon style="font-size: 20px; width: 20px; height: 20px;">logout</mat-icon>
       </button>
     </div>