timetracker update

bo/src/components/TopBar.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import LangSwitch from './inner/langSwitch.vue'
+import ThemeSwitch from './inner/themeSwitch.vue'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+</script>
+
+<template>
+  <header
+    class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
+    <div class="container px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between h-14">
+        <!-- Logo -->
+        <RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center">
+            <UIcon name="i-heroicons-clock" class="w-5 h-5" />
+          </div>
+          <span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
+        </RouterLink>
+        <!-- Right Side Actions -->
+        <div class="flex items-center gap-2">
+          <!-- Language Switcher -->
+          <LangSwitch />
+          <!-- Theme Switcher -->
+          <ThemeSwitch />
+          <!-- Logout Button (only when authenticated) -->
+          <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
+            class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark)">
+            Logout
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>