Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix visible scrollbar in SideNav when collapsed #1786

Merged
merged 3 commits into from Nov 9, 2023
Merged

Fix visible scrollbar in SideNav when collapsed #1786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d79733
Fix visible scrollbar in SideNav when collapsed
alex-ju Nov 8, 2023
6f39e48
Document the need for such solution
alex-ju Nov 9, 2023
19bc91f
Add changelog entry
alex-ju Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/shy-impalas-float.md
View file
Open in desktop
@@ -0,0 +1,5 @@
---
"@hashicorp/design-system-components": patch
---

`SideNav` - Fixed visible scrollbar in collapsed SideNav when scroll bar is set to be always visible
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing – added in 4a4a3e3

8 changes: 8 additions & 0 deletions packages/components/app/styles/components/side-nav/content.scss
View file
Open in desktop
Expand Up @@ -16,6 +16,14 @@
// we use this trick (increasing the container size here, and reducing it at single panel level)
// to have the panels width match the sidebar extended width (it's used in the animated sliding of the panels)
margin: 0 calc(var(--token-side-nav-wrapper-padding-horizontal) * -1);

// we hide the content when the SideNav is collapsed to prevent the vertical scrollbar from being visible
// when the scrollbar is set to be always visible or a mouse or trackpad force it to be always visible.
// ideally we would use `display: none` but doing so would disable the fade-in transition when expanding
.hds-side-nav--is-minimized & {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would add a comment here, explaining what is going on and why we need this "hack"

height: 0;
overflow: hidden;
}
}

.hds-side-nav__content-panels {
Expand Down