Skip to content

Commit ebcbfb0

Browse files
danielroedanielroe
committed
fix: prevent dropdown from disappearing as mouse goes down
1 parent 314175b commit ebcbfb0

2 files changed

Lines changed: 64 additions & 66 deletions

File tree

‎app/components/HeaderOrgsDropdown.vue‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -75,45 +75,44 @@ function handleKeydown(event: KeyboardEvent) {
7575
enter-from-class="opacity-0 translate-y-1"
7676
leave-to-class="opacity-0 translate-y-1"
7777
>
78-
<div
79-
v-if="isOpen"
80-
class="absolute right-0 top-full mt-2 w-56 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden"
81-
>
82-
<div class="px-3 py-2 border-b border-border">
83-
<span class="font-mono text-xs text-fg-subtle">Your Organizations</span>
84-
</div>
78+
<div v-if="isOpen" class="absolute right-0 top-full pt-2 w-56 z-50">
79+
<div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
80+
<div class="px-3 py-2 border-b border-border">
81+
<span class="font-mono text-xs text-fg-subtle">Your Organizations</span>
82+
</div>
8583

86-
<div v-if="isLoading" class="px-3 py-4 text-center">
87-
<span class="text-fg-muted text-sm">Loading…</span>
88-
</div>
84+
<div v-if="isLoading" class="px-3 py-4 text-center">
85+
<span class="text-fg-muted text-sm">Loading…</span>
86+
</div>
8987

90-
<div v-else-if="error" class="px-3 py-4 text-center">
91-
<span class="text-fg-muted text-sm">{{ error }}</span>
92-
</div>
88+
<div v-else-if="error" class="px-3 py-4 text-center">
89+
<span class="text-fg-muted text-sm">{{ error }}</span>
90+
</div>
91+
92+
<ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
93+
<li v-for="org in orgs" :key="org">
94+
<NuxtLink
95+
:to="`/@${org}`"
96+
class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors"
97+
>
98+
@{{ org }}
99+
</NuxtLink>
100+
</li>
101+
</ul>
93102

94-
<ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
95-
<li v-for="org in orgs" :key="org">
103+
<div v-else class="px-3 py-4 text-center">
104+
<span class="text-fg-muted text-sm">No organizations found</span>
105+
</div>
106+
107+
<div class="px-3 py-2 border-t border-border">
96108
<NuxtLink
97-
:to="`/@${org}`"
98-
class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors"
109+
:to="`/~${username}/orgs`"
110+
class="link-subtle font-mono text-xs inline-flex items-center gap-1"
99111
>
100-
@{{ org }}
112+
View all
113+
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
101114
</NuxtLink>
102-
</li>
103-
</ul>
104-
105-
<div v-else class="px-3 py-4 text-center">
106-
<span class="text-fg-muted text-sm">No organizations found</span>
107-
</div>
108-
109-
<div class="px-3 py-2 border-t border-border">
110-
<NuxtLink
111-
:to="`/~${username}/orgs`"
112-
class="link-subtle font-mono text-xs inline-flex items-center gap-1"
113-
>
114-
View all
115-
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
116-
</NuxtLink>
115+
</div>
117116
</div>
118117
</div>
119118
</Transition>

‎app/components/HeaderPackagesDropdown.vue‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -75,45 +75,44 @@ function handleKeydown(event: KeyboardEvent) {
7575
enter-from-class="opacity-0 translate-y-1"
7676
leave-to-class="opacity-0 translate-y-1"
7777
>
78-
<div
79-
v-if="isOpen"
80-
class="absolute right-0 top-full mt-2 w-64 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden"
81-
>
82-
<div class="px-3 py-2 border-b border-border">
83-
<span class="font-mono text-xs text-fg-subtle">Your Packages</span>
84-
</div>
78+
<div v-if="isOpen" class="absolute right-0 top-full pt-2 w-64 z-50">
79+
<div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden">
80+
<div class="px-3 py-2 border-b border-border">
81+
<span class="font-mono text-xs text-fg-subtle">Your Packages</span>
82+
</div>
8583

86-
<div v-if="isLoading" class="px-3 py-4 text-center">
87-
<span class="text-fg-muted text-sm">Loading…</span>
88-
</div>
84+
<div v-if="isLoading" class="px-3 py-4 text-center">
85+
<span class="text-fg-muted text-sm">Loading…</span>
86+
</div>
8987

90-
<div v-else-if="error" class="px-3 py-4 text-center">
91-
<span class="text-fg-muted text-sm">{{ error }}</span>
92-
</div>
88+
<div v-else-if="error" class="px-3 py-4 text-center">
89+
<span class="text-fg-muted text-sm">{{ error }}</span>
90+
</div>
91+
92+
<ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
93+
<li v-for="pkg in packages" :key="pkg">
94+
<NuxtLink
95+
:to="`/${pkg}`"
96+
class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
97+
>
98+
{{ pkg }}
99+
</NuxtLink>
100+
</li>
101+
</ul>
93102

94-
<ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
95-
<li v-for="pkg in packages" :key="pkg">
103+
<div v-else class="px-3 py-4 text-center">
104+
<span class="text-fg-muted text-sm">No packages found</span>
105+
</div>
106+
107+
<div class="px-3 py-2 border-t border-border">
96108
<NuxtLink
97-
:to="`/${pkg}`"
98-
class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
109+
:to="`/~${username}`"
110+
class="link-subtle font-mono text-xs inline-flex items-center gap-1"
99111
>
100-
{{ pkg }}
112+
View all
113+
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
101114
</NuxtLink>
102-
</li>
103-
</ul>
104-
105-
<div v-else class="px-3 py-4 text-center">
106-
<span class="text-fg-muted text-sm">No packages found</span>
107-
</div>
108-
109-
<div class="px-3 py-2 border-t border-border">
110-
<NuxtLink
111-
:to="`/~${username}`"
112-
class="link-subtle font-mono text-xs inline-flex items-center gap-1"
113-
>
114-
View all
115-
<span class="i-carbon-arrow-right w-3 h-3" aria-hidden="true" />
116-
</NuxtLink>
115+
</div>
117116
</div>
118117
</div>
119118
</Transition>

0 commit comments

Comments
 (0)