From a5069c10a01de06114c33d92cffc52c768a2c71d Mon Sep 17 00:00:00 2001
From: br0kenpixel <23280129+br0kenpixel@users.noreply.github.com>
Date: Tue, 21 Oct 2025 14:12:44 +0200
Subject: [PATCH] feat: update NavBar to use dynamic color based on user role

---
 frontend/app/components/NavBar.vue | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/NavBar.vue b/frontend/app/components/NavBar.vue
index 62f7c94..a3421c9 100644
--- a/frontend/app/components/NavBar.vue
+++ b/frontend/app/components/NavBar.vue
@@ -1,10 +1,34 @@
+<script setup lang="ts">
+import { Role } from '~/types/role';
+import type { User } from '~/types/user';
+
+const { logout } = useSanctumAuth();
+const user = useSanctumUser<User>();
+
+const color = computed(() => {
+    switch (user.value?.role) {
+        case Role.ADMIN:
+            return 'rgb(211, 47, 47)';
+        case Role.STUDENT:
+            return 'rgb(46, 125, 50)';
+        case Role.EMPLOYER:
+            return 'rgb(25, 118, 210)';
+        default:
+            return 'rgb(46, 125, 50)';
+    }
+});
+</script>
+
 <template>
     <div>
-        <v-app-bar color="rgb(46, 125, 50)" style="color: white" :elevation="2">
+        <v-app-bar :color="color" style="color: white" :elevation="2">
             <v-btn variant="text" dense to="/">Domov</v-btn>
-            <v-btn variant="text" dense to="/register">Register</v-btn>
-            <v-btn variant="text" dense to="/login">Login</v-btn>
 
+            <v-btn v-show="user === null" variant="text" dense to="/register">Register</v-btn>
+            <v-btn v-show="user === null" variant="text" dense to="/login">Login</v-btn>
+
+            <v-btn v-show="user" variant="text" dense to="/dashboard">Dashboard</v-btn>
+            <v-btn v-show="user" variant="text" dense @click="logout">Logout</v-btn>
             <v-spacer></v-spacer>
         </v-app-bar>
     </div>