auro-sidenav: mobile design

[rsstdd]

Alaska Airlines Pull Request

Resolves: #13, #5, #15

Summary:

This pull request adds the ability to dynamically render the auro-sidenav either within or independently of an auro-accordion. This is achieved by adding a boolean attribute, collapsible, and conditional logic within the render to the auro-sidenav component.

Please see this discussion for details that affected this decision.

Next steps

There are some excellent lesser-known JavaScript window utilities we can leverage to allow media query-esque attribute management, namely window.matchMedia. Many notable libraries use this in various forms to get the media query usage out of components, and into dynamic attributes (read: covering many use cases).

This is a simple demo script someone on the content team might use to 1. pull pixel values from a design token, and 2. use that value with a performant window.matchMedia change handler.

<script>
  // This design token variable can be whatever/from wherever you want
  const DESIGN_TOKEN_VARIABLE = '--ds-grid-breakpoint-sm';
  // Read the breakpoint into JS
  const smallBreakpointPx = getComputedStyle(document.documentElement).getPropertyValue(DESIGN_TOKEN_VARIABLE)
  // Whatever valid media query you need
  const mediaQueryString = `(min-width: ${smallBreakpointPx})`

  // Get media matcher for query string
  const windowMediaMatcher = window.matchMedia(mediaQueryString);

  // Change `collapsible` attr. to reflect `e.matches`
  const toggleSidenavCollapse = (e) => {
    const auroSidenavExample = document.getElementById("collapsible-example")
    if (!e.matches) {
      auroSidenavExample.setAttribute('collapsible', "")
    } else {
      auroSidenavExample.removeAttribute("collapsible")
    }
  };
  windowMediaMatcher.onchange = toggleSidenavCollapse;
  window.onload = toggleSidenavCollapse;
</script>

Type of change:

Please delete options that are not relevant.

• [x] New capability

Checklist:

• [x] My update follows the CONTRIBUTING guidelines of this project
• [x] I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!
-- Auro Design System Team

[github-actions[bot]]

Surge demo deployment succeeded! 🚀🚀🚀

Auro Web Component Generator

[blackfalcon]

:tada: This PR is included in version 2.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: