feat: Integrate Logout Confirmation Dialog in Navbar

- Add a 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 improved visibility control.
- Refactor the logout button in Navbar.vue to trigger the confirmation dialog, enhancing user experience by preventing accidental logouts.

src/components/ui/LogoutConfirmDialog/LogoutConfirmDialog.vue

@@ -14,10 +14,12 @@ interface Props {
   size?: 'default' | 'sm' | 'lg' | 'icon'
   class?: string
   children?: any
+  isOpen?: boolean
 }
 
 interface Emits {
   (e: 'confirm'): void
+  (e: 'update:isOpen', value: boolean): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -27,14 +29,22 @@ const props = withDefaults(defineProps<Props>(), {
 
 // Default classes for the logout button styling
 const defaultClasses = computed(() => {
-  if (props.class) return props.class
+  const baseClasses = 'gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10'
+  
+  if (props.class) {
+    // Merge custom classes with base classes, ensuring red styling is preserved
+    return `${props.class} ${baseClasses}`
+  }
   
   // Default styling that matches the original red logout button
-  return 'gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10'
+  return baseClasses
 })
 
 const emit = defineEmits<Emits>()
-const isOpen = ref(false)
+const isOpen = computed({
+  get: () => props.isOpen ?? false,
+  set: (value: boolean) => emit('update:isOpen', value)
+})
 
 const handleConfirm = () => {
   isOpen.value = false
@@ -48,7 +58,7 @@ const handleCancel = () => {
 
 <template>
   <Dialog v-model:open="isOpen">
-    <DialogTrigger as-child>
+    <DialogTrigger v-if="props.isOpen === undefined" as-child>
       <slot>
         <Button :variant="variant" :size="size" :class="defaultClasses">
           <LogOut class="h-4 w-4" />