navbar wie piet wollte

src/app/navbar/navbar.component.css

@@ -7,6 +7,20 @@ nav {
 
 .navbar {
   width: 200px;
-  background-color: #ffffff;
-  padding: 20px;
+  background-color: white;
+  padding: 5px;
+  transition: color .2s;
+}
+
+.gradient-text:hover {
+  background: linear-gradient(to right, #6366f1, #db2777);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.navbar a.active {
+  background: linear-gradient(to right, #6366f1, #db2777);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: bold;
 }

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>

src/app/navbar/navbar.component.ts

@@ -7,8 +7,12 @@ import { Component } from '@angular/core';
   styleUrl: './navbar.component.css'
 })
 export class NavbarComponent {
+  /*
+  die routen abfragen und die routen namen verwenden?
+   */
+
   navItems:{label:string, path:string}[] = [
     {label: 'Schedule', path: '/schedule'},
-    {label: 'beispiel', path: ''}, /* mal gucken wie man das elegant dynamisch machen kann*/
+    {label: 'beispiel', path: ''},
   ]
 }