feat: Enhance Logout Confirmation in Navbar and Dialog Component

- Add a new state variable to manage the visibility of the Logout Confirmation dialog in Navbar.vue.
- Update the LogoutConfirmDialog component to accept an isOpen prop and emit an update event for better control of its visibility.
- Refactor the logout button in Navbar.vue to trigger the confirmation dialog, improving user experience by preventing accidental logouts.

src/components/layout/Navbar.vue

@@ -155,8 +155,8 @@ const handleLogout = async () => {
                 Relay Hub Status
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <DropdownMenuItem as-child class="text-destructive">
+              <DropdownMenuItem @click="() => {}" class="text-destructive p-0">
-                <LogoutConfirmDialog variant="ghost" size="sm" class="w-full justify-start gap-2 h-auto p-2" @confirm="handleLogout">
+                <LogoutConfirmDialog variant="destructive" size="sm" class="w-full justify-start" @confirm="handleLogout">
                   <LogOut class="h-4 w-4" />
                   Logout
                 </LogoutConfirmDialog>
@@ -242,7 +242,7 @@ const handleLogout = async () => {
                 <Activity class="h-4 w-4" />
                 Relay Hub Status
               </Button>
-              <LogoutConfirmDialog variant="ghost" size="sm" class="w-full justify-start gap-2 text-destructive" @confirm="handleLogout">
+              <LogoutConfirmDialog variant="destructive" size="sm" class="w-full justify-start gap-2" @confirm="handleLogout">
                 <LogOut class="h-4 w-4" />
                 Logout
               </LogoutConfirmDialog>

src/components/ui/LogoutConfirmDialog/LogoutConfirmDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { LogOut, AlertTriangle } from 'lucide-vue-next'
@@ -21,10 +21,18 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'outline',
+  variant: 'destructive',
   size: 'default'
 })
 
+// Default classes for the logout button styling
+const defaultClasses = computed(() => {
+  if (props.class) return props.class
+  
+  // Default styling that matches the original red logout button
+  return 'gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10'
+})
+
 const emit = defineEmits<Emits>()
 const isOpen = ref(false)
 
@@ -42,8 +50,8 @@ const handleCancel = () => {
   <Dialog v-model:open="isOpen">
     <DialogTrigger as-child>
       <slot>
-        <Button :variant="variant" :size="size" :class="class">
+        <Button :variant="variant" :size="size" :class="defaultClasses">
-          <LogOut class="h-4 w-4 mr-2" />
+          <LogOut class="h-4 w-4" />
           Logout
         </Button>
       </slot>