feat: Enhance Navbar and IdentityDialog components with improved functionality and logging
- Update Navbar to close the mobile menu when opening the identity dialog. - Add debug logging to IdentityDialog to track changes in the dialog's open state. - Adjust styling for mobile menu and dialog content for better responsiveness.
This commit is contained in:
parent
236a8a59b9
commit
5175c20d82
2 changed files with 7 additions and 4 deletions
|
|
@ -36,6 +36,8 @@ const toggleTheme = () => {
|
||||||
|
|
||||||
const openIdentityDialog = () => {
|
const openIdentityDialog = () => {
|
||||||
showIdentityDialog.value = true
|
showIdentityDialog.value = true
|
||||||
|
// Close mobile menu when opening dialog
|
||||||
|
isOpen.value = false
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -119,11 +121,11 @@ const openIdentityDialog = () => {
|
||||||
|
|
||||||
<!-- Mobile menu -->
|
<!-- Mobile menu -->
|
||||||
<div v-show="isOpen"
|
<div v-show="isOpen"
|
||||||
class="absolute left-0 right-0 top-14 z-[100] border-b bg-background/95 backdrop-blur-sm md:hidden">
|
class="absolute left-0 right-0 top-14 z-40 border-b bg-background/95 backdrop-blur-sm md:hidden">
|
||||||
<div class="space-y-1 p-4">
|
<div class="space-y-1 p-4">
|
||||||
<!-- Identity in mobile menu -->
|
<!-- Identity in mobile menu -->
|
||||||
<div class="mb-4 px-2">
|
<div class="mb-4 px-2">
|
||||||
<Button v-if="!identity.isAuthenticated.value" variant="outline" size="sm" @click="openIdentityDialog; isOpen = false" class="w-full gap-2">
|
<Button v-if="!identity.isAuthenticated.value" variant="outline" size="sm" @click="openIdentityDialog" class="w-full gap-2 min-h-[44px] touch-manipulation">
|
||||||
<User class="h-4 w-4" />
|
<User class="h-4 w-4" />
|
||||||
Connect Identity
|
Connect Identity
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -134,7 +136,7 @@ const openIdentityDialog = () => {
|
||||||
<Badge variant="secondary" class="text-xs ml-auto">Connected</Badge>
|
<Badge variant="secondary" class="text-xs ml-auto">Connected</Badge>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1">
|
<div class="space-y-1">
|
||||||
<Button variant="ghost" size="sm" @click="openIdentityDialog; isOpen = false" class="w-full justify-start gap-2">
|
<Button variant="ghost" size="sm" @click="openIdentityDialog" class="w-full justify-start gap-2">
|
||||||
<User class="h-4 w-4" />
|
<User class="h-4 w-4" />
|
||||||
Profile
|
Profile
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@ interface Emits {
|
||||||
const props = defineProps<Props>()
|
const props = defineProps<Props>()
|
||||||
const emit = defineEmits<Emits>()
|
const emit = defineEmits<Emits>()
|
||||||
|
|
||||||
|
|
||||||
// Form states
|
// Form states
|
||||||
const importKey = ref('')
|
const importKey = ref('')
|
||||||
const usePassword = ref(false)
|
const usePassword = ref(false)
|
||||||
|
|
@ -145,7 +146,7 @@ function initializeProfileForm() {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Dialog :open="isOpen" @update:open="handleClose">
|
<Dialog :open="isOpen" @update:open="handleClose">
|
||||||
<DialogContent class="sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
|
<DialogContent class="w-[95vw] sm:max-w-[600px] max-h-[90vh] overflow-y-auto p-4 sm:p-6">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle class="flex items-center gap-2">
|
<DialogTitle class="flex items-center gap-2">
|
||||||
<Key class="w-5 h-5" />
|
<Key class="w-5 h-5" />
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue