Improve UX of sidenav#13483
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the sidebar styling to highlight active navigation links and increases the indentation of nested lists. The review feedback points out a visual hover bug, layout shift, and browser compatibility issues introduced by using :has() on the container, suggesting styling the anchor tag directly instead. Additionally, it recommends replacing margin-left with margin-inline-start to ensure proper RTL layout support.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Anderson-Andre-P
left a comment
Anderson-Andre-P
left a comment
There was a problem hiding this comment.
Fixed. Moved background, border, and padding directly to the a tag, removing the :has() block. Added padding-inline-start: calc(0.4rem - 3px) to compensate for the border width and keep text aligned with inactive items.
|
Staged preview of the updated docs.flutter.dev site (updated for commit d5c7c24): https://flutter-docs-prod--docs-pr13483-feat-improve-ux-nav-me-8en9npve.web.app |
|
Staged preview of the updated flutter.dev site (updated for commit d5c7c24): https://flutter-dev-230821--www-pr13483-feat-improve-ux-nav-me-xld6rhx1.web.app |
|
/gcbrun |
parlough
left a comment
parlough
left a comment
There was a problem hiding this comment.
Thanks for thinking to improve this and sorry about the delay on the review!
I have two comments/suggestions. Let me know your thoughts :)
Co-authored-by: Parker Lougheed <parlough@gmail.com>
Anderson-Andre-P
left a comment
Anderson-Andre-P
left a comment
There was a problem hiding this comment.
New submission for review.
parlough
left a comment
parlough
left a comment
There was a problem hiding this comment.
Thanks for those adjustments! Looks good to me.
3 participants
Improves the sidebar navigation UX with two visual changes:
hierarchy hard to read. Increased from 0.675rem to 1.75rem for clearer visual nesting.
was hard to notice. The li containing the current page now receives a light blue background (color-mix with the site
primary color at 12% opacity) and a 3px solid blue left border, making it immediately clear which page the user is
on.
Both changes use existing CSS variables (--site-primary-color) to respect light and dark mode automatically.
Issues fixed by this PR (if any):
None.
PRs or commits this PR depends on (if any):
None.