From 6ebde0b5f5b8b0cb7c7b50338381f1cd81ec5c73 Mon Sep 17 00:00:00 2001
From: Marcel-Anker <marcel.anker‘edu.fhdw.de>
Date: Wed, 29 Oct 2025 21:03:12 +0100
Subject: [PATCH] navbar wie piet wollte

---
 src/app/navbar/navbar.component.css  | 18 ++++++++++++++++--
 src/app/navbar/navbar.component.html | 23 ++++++++++++++---------
 src/app/navbar/navbar.component.ts   |  6 +++++-
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css
index bd913fa..5388f6b 100644
--- a/src/app/navbar/navbar.component.css
+++ b/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;
 }
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index b537cf4..e738b6b 100644
--- a/src/app/navbar/navbar.component.html
+++ b/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>
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 6ef0b3b..bceb508 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/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: ''},
   ]
 }