fix(eidos navigation-menu): Content floats as popover, not inline

Bug: Content panels were rendering inline below their Triggers,
pushing the bar's flex layout. They should float anchored to the Item
the same way Radix / bits-ui mega-menus do.

Two changes:

1. **Item** — was `flex-direction: column`, which made Content stack
   below Trigger in the flex flow. Switched to inline-flex with
   `align-items: center`. `position: relative` stays so it remains the
   anchor element. Vertical orientation gets `display: flex`.

2. **Content** — added `position: absolute; inset-block-start: calc(100% + var(--space-1)); inset-inline-start: 0; z-index: 50`.
   The panel now sits 4px below the trigger row, left-aligned to the
   Item (extends via `min-inline-size: 14rem` past the trigger), and
   stacks above the rest of the page. Vertical orientation flips the
   anchor: `inset-block-start: 0; inset-inline-start: calc(100% + var(--space-1))`
   so the panel opens to the right of the trigger column.

Verified in browser: contentTop=623, triggerBottom=619, position=absolute,
z-index=50, bar layout no longer pushed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent 065cc6a369
commit fd34fa535c

@ -63,11 +63,17 @@
align-items: stretch;
}
/* ── Item ─ */
/* ── Item ─
*
* `position: relative` makes the Item the positioning anchor for its
* Content panel — Content is `position: absolute` below so opening it
* doesn't push the bar. The Item only lays out its Trigger / Link
* inline.
*/
[data-navigation-menu-item] {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
}
/* ── Trigger (and Link share the same in-bar chrome) ─ */
@ -147,6 +153,16 @@
* directional slide animation per `data-motion` (from / to).
*/
[data-navigation-menu-content] {
/* Floats below the parent Item — taken out of the bar's flex flow so
* opening the mega-menu doesn't push siblings. `top: 100%` anchors
* it just below the trigger row; `inset-inline-start: 0` left-aligns
* to the Item, but the panel itself has a `min-inline-size` so it
* extends past the trigger if needed. */
position: absolute;
inset-block-start: calc(100% + var(--space-1));
inset-inline-start: 0;
z-index: 50;
min-inline-size: 14rem;
padding: var(--space-4);
border: 1px solid var(--color-border-default);
@ -157,6 +173,13 @@
outline: none;
}
/* Vertical orientation flips the anchor — Content opens to the right
* of the trigger column instead of below. */
[data-navigation-menu][data-orientation='vertical'] [data-navigation-menu-content] {
inset-block-start: 0;
inset-inline-start: calc(100% + var(--space-1));
}
[data-navigation-menu-content][data-state='open'] {
animation: navigation-menu-enter var(--duration-fast) var(--ease-out);
}

Loading…
Cancel
Save

Powered by TurnKey Linux.