SideNav: collapsed child-menu popover shows an unintended rectangular inner border
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 1.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
## Problem
When SideNav is collapsed and a parent navigation group opens its child-menu popover, the menu surface appears to contain an additional sharp-cornered rectangular border. It is visible inside/alongside the rounded Popover surface, so the result looks like an accidental nested panel rather than one coherent menu.
This is especially noticeable for groups with several second-level items (for example, Governance → Manage Entities / Prepare Board / File & Report / Advise).
## Expected
The collapsed child menu should read as a single Popover surface:
- no extra inner rectangular outline, or
- if an inner container is intentional, its border/background should inherit or be clipped to the Popover radius.
## Why it matters
The visible right-angled frame conflicts with the Popover elevation and rounded surface, making the navigation feel visually broken in an otherwise tokenized UI.
## Suggested direction
Use the Popover surface as the only bordered surface for collapsed SideNav child menus. If the nested SideNav section needs a container for layout, make that container borderless or clip it to the outer radius.
## Reproduction
1. Render a SideNav with a collapsible parent section and child navigation items.
2. Collapse the SideNav.
3. Open that parent section’s child menu.
4. Observe the inset rectangular outline around the menu content.
I can provide a screenshot or a minimal reproduction if helpful.
## Screenshot from official template
> **Image placeholder — Shell / Side Nav template**
> Upload the screenshot showing the inset sharp-cornered rectangular outline inside the rounded collapsed SideNav child-menu popover.
This example is from an official Astryx template, not a consumer-specific implementation.
Contributor guide
Research direction
Start at the SideNav collapsed child-menu entry point and inspect how it composes the Popover surface and its nested menu container. Reproduce the collapsed parent-menu flow described in the issue, then verify that the child menu presents one rounded bordered surface without an inset rectangular outline.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 70/100