Skip to content

Commit

Permalink
Merge branch 'hds-3807-app-sidenav-docs' of https://github.com/hashic…
Browse files Browse the repository at this point in the history
…orp/design-system into hds-3807-app-sidenav-docs
  • Loading branch information
KristinLBradley committed Sep 25, 2024
2 parents 8344bf1 + d104760 commit c1e5dc6
Show file tree
Hide file tree
Showing 21 changed files with 5 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ When the component is “responsive” there are different “states” (and ass
- `isDesktop`
- `isMinimized`

![Schema of the different visual states in response to the change of viewports and the corresponding logic variables](/assets/components/app-sidenav/responsiveness.png)
![Schema of the different visual states in response to the change of viewports and the corresponding logic variables](/assets/components/app-side-nav/responsiveness.png)

Each one of these states has CSS class names associated, and they’re used by the component code to determine what layout to render for the sidebar navigation.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,17 +89,17 @@ The App Side Nav should always be positioned on the left side of the viewport, o

On smaller viewports, the App Side Nav should collapse to maximize the available real estate on tablet and mobile devices. By tapping the menu icon, users can expand and access the full menu when needed.

![Responsive side-nav](/assets/components/app-side-nav/sidenav-position-and-responsive.png)
![Responsive side-nav](/assets/components/app-side-nav/app-side-nav-position-and-responsive.png)

## Collapse functionality

If the `isCollapsible` property is set to `true`, a collapse toggle button will be exposed to the end-user allowing them to manually expand and collapse the component.

![App Side Nav collapse function](/assets/components/app-side-nav/sidenav-collapse-interaction.png)
![App Side Nav collapse function](/assets/components/app-side-nav/app-side-nav-collapse-interaction.png)

On smaller viewports, the App Side Nav will be rendered in its collapsed state **by default** and will overlay the main page content in its expanded state.

![App Side Nav overlay on smaller viewports](/assets/components/app-side-nav/sidenav-overlay-small-viewport.png)
![App Side Nav overlay on smaller viewports](/assets/components/app-side-nav/app-side-nav-overlay-small-viewport.png)

### Collapsed reflow

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Anatomy

![Anatomy of sideNav](/assets/components/side-nav/side-nav-anatomy.png =580x*)
![Anatomy of sideNav](/assets/components/app-side-nav/app-side-nav-anatomy.png)

| Element | Usage |
| --------------- | ---------------------- |
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c1e5dc6

Please sign in to comment.