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

.changeset/two-pumas-deny.md

@@ -0,0 +1,6 @@
+---
+"@hashicorp/design-system-components": minor
+"@hashicorp/design-system-tokens": minor
+---
+
+`SideNav` - add `@isCollapsible` (to control if users can collapse the sidenav on 'desktop' viewports) and `@isMinimized` (to control the default state on 'desktop' viewports) arguments

packages/components/addon/components/hds/side-nav/index.hbs

@@ -19,18 +19,15 @@
         @navigationText={{@a11yRefocusNavigationText}}
       />
     {{/if}}
-    {{#if this.isResponsive}}
+    {{#if this.showToggleButton}}
       {{! template-lint-disable no-invalid-interactive}}
       <div class="hds-side-nav__overlay" {{on "click" this.toggleMinimizedStatus}} />
       {{! template-lint-enable no-invalid-interactive}}
-      <button
-        class="hds-side-nav__menu-toggle-button"
-        type="button"
-        {{on "click" this.toggleMinimizedStatus}}
+      <Hds::SideNav::ToggleButton
         aria-label={{this.ariaLabel}}
-      >
-        <FlightIcon @name={{if this.isMinimized "menu" "x"}} @size="24" @stretched={{true}} />
-      </button>
+        @icon={{if this.isMinimized "chevrons-right" "chevrons-left"}}
+        {{on "click" this.toggleMinimizedStatus}}
+      />
     {{/if}}
   </:root>
   <:header as |Header|>

packages/components/addon/components/hds/side-nav/index.js

@@ -10,8 +10,9 @@ import { assert } from '@ember/debug';
 import { registerDestructor } from '@ember/destroyable';
 
 export default class HdsSideNavComponent extends Component {
-  @tracked isResponsive = this.args.isResponsive ?? true;
-  @tracked isMinimized = this.isResponsive; // we set it minimized by default so that if we switch viewport from desktop to mobile its already minimized
+  @tracked isResponsive = this.args.isResponsive ?? true; // controls if the component reacts to viewport changes
+  @tracked isMinimized = this.args.isMinimized ?? false; // sets the default state on 'desktop' viewports
+  @tracked isCollapsible = this.args.isCollapsible ?? false; // controls if users can collapse the sidenav on 'desktop' viewports
   @tracked isAnimating = false;
   @tracked isDesktop = true;
   hasA11yRefocus = this.args.hasA11yRefocus ?? true;
@@ -39,8 +40,11 @@ export default class HdsSideNavComponent extends Component {
   addEventListeners() {
     document.addEventListener('keydown', this.escapePress, true);
     this.desktopMQ.addEventListener('change', this.updateDesktopVariable, true);
-    // set initial state based on viewport
-    this.updateDesktopVariable({ matches: this.desktopMQ.matches });
+    // if not instantiated as minimized via arguments
+    if (!this.args.isMinimized) {
+      // set initial state based on viewport
+      this.updateDesktopVariable({ matches: this.desktopMQ.matches });
+    }
   }
 
   removeEventListeners() {
@@ -56,6 +60,10 @@ export default class HdsSideNavComponent extends Component {
     return this.isResponsive && !this.isDesktop && !this.isMinimized;
   }
 
+  get showToggleButton() {
+    return (this.isResponsive && !this.isDesktop) || this.isCollapsible;
+  }
+
   /**
    * @param ariaLabel
    * @type {string}
@@ -72,15 +80,15 @@ export default class HdsSideNavComponent extends Component {
     let classes = []; // `hds-side-nav` is already set by the "Hds::SideNav::Base" component
 
     // add specific class names for the different possible states
-    if (this.isDesktop) {
-      classes.push('hds-side-nav--is-desktop');
-    } else {
-      classes.push('hds-side-nav--is-mobile');
-    }
     if (this.isResponsive) {
       classes.push('hds-side-nav--is-responsive');
     }
-    if (this.isMinimized) {
+    if (!this.isDesktop && this.isResponsive) {
+      classes.push('hds-side-nav--is-mobile');
+    } else {
+      classes.push('hds-side-nav--is-desktop');
+    }
+    if (this.isMinimized && this.isResponsive) {
       classes.push('hds-side-nav--is-minimized');
     } else {
       classes.push('hds-side-nav--is-not-minimized');
@@ -94,7 +102,7 @@ export default class HdsSideNavComponent extends Component {
 
   @action
   escapePress(event) {
-    if (event.key === 'Escape' && !this.isMinimized) {
+    if (event.key === 'Escape' && !this.isMinimized && !this.isDesktop) {
       this.isMinimized = true;
     }
   }
@@ -127,6 +135,9 @@ export default class HdsSideNavComponent extends Component {
   updateDesktopVariable(event) {
     this.isDesktop = event.matches;
 
+    // automatically minimize on narrow viewports (when not in desktop mode)
+    this.isMinimized = !this.isDesktop;
+
     let { onDesktopViewportChange } = this.args;
 
     if (typeof onDesktopViewportChange === 'function') {

packages/components/addon/components/hds/side-nav/toggle-button.hbs

@@ -0,0 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<button class="hds-side-nav__toggle-button" type="button" ...attributes>
+  <FlightIcon @name={{@icon}} />
+</button>

packages/components/app/components/hds/side-nav/toggle-button.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/side-nav/toggle-button';

packages/components/app/styles/components/side-nav/header.scss

@@ -60,6 +60,16 @@
   justify-content: center;
   width: var(--token-side-nav-header-home-link-logo-size);
   height: var(--token-side-nav-header-home-link-logo-size);
+  transition:
+    width var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing),
+    height var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing);
+
+  .hds-side-nav--is-minimized & {
+    width: var(--token-side-nav-header-home-link-logo-size-minimized);
+    height: var(--token-side-nav-header-home-link-logo-size-minimized);
+  }
 }
 
 // "home-link"

packages/components/app/styles/components/side-nav/index.scss

@@ -7,4 +7,5 @@
 @use "./main.scss";
 @use "./header.scss";
 @use "./content.scss";
+@use "./toggle-button.scss";
 @use "./a11y-refocus.scss";

packages/components/app/styles/components/side-nav/main.scss

@@ -31,7 +31,13 @@
 
   // desktop
   &.hds-side-nav--is-desktop {
-    width: var(--hds-app-sidenav-width-expanded);
+    &.hds-side-nav--is-not-minimized {
+      width: var(--hds-app-sidenav-width-expanded);
+    }
+
+    &.hds-side-nav--is-minimized {
+      width: var(--hds-app-sidenav-width-minimized);
+    }
   }
 }
 
@@ -61,65 +67,6 @@
   }
 }
 
-
-// MENU/TOGGLE BUTTON
-
-.hds-side-nav__menu-toggle-button {
-  position: absolute;
-  z-index: 1;
-  color: var(--token-color-foreground-high-contrast);
-  background: none;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition-timing-function: var(--hds-app-sidenav-animation-easing);
-  transition-duration: var(--hds-app-sidenav-animation-duration);
-  transition-property: width, height, padding, border-radius, transform;
-
-  &:hover {
-    background-color: var(--token-color-palette-neutral-600);
-    border-color: transparent;
-  }
-
-  &:active {
-    background-color: var(--token-color-palette-neutral-500);
-    border-color: transparent;
-  }
-
-  &:focus {
-    background-color: var(--token-color-palette-neutral-500);
-    border-color: var(--token-color-focus-action-internal);
-    outline: 3px solid var(--token-color-focus-action-external);
-  }
-
-  // by default it's styled as "close" button
-  .hds-side-nav--is-mobile & {
-    width: 24px;
-    height: 24px;
-    padding: 1px;
-    background-color: var(--token-color-foreground-primary);
-    border-radius: 3px;
-    transform:
-      translateX(calc(var(--hds-app-sidenav-width-expanded) + 8px))
-      translateY(24px);
-    // z-index: 15; // not needed anymore?
-  }
-
-  // when the sidenav is minimized it's styled as "menu" button
-  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
-    width: 36px;
-    height: 36px;
-    padding: 5px;
-    border-radius: 5px;
-    transform: translateX(22px) translateY(var(--hds-app-sidenav-menu-button-y-shift));
-  }
-
-  // when it's desktop we _never_ want to show the menu/toggle button
-  .hds-side-nav--is-desktop & {
-    display: none;
-  }
-}
-
-
 // RESPONSIVE WRAPPER
 // this container element is used to control the width of the sidebar at different viewports (desktop/mobile) and states (minimized/expanded)
 
@@ -129,6 +76,7 @@
   height: 100%;
   color: var(--token-side-nav-color-foreground-primary); // we set a default color (in case generic content is added to the header/body/footer of the sidenav)
   background: var(--token-side-nav-color-surface-primary);
+  border-right: var(--token-side-nav-wrapper-border-width) solid var(--token-side-nav-wrapper-border-color);
 
   // RESPONSIVENESS - This controls the width of the "sidenav" container, and is independent (bur related) from the parent "sidebar" grid area
 
@@ -138,17 +86,11 @@
       var(--hds-app-sidenav-animation-easing);
   }
 
-  // mobile
-  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+  .hds-side-nav--is-minimized & {
     width: var(--hds-app-sidenav-width-minimized);
   }
 
-  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized & {
-    width: var(--hds-app-sidenav-width-expanded);
-  }
-
-  // desktop
-  .hds-side-nav--is-desktop & {
+  .hds-side-nav--is-not-minimized & {
     width: var(--hds-app-sidenav-width-expanded);
   }
 }
@@ -160,6 +102,15 @@
   padding-right: var(--token-side-nav-wrapper-padding-horizontal);
   padding-bottom: 8px; // by design
   padding-left: var(--token-side-nav-wrapper-padding-horizontal);
+  transition:
+    padding var(--hds-app-sidenav-animation-duration)
+    var(--hds-app-sidenav-animation-easing);
+
+  .hds-side-nav--is-minimized & {
+    padding-top: var(--token-side-nav-wrapper-padding-vertical-minimized);
+    padding-right: var(--token-side-nav-wrapper-padding-horizontal-minimized);
+    padding-left: var(--token-side-nav-wrapper-padding-horizontal-minimized);
+  }
 }
 
 .hds-side-nav__wrapper-body {
@@ -187,10 +138,9 @@
 // - shown (transitioning their opacity) when the sidenav is "expanded"
 
 .hds-side-nav-hide-when-minimized {
-  .hds-side-nav--is-mobile.hds-side-nav--is-minimized & {
+  .hds-side-nav--is-minimized & {
     visibility: hidden !important; // we need `!important` here to override the inline style applied to the single panels
     opacity: 0;
-    transition: none;
     // this is needed because, despite the element having `visibility: hidden`,
     // the child elements ("panels") have their visibility dynamically managed via JS
     // and when they have "visibility: visible" applied, they are not visually visible
@@ -206,8 +156,7 @@
     pointer-events: none;
   }
 
-  .hds-side-nav--is-mobile.hds-side-nav--is-not-minimized &,
-  .hds-side-nav--is-desktop & {
+  .hds-side-nav--is-not-minimized & {
     visibility: visible;
     opacity: 1;
     transition: