checkpoint before gorm fix

management-ui/src/customcompometns/Navbar.vue

@@ -1,57 +1,73 @@
 <script setup lang="ts">
-// import { Card, CardHeader, CardContent } from '@/components/ui/card';
 import {
-    DropdownMenu, DropdownMenuContent,
-    DropdownMenuTrigger, DropdownMenuSeparator,
-    DropdownMenuItem,
-    DropdownMenuLabel
-} from '@/components/ui/dropdown-menu';
+  DropdownMenu, DropdownMenuContent,
+  DropdownMenuTrigger, DropdownMenuSeparator,
+  DropdownMenuItem, DropdownMenuLabel
+} from '@/components/ui/dropdown-menu'
 import { cn } from '@/lib/utils'
-import { Settings } from 'lucide-vue-next';
+import { Settings } from 'lucide-vue-next'
+import { RouterLink, useRoute } from 'vue-router'
+
 const { customComponent } = defineProps<{ customComponent?: any }>()
+
+const route = useRoute()
+
+function isActive(prefix: string) {
+  const p = route.path.replace(/\/+$/, '')
+  const tgt = prefix.replace(/\/+$/, '')
+  return p === tgt || p.startsWith(tgt + '/')
+}
+
+function navLinkClass(prefix: string) {
+  return cn(
+    'text-sm font-medium transition-colors',
+    isActive(prefix) ? 'text-primary' : 'text-muted-foreground hover:text-primary'
+  )
+}
 </script>
 
 <template>
-    <div class="flex flex-col min-h-screen">
-        <div class="flex items-center justify-end space-x-6 p-4">
-            <nav :class="cn('flex items-center space-x-4 lg:space-x-6', $attrs.class ?? '')">
-                <a href="/admin" class="text-sm font-medium transition-colors hover:text-primary">
-                    Admin
-                </a>
-                <a href="/devices"
-                    class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary">
-                    Devices
-                </a>
-            </nav>
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <button class="p-2 rounded hover:bg-muted">
-                        <Settings />
-                    </button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent class="w-48">
-                    <DropdownMenuLabel>
-                        Admin
-                    </DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <a href="/settings">
-                        <DropdownMenuItem>
-                            Settings
-                        </DropdownMenuItem>
-                    </a>
-                    <DropdownMenuSeparator />
-                    <a href="/login">
-                        <DropdownMenuItem>
-                            Logout
-                        </DropdownMenuItem>
-                    </a>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
-        <div class="flex flex-1 flex-col gap-4 p-4">
-            <!-- <component v-if="customComponent" :is="customComponent" /> -->
-             <slot></slot>
-        </div>
+  <div class="flex flex-col min-h-screen">
+    <div class="flex items-center justify-end space-x-6 p-4">
+      <nav :class="cn('flex items-center space-x-4 lg:space-x-6', $attrs.class ?? '')">
+        <RouterLink
+          to="/admin"
+          :class="navLinkClass('/admin')"
+          :aria-current="isActive('/admin') ? 'page' : undefined"
+        >
+          Admin
+        </RouterLink>
+        <RouterLink
+          to="/devices"
+          :class="navLinkClass('/devices')"
+          :aria-current="isActive('/devices') ? 'page' : undefined"
+        >
+          Devices
+        </RouterLink>
+      </nav>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button class="p-2 rounded hover:bg-muted">
+            <Settings />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-48">
+          <DropdownMenuLabel>Admin</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <RouterLink to="/settings">
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+          </RouterLink>
+          <DropdownMenuSeparator />
+          <RouterLink to="/login">
+            <DropdownMenuItem>Logout</DropdownMenuItem>
+          </RouterLink>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
 
+    <div class="flex flex-1 flex-col gap-4 p-4">
+      <slot></slot>
+    </div>
+  </div>
 </template>