fix: menu (#46)

frontend/src/views/Header.vue

@@ -16,6 +16,7 @@ const router = useRouter()
 const isMobile = useIsMobile()
 
 const showLogin = ref(false)
+const showLogout = ref(false)
 const password = ref('')
 
 const login = async () => {
@@ -116,18 +117,13 @@ const menuOptions = computed(() => [
     },
     {
         label: () => h(
-            NPopconfirm,
+            NButton,
             {
-                onPositiveClick: () => logout()
-            },
-            {
-                trigger: () => h(NButton, {
                 tertiary: true,
                 ghost: true,
-                }, () => t('logout')
+                onClick: () => { showLogout.value = true }
-                ),
+            },
-                default: () => t('logoutConfirm')
+            { default: () => t('logout') }
-            }
         ),
         show: !!jwt.value,
         key: "logout"
@@ -143,9 +139,9 @@ const menuOptionsMobile = [
             }
         ),
         key: "menu",
-        children: menuOptions
+        children: menuOptions.value
     },
-]
+];
 </script>
 
 <template>
@@ -184,6 +180,17 @@ const menuOptionsMobile = [
                 </n-button>
             </template>
         </n-modal>
+        <n-modal v-model:show="showLogout" preset="dialog" title="Dialog">
+            <template #header>
+                <div>{{ t('logout') }}</div>
+            </template>
+            <p>{{ t('logoutConfirm') }}</p>
+            <template #action>
+                <n-button @click="login" size="small" tertiary round type="primary">
+                    {{ t('logout') }}
+                </n-button>
+            </template>
+        </n-modal>
         <n-modal v-model:show="showAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
             title="Dialog">
             <template #header>