Hds::SideNav - add @isCollapsible and @isMinimized arguments

[alex-ju]

📌 Summary

• Add @isCollapsible (default false) to allow users to collapse/expand the SideNav on any screen size (previously only available on narrow viewports)
• Expose the @isMinimized (default false) argument to allow applications to preserve/control the minimized state across sessions
• Visual changes:
  • the collapse/expand button is now using double chevrons
  • the SideNav is smaller when minimized and doesn't include the logo anymore
  • the SideNav has a light border to the right

🛠️ Detailed description

As a prerequisite of this work, we separated the minimized/not-minimized state from is-deskop/is-mobile styles before introducing the optional isCollapsible argument that determines whether or not to show the expand/collapse button when in desktop mode. On mobile, the collapsible feature is always on, with the exception when isResponsive is explicitly set to false.

Note: To test the work during development we use a dummy demo app; this does not necessarily need to be merged in, but I kept it to ease the review.

👉 Preview current Hds::SideNav in a dummy app

👉 Preview proposed Hds::SideNav with @isCollapsible={{true}} in a dummy app

Ongoing tasks:

• Review changes in existing applications
• Gather feedback from stakeholders
• Update documentation
• Add keyboard shortcuts to expand/contract the navigation

📸 Screenshots

Default

Before	After

Collapsible

The following screen captures illustrate the effects of setting @isCollapsible={{true}} in the dummy app, HCP and TFC

Local test in dummy app

Expanded/open	Collapsed/closed

Local test in HCP

sidenav-cloud-ui.mp4

Local test in TFC

sidenav-atlas.mp4

🔗 External links

Jira ticket: HDS-2388
Figma file: https://www.figma.com/file/I4gqjXgIvyrX1hBAodx9sC/Collapsible-SideNav-Exploration-%26-Milestones?type=design&node-id=43471-138048&mode=dev

---

👀 Reviewer's checklist:

• +1 Percy if applicable
• Confirm that PR has a changelog update via Changesets if needed
• Confirm that A11y tests have been run locally for this component

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-website	✅ Ready (Inspect)	Visit Preview	Oct 3, 2023 3:21pm

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
hds-showcase	⬜️ Ignored (Inspect)	Visit Preview	Oct 3, 2023 3:21pm

[didoo]

@alex-ju did a first pass and stress-tested the implementation. for now I don't see any blocker, just general comments/suggestions (and a few questions I want to discuss with you, I'll set up a meeting for this)

[didoo]

@alex-ju another thing to discuss: in the RFC I see mentioned that this feature is opt-in, but I don't see it in the code (but maybe I have missed it)

[jorytindall]

This is looking slick! I'm still waiting for any additional feedback from stakeholders, which I'd hope to wrap by Monday next week. Otherwise, I dropped one initial comment, and noting here that it looks like the scroll bar (or some other element?) is floating a bit on small viewports?

[alex-ju]

noting here that it looks like the scroll bar (or some other element?) is floating a bit on small viewports?

@jorytindall, I've not been able to replicate this, and although I've not changed the layout of this component (I suspect if there's an issue with scrolling it's something that we'd see in the current implementation too) I'd be keen to look into this (even if it's part of a separate PR). Would you be able to provide me with the browser/os combination that's causing issues?

[alex-ju]

@didoo I tried to address all the things we discussed in the sync review as well as the comments here, so it's good for another review whenever time allows

[didoo]

@alex-ju I haven't checked (yet) the CSS line by line, I intend to do it when it's 100% finalized.
In the meantime I've left a few comments that I hope can help in moving forward the PR to a "ready to merge" state.

[didoo]

Reviewed latest changes and re-approved

[jorytindall]

For some reason the preview of the demo app isn't working for me (all I get is a blank page). The only thing I wanted to confirm was the animation/easing between the toggle button and the SideNav and whether that was either fixed or reverted to the same values to solve that separation issue in the animation rendering. Looking through the code I think they are the same, but could be wrong.

Otherwise, everything looks solid to me 🎉

[KristinLBradley]

Is this to override background styles being inherited from somewhere?

[alex-ju]

a reset for the <button> element

[KristinLBradley]

Added a few suggested text/punctuation edits.

[MelSumner]

@alex-ju any reason why the tab order is skipping the switchers/selects in the sidenav?

[alex-ju]

@alex-ju any reason why the tab order is skipping the switchers/selects in the sidenav?

yes, that's not an actual interactive element (it's a div styled to look like an organization select). this element is part of the demo app work that Cristiano suggested we introduce in a separate PR so we can address it there