fix: close dropdown when opening other menus (hacky fix)

This commit is contained in:
ae 2025-05-04 16:09:33 +03:00
parent 75fd86046b
commit 81bb6fed27
Signed by: ae
GPG Key ID: 995EFD5C1B532B3E
2 changed files with 14 additions and 6 deletions

View File

@ -25,6 +25,7 @@
let isComponentReady = false let isComponentReady = false
let showSettings = false let showSettings = false
let isSidebarOpen = window.innerWidth > 768 let isSidebarOpen = window.innerWidth > 768
let isSidebarUserMenuOpen = false
let isVersionDropdownOpen = false let isVersionDropdownOpen = false
let isEditing = false let isEditing = false
let errorTimeout: ReturnType<typeof setTimeout> | null = null let errorTimeout: ReturnType<typeof setTimeout> | null = null
@ -79,18 +80,22 @@
} }
const toggleSettingsModal = () => { const toggleSettingsModal = () => {
isSidebarUserMenuOpen = false
showSettings = !showSettings showSettings = !showSettings
} }
const toggleAdminModal = () => { const toggleAdminModal = () => {
isSidebarUserMenuOpen = false
console.log("[DBG] Admin view is not implemented yet") console.log("[DBG] Admin view is not implemented yet")
} }
const toggleWebhookModal = () => { const toggleWebhookModal = () => {
isSidebarUserMenuOpen = false
console.log("[DBG] Webhooks aren't implemented yet") console.log("[DBG] Webhooks aren't implemented yet")
} }
const toggleTagModal = () => { const toggleTagModal = () => {
isSidebarUserMenuOpen = false
console.log("[DBG] Tags aren't implemented yet") console.log("[DBG] Tags aren't implemented yet")
} }
@ -109,6 +114,7 @@
} }
isEditing = true // open brand new notes in edit mode by default isEditing = true // open brand new notes in edit mode by default
isSidebarUserMenuOpen = false
} }
} }
@ -140,6 +146,8 @@
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
isSidebarOpen = false isSidebarOpen = false
} }
isSidebarUserMenuOpen = false
} }
const selectVersion = async (versionID: string, isActiveVersion: boolean) => { const selectVersion = async (versionID: string, isActiveVersion: boolean) => {
@ -270,6 +278,7 @@
<!-- Sidebar (2-way binded state) --> <!-- Sidebar (2-way binded state) -->
<Sidebar <Sidebar
bind:isSidebarOpen bind:isSidebarOpen
bind:isUserMenuOpen={isSidebarUserMenuOpen}
{username} {username}
notes={$availableNotes || []} notes={$availableNotes || []}
currentNote={$currentFullNote} currentNote={$currentFullNote}

View File

@ -18,6 +18,7 @@
// props // props
export let isSidebarOpen: boolean export let isSidebarOpen: boolean
export let isUserMenuOpen: boolean
export let username: string export let username: string
export let notes: NoteMetadata[] = [] export let notes: NoteMetadata[] = []
export let currentNote: FullNote | null = null export let currentNote: FullNote | null = null
@ -34,15 +35,13 @@
) => Promise<void> ) => Promise<void>
export let deleteNote: (noteID: string) => Promise<void> export let deleteNote: (noteID: string) => Promise<void>
// local state
let userMenuOpen = false
const toggleSidebar = () => { const toggleSidebar = () => {
isUserMenuOpen = false
isSidebarOpen = !isSidebarOpen isSidebarOpen = !isSidebarOpen
} }
const toggleUserMenu = () => { const toggleUserMenu = () => {
userMenuOpen = !userMenuOpen isUserMenuOpen = !isUserMenuOpen
} }
const handleDeleteNote = (event: MouseEvent, noteID: string) => { const handleDeleteNote = (event: MouseEvent, noteID: string) => {
@ -224,7 +223,7 @@
<span class="sidebar-user-button-username-text">Logged in as {username}</span> <span class="sidebar-user-button-username-text">Logged in as {username}</span>
</div> </div>
{#if userMenuOpen} {#if isUserMenuOpen}
<ChevronDown classString="h-6 w-6 flex-shrink-0" /> <ChevronDown classString="h-6 w-6 flex-shrink-0" />
{:else} {:else}
<ChevronUp classString="h-6 w-6 flex-shrink-0" /> <ChevronUp classString="h-6 w-6 flex-shrink-0" />
@ -233,7 +232,7 @@
</button> </button>
<!-- User actions dropdown menu --> <!-- User actions dropdown menu -->
{#if userMenuOpen} {#if isUserMenuOpen}
<div class="sidebar-user-dropdown"> <div class="sidebar-user-dropdown">
<div class="flex flex-col p-0"> <div class="flex flex-col p-0">
<button <button