navbar wie piet wollte

src/app/navbar/navbar.component.html

@@ -1,13 +1,18 @@
 <nav class="navbar">
   <ul class="nav-list">
-    @for (item of navItems; track item.path) {
-      <li>
-        <div class="flex justify-center">
-          <a href="{{item.path}}" class="text-xl font-bold hover:text-purple-500">
-            {{ item.label }}
-          </a>
-        </div>
-      </li>
-    }
+    <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-xl font-bold flex justify-center hover:bg-gray-200 gradient-text rounded-sm">
+              {{ item.label }}
+            </a>
+          </div>
+        </li>
+      }
+    </div>
   </ul>
 </nav>