ui: Hoist DC menu into the top navigation bar (#10034)

* Add story for %main-nav-vertical plus additions for hoisting menu items

* Make sure we don't source app.css twice

* Hoist the DC menu

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

@@ -25,6 +25,16 @@
   @extend %main-nav-horizontal;
   margin-left: auto;
 }
+%main-nav-vertical-hoisted {
+  top: 11px;
+}
+%main-nav-vertical-hoisted > .popover-menu > label > button {
+  @extend %main-nav-horizontal-action;
+  border: none;
+}
+%main-nav-vertical-hoisted.is-active > label > * {
+  @extend %main-nav-horizontal-action-active;
+}
 %main-nav-sidebar,
 main {
   @extend %transition-pushover;

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

@@ -18,14 +18,54 @@
     <:main-nav>
   {{#if @dc}}
       <ul>
+
+        <li
+          class="dcs"
+          data-test-datacenter-menu
+        >
+          <PopoverMenu
+            aria-label="Datacenter"
+            @position="left"
+          as |components|>
+            <BlockSlot @name="trigger">
+              {{@dc.Name}}
+            </BlockSlot>
+            <BlockSlot @name="menu">
+{{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
+              <DataSource
+                @src="/*/*/datacenters"
+                @onchange={{action (mut @dcs) value="data"}}
+                @loading="lazy"
+              />
+  {{#each (sort-by 'Name' @dcs) as |item|}}
+                <MenuItem
+                  data-test-datacenter-picker
+                  class={{concat (if (eq @dc.Name item.Name) 'is-active') (if item.Local ' is-local') }}
+                  @href={{href-mut (hash dc=item.Name)}}
+                >
+                  <BlockSlot @name="label">
+                    {{item.Name}}
+                  {{#if item.Local}}
+                    <span>Local</span>
+                  {{/if}}
+                  </BlockSlot>
+                </MenuItem>
+  {{/each}}
+{{/let}}
+            </BlockSlot>
+          </PopoverMenu>
+        </li>
+
     {{#let (or this.nspaces @nspaces) as |nspaces|}}
     {{#if (can "choose nspaces" nspaces=nspaces)}}
           <li
             class="nspaces"
             data-test-nspace-menu
           >
-              Namespace
+              <PopoverMenu
-              <PopoverMenu @position="left" as |components api|>
+                aria-label="Namespace"
+                @position="left"
+              as |components api|>
                 <BlockSlot @name="trigger">
                   {{@nspace.Name}}
                 </BlockSlot>
@@ -70,41 +110,6 @@
           </li>
     {{/if}}
     {{/let}}
-          <li
-            class="dcs"
-            data-test-datacenter-menu
-          >
-              Datacenter
-              <PopoverMenu @position="left" as |components|>
-                <BlockSlot @name="trigger">
-                  {{@dc.Name}}
-                </BlockSlot>
-                <BlockSlot @name="menu">
-                  {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
-                  <DataSource
-                    @src="/*/*/datacenters"
-                    @onchange={{action (mut @dcs) value="data"}}
-                    @loading="lazy"
-                  />
-                  {{#each (sort-by 'Name' @dcs) as |item|}}
-                    <MenuItem
-                      data-test-datacenter-picker
-                      class={{concat (if (eq @dc.Name item.Name) 'is-active') (if item.Local ' is-local') }}
-                      @href={{href-mut (hash dc=item.Name)}}
-                    >
-                      <BlockSlot @name="label">
-                        {{item.Name}}
-                      {{#if item.Local}}
-                        <span>Local</span>
-                      {{/if}}
-                      </BlockSlot>
-                    </MenuItem>
-                  {{/each}}
-                  {{/let}}
-                </BlockSlot>
-              </PopoverMenu>
-
-          </li>
 {{#if (can "read services")}}
           <li data-test-main-nav-services class={{if (is-href 'dc.services' @dc.Name) 'is-active'}}>
               <a href={{href-to 'dc.services' @dc.Name}}>Services</a>

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

@@ -1,4 +1,11 @@
 .hashicorp-consul {
+  [role="banner"] nav .dcs {
+    @extend %main-nav-vertical-hoisted;
+    left: 100px;
+  }
+  [role="banner"] nav .dcs .popover-menu[aria-label]::before {
+    display: none;
+  }
   [role="banner"] a svg {
     fill: var(--brand-600);
   }

ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx

@@ -0,0 +1,71 @@
+---
+class: css
+---
+# MainNavVertical
+
+Used for styles of vertically orientated main application menus/navigation.
+
+Menu item active state is applied on `.is-active` `<li>` elements. Additionally you can use the following placeholders for setting certin states manually:
+
+- `%menu-nav-vertical-action-active` The 'active' or currently selected state.
+- `%menu-nav-vertical-action-intent` The highlighted state, usually for `:hover`
+  and `:focus`.
+
+`%menu-nav-vertical-hoisted` will 'hoist' an `<li>` element to the top of the
+containing block, the containing block defaults to the current viewport. If
+you need to define a different ancestor for a containing block you can use
+`transform` (see below).
+
+```hbs preview-template
+<div class="wrapper">
+  <nav class="main-nav-vertical in-viewport">
+    <ul>
+      <li role="separator">Title</li>
+      <li>
+        <a href="">One</a>
+      </li>
+      <li class="is-active">
+        <a href="">Two (is-active)</a>
+      </li>
+      <li class="with-intent">
+        <a href="">Three (with-intent)</a>
+      </li>
+      <li class="hoisted">
+        <a href="">Four (hoisted)</a>
+      </li>
+      <li role="separator">Title</li>
+      <li class="custom-active">
+        <a href="">One (custom-active)</a>
+      </li>
+      <li>
+        <a href="">Two</a>
+      </li>
+      <li>
+        <a href="">Three</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+```
+
+```css preview-template
+.main-nav-vertical {
+  @extend %main-nav-vertical;
+}
+.main-nav-vertical li.hoisted {
+  @extend %main-nav-vertical-hoisted;
+}
+.main-nav-vertical .with-intent > * {
+  @extend %main-nav-vertical-action-intent;
+}
+.main-nav-vertical .custom-active > * {
+  @extend %main-nav-vertical-action-active;
+}
+.wrapper {
+  /* a transform is required to mark this element as the containing block */
+  /* for hoisting, otherwise the viewport is the containing block */
+  transform: translate(0, 0);
+  background-color: var(--gray-600);
+  padding-top: 64px;
+}
+```

ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss

@@ -0,0 +1,29 @@
+#docfy-demo-preview-main-nav-vertical {
+  .main-nav-vertical {
+    @extend %main-nav-vertical;
+  }
+  .main-nav-vertical li.hoisted {
+    @extend %main-nav-vertical-hoisted;
+  }
+  .main-nav-vertical .with-intent > * {
+    @extend %main-nav-vertical-action-intent;
+  }
+  .main-nav-vertical .custom-active > * {
+    @extend %main-nav-vertical-action-active;
+  }
+  .wrapper {
+    /* a transform is required to mark this element as the containing block */
+    /* for hoisting, otherwise the viewport is the containing block */
+    transform: translate(0, 0);
+    background-color: var(--gray-600);
+    padding-top: 64px;
+  }
+  // TODO: Reduce the need for these debug overrides
+  .main-nav-vertical {
+    position: static;
+    height: auto;
+  }
+  .main-nav-vertical ul {
+    margin-bottom: 0 !important;
+  }
+}

ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss

@@ -40,3 +40,8 @@
 %main-nav-vertical-menu-panel {
   min-width: 248px;
 }
+%main-nav-vertical-hoisted {
+  visibility: visible;
+  position: fixed;
+  z-index: 10;
+}

ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss

@@ -40,6 +40,12 @@
   background-color: var(--gray-150);
   border-color: var(--gray-999);
 }
+%main-nav-vertical .popover-menu[aria-label]::before {
+  content: attr(aria-label);
+  display: block;
+  margin-top: -.5rem;
+  margin-bottom: .5rem;
+}
 %main-nav-vertical .is-local span:last-of-type {
   @extend %pill-200;
   color: var(--gray-000);

ui/packages/consul-ui/app/styles/debug.scss

@@ -1,6 +1,9 @@
-@import './base/reset/index';
+@import './app';
-@import './base/index';
 @import 'prism-coldark-dark';
+
+// temporary component debugging setup
+@import 'consul-ui/components/main-nav-vertical/debug';
+
 .docs {
   .tabular-collection,
   .list-collection {
@@ -31,8 +34,12 @@
     }
     ol,
     ul {
-      list-style-position: inside;
+      list-style-position: outside;
       margin-bottom: 1rem;
+      margin-left: 2rem;
+    }
+    ul {
+      list-style-type: disc;
     }
   }
   .docfy-demo {

ui/packages/consul-ui/lib/startup/templates/head.html.js

@@ -7,10 +7,9 @@ module.exports = ({ appName, environment, rootURL, config }) => `
   <link rel="icon" type="image/png" href="${rootURL}assets/favicon-32x32.png" sizes="32x32">
   <link rel="icon" type="image/png" href="${rootURL}assets/favicon-16x16.png" sizes="16x16">
   <link integrity="" rel="stylesheet" href="${rootURL}assets/vendor.css">
-  <link integrity="" rel="stylesheet" href="${rootURL}assets/${appName}.css">
+  <link integrity="" rel="stylesheet" href="${rootURL}assets/${
-  ${
+  environment === 'development' ? 'debug' : appName
-    environment === 'development' ? `<link rel="stylesheet" href="${rootURL}assets/debug.css">` : ``
+}.css">
-  }
   ${
     environment === 'test' ? `<link rel="stylesheet" href="${rootURL}assets/test-support.css">` : ``
   }