fix: Team-Panel unter seinen Menuepunkt, ohne toten Spalt
Zwei Fehler, einer je Anlauf. Der Inhalt gehoert ohne Viewport gerendert: Dann haengt er am NavigationMenu.Item, das ohnehin `relative` ist, und steht damit unter "Team". Mit Viewport ist er eine eigene Flaeche unter der ganzen Leiste und beginnt an deren linkem Rand — unter "Dashboard". Und der Standardabstand mt-1.5 war ein toter Streifen zwischen Menuepunkt und Panel. Wer den Zeiger hinunterbewegte, verliess beides zugleich; nach delayDuration klappte das Menue zu, bevor ein Eintrag zu treffen war. Ein Hover-Menue darf keine Luecke haben. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P32KoesVtABd6xWsqMKzhr
This commit is contained in:
parent
52dbde2a25
commit
43d6508369
2 changed files with 14 additions and 10 deletions
|
|
@ -63,7 +63,13 @@
|
||||||
{/snippet}
|
{/snippet}
|
||||||
</NavigationMenu.Trigger>
|
</NavigationMenu.Trigger>
|
||||||
|
|
||||||
<NavigationMenu.Content class="min-w-56">
|
<!--
|
||||||
|
mt-0 statt der 1.5 aus dem Standard: Der Abstand war ein toter Streifen
|
||||||
|
zwischen Menuepunkt und Panel. Wer den Zeiger hinunterbewegte, verliess
|
||||||
|
beides zugleich, und nach delayDuration klappte das Menue zu, bevor ein
|
||||||
|
Eintrag zu treffen war. Ein Hover-Menue darf keine Luecke haben.
|
||||||
|
-->
|
||||||
|
<NavigationMenu.Content class="min-w-56 group-data-[viewport=false]/navigation-menu:mt-0">
|
||||||
{#each teams.records as t (t.id)}
|
{#each teams.records as t (t.id)}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
|
||||||
|
|
@ -187,15 +187,13 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Mit Viewport, also so, wie die Komponente gedacht
|
Ohne Viewport: Der Inhalt haengt dann am
|
||||||
ist. Ohne ihn haengt das Panel per top-full/left-0
|
Menuepunkt, der als NavigationMenu.Item ohnehin
|
||||||
am naechsten positionierten Vorfahren — das ist
|
`relative` ist. Mit Viewport waere er eine eigene
|
||||||
die Leiste selbst, nicht der Menuepunkt. Es
|
Flaeche unter der ganzen Leiste und stuende an
|
||||||
erschien dann am linken Rand statt unter „Team",
|
deren linkem Rand — unter „Dashboard" statt unter
|
||||||
der Zeiger lief auf dem Weg dorthin ins Leere und
|
„Team". -->
|
||||||
das Menue klappte zu, bevor jemand einen Eintrag
|
<NavigationMenu.Root viewport={false} class="hidden md:flex">
|
||||||
treffen konnte. -->
|
|
||||||
<NavigationMenu.Root class="hidden md:flex">
|
|
||||||
<NavigationMenu.List class="items-center gap-2">
|
<NavigationMenu.List class="items-center gap-2">
|
||||||
{#each nav as item}
|
{#each nav as item}
|
||||||
{@const Icon = item.icon}
|
{@const Icon = item.icon}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue