Update SideNav guidelines, anatomy, docs

website/docs/components/side-nav/index.md

@@ -5,7 +5,7 @@ caption: A side navigation menu that provides access to the main pages of the pr
 links:
   figma: https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components?node-id=26174%3A58558&t=kVEJBi3HIfTpV8nG-1
   github: https://github.com/hashicorp/design-system/tree/main/packages/components/addon/components/hds/side-nav
-related: ['components/breadcrumb','components/tabs']
+related: ['components/breadcrumb','components/tabs', 'layouts/app-frame']
 previewImage: assets/illustrations/components/side-nav.jpg
 navigation:
   hidden: false

website/docs/components/side-nav/partials/guidelines/guidelines.md

@@ -129,3 +129,26 @@ The SideNav should always be positioned on the left side of the viewport, occupy
 On smaller viewports, the SideNav 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/side-nav/sidenav-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.
+
+![SideNav collapse function](/assets/components/side-nav/sidenav-collapse-interaction.png)
+
+On smaller viewports, the SideNav will be rendered in its collapsed state **by default** and will overlay the main page content in its expanded state.
+
+![SideNav overlay on smaller viewports](/assets/components/side-nav/sidenav-overlay-small-viewport.png)
+
+### Collapsed reflow
+
+The collapse functionality of the SideNav gives control to the end-user to unlock more horizontal space in the main page. Thus, the main page content should reflow or reposition to occupy this space if the SideNav is in its collapsed state. If the main page content has a predetermined maximum width that is reached when the SideNav collapses, the content should transition smoothly to the new center of the main page area.
+
+This is handled out of the box by the [AppFrame](/components/app-frame) component, but may need to be accounted for in custom implementations of the application/page layout.
+
+<video width="100%" controls loop>
+  <source
+    src="/assets/components/side-nav/sidenav-expand-collapse.mp4"
+    type="video/mp4"
+  />
+</video>

website/docs/components/side-nav/partials/specifications/anatomy.md

@@ -1,19 +1,22 @@
 ## Anatomy
 
 <!-- image then table -->
+
 ![Anatomy of sideNav](/assets/components/side-nav/side-nav-anatomy.png =580x*)
 
 <!-- this is just an example, refer to other components to see how to fill this table -->
-| Element          | Usage                                           |
-|------------------|-------------------------------------------------|
-| **Header**       |                                                 |
-| Home link        | Required; either default or custom              |
-| Help dropdown    | Optional                                        |
-| User dropdown    | Required                                        |
-| Search bar       | Optional                                        |
-| **Body**         |                                                 |
-| Back button      | Required in sub-pages                           |
-| List title       | Optional                                        |
-| List item        | Required; at least one                          |
-| **Footer**       |                                                 |
-| Context switcher | Optional                                        |
+
+| Element          | Usage                              |
+| ---------------- | ---------------------------------- |
+| Collapse Toggle  | Optional                           |
+| **Header**       |                                    |
+| Home link        | Required; either default or custom |
+| Help dropdown    | Optional                           |
+| User dropdown    | Required                           |
+| Search bar       | Optional                           |
+| **Body**         |                                    |
+| Back button      | Required in sub-pages              |
+| List title       | Optional                           |
+| List item        | Required; at least one             |
+| **Footer**       |                                    |
+| Context switcher | Optional                           |