ui: Sidebar navigation / redesign

.changelog/9553.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Move to a sidebar based main navigation
+```

ui/packages/consul-ui/app/components/app/index.hbs

@@ -0,0 +1,86 @@
+{{#let (hash
+  main=(concat guid '-main')
+) as |exported|}}
+
+<div
+  class="app"
+  ...attributes
+>
+  <ModalLayer />
+
+  <div
+    class="skip-links"
+    {{on "click" this.focus}}
+  >
+    <a href={{concat '#' exported.main}}>{{t 'components.app.skip_to_content'}}</a>
+    {{!--
+      In order to add further skip links from within other templates use:
+      <Portal @target="app-skip-links">
+        <a href="#sub-content">Skip to subcontent</a>
+      </Portal>
+      from within your template
+    --}}
+    <PortalTarget
+      @name="app-skip-links"
+      @mutiple={{true}}
+    ></PortalTarget>
+  </div>
+
+  <input
+    type="checkbox"
+    id={{concat guid "-main-nav-toggle"}}
+  />
+  <header
+    role="banner"
+  >
+    <label
+      tabindex="0"
+      for={{concat guid "-main-nav-toggle"}}
+      aria-label={{t 'components.app.toggle_menu'}}
+      {{on "keypress" this.keypressClick}}
+      {{on "mouseup" this.unfocus}}
+    ></label>
+      {{yield exported to="home-nav"}}
+      <div
+        data-test-navigation
+      >
+{{!--
+  The viewport tolerances here give us a 10 pixel buffer to make sure the menu
+  is marked as out of the viewport, we use all sides so we don't need to change
+  this should any CSS change
+--}}
+        <nav
+          aria-label={{t 'components.app.main'}}
+          class={{if this.navInViewport 'in-viewport'}}
+          {{in-viewport
+            onEnter=(set this 'navInViewport' true)
+            onExit=(set this 'navInViewport' false)
+            viewportTolerance=(hash top=-10 bottom =-10 left=-10 right=-10)
+          }}
+        >
+          {{yield exported to="main-nav"}}
+        </nav>
+{{!--
+  Whilst this has a role of navigation, it is 'complementary navigation' we
+  don't want to change the navigation role here, but we do want to label it as
+  'complementary' to the main content. The phrase 'complementary navigation' as
+  read by a screenreader should convey the meaning we are after here.
+--}}
+        <nav aria-label={{t 'components.app.complementary'}}>
+          {{yield exported to="complementary-nav"}}
+        </nav>
+
+      </div>
+  </header>
+  <main id={{concat guid '-main'}}>
+    {{yield exported to="main"}}
+  </main>
+  <footer
+    role="contentinfo"
+    data-test-footer
+  >
+    {{yield exported to="content-info"}}
+  </footer>
+</div>
+
+{{/let}}

ui/packages/consul-ui/app/components/app/index.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class AppComponent extends Component {
+  @service('dom') dom;
+
+  constructor(args, owner) {
+    super(...arguments);
+    this.guid = this.dom.guid(this);
+  }
+
+  @action
+  keypressClick(e) {
+    e.target.dispatchEvent(new MouseEvent('click'));
+  }
+
+  @action
+  focus(e) {
+    const href = e.target.getAttribute('href');
+    if (href.startsWith('#')) {
+      e.preventDefault();
+      this.dom.focus(href);
+    }
+  }
+
+  @action
+  unfocus(e) {
+    e.target.blur();
+  }
+}

ui/packages/consul-ui/app/components/app/index.scss

@@ -0,0 +1,70 @@
+.app {
+  --chrome-width: 300px;
+  --chrome-height: 64px;
+}
+.app .skip-links {
+  @extend %skip-links;
+}
+[role='banner'] {
+  @extend %main-header-horizontal;
+}
+[role="banner"] > label {
+  @extend %main-nav-horizontal-toggle-button;
+}
+.hashicorp-consul > input[id] {
+  @extend %main-nav-horizontal-toggle;
+}
+%main-header-horizontal > div {
+  @extend %main-nav-horizontal-panel;
+}
+
+%main-header-horizontal nav:first-of-type {
+  @extend %main-nav-vertical, %main-nav-sidebar;
+}
+%main-header-horizontal nav:last-of-type {
+  @extend %main-nav-horizontal;
+  margin-left: auto;
+}
+%main-nav-sidebar,
+main {
+  @extend %transition-pushover;
+}
+%main-nav-sidebar {
+  transition-property: left;
+  z-index: 10;
+}
+main {
+  top: var(--chrome-height);
+  transition-property: margin-left;
+}
+
+
+@media #{$--sidebar-open} {
+  %main-nav-horizontal-toggle + header > div > nav:first-of-type {
+    left: 0;
+  }
+  %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
+    left: calc(var(--chrome-width) * -1);
+  }
+  %main-nav-horizontal-toggle ~ main,
+  %main-nav-horizontal-toggle ~ footer {
+    margin-left: var(--chrome-width);
+  }
+  %main-nav-horizontal-toggle:checked ~ main,
+  %main-nav-horizontal-toggle:checked ~ footer {
+    margin-left: 0;
+  }
+}
+@media #{$--lt-sidebar-open} {
+  %main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
+    left: 0;
+  }
+  %main-nav-horizontal-toggle + header > div > nav:first-of-type {
+    left: calc(var(--chrome-width) * -1);
+  }
+  %main-nav-horizontal-toggle ~ main,
+  %main-nav-horizontal-toggle ~ footer {
+    margin-left: 0;
+  }
+}
+