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

@@ -7,7 +7,6 @@ nav {
 
 .navbar {
   width: 250px;
-  background-color: white;
   padding: 5px;
   transition: color .2s;
 }

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>