update nav-explore style -- test

src/css/nav.css

@@ -202,14 +202,79 @@
 }
 
 .nav-panel-explore {
-  background: var(--nav-background);
+  position: relative;
   display: flex;
-  flex-direction: column;
-  position: absolute;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 1;
+  height: var(--toolbar-height);
+  margin: 1rem 0.7rem;
+  padding: 0 1.25em;
+}
+
+.nav-panel-explore .backdrop {
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
+  z-index: 2;
+}
+
+.backdrop.is-active {
+  display: block;
+}
+
+.nav-panel-explore h2.title {
+  color: var(--nav-heading-font-color);
+  font-size: inherit;
+  font-weight: var(--body-font-weight-bold);
+  margin: 0;
+  /* padding: 0.25em 0 0.125em 0.75em; */
+}
+
+.nav-panel-explore .version-menu-toggle {
+  color: var(--color-bwg-main);
+  font-weight: 600;
+  background: url(../img/chevron.svg) no-repeat;
+  background-position: right 0.5rem top 50%;
+  background-size: auto 0.75em;
+  outline: none;
+  line-height: inherit;
+  padding: 0.5rem 2rem 0.5rem 1rem;
+  position: relative;
+  border-radius: 0.5rem;
+  border: 2px solid var(--color-smoke-90);
+  transition: all 0.15s ease-in-out;
+  z-index: var(--z-index-page-version-menu);
+}
+
+.nav-panel-explore .version-menu-toggle:hover {
+  border: 2px solid var(--color-bwg-main);
+}
+
+.nav-panel-explore .version-menu {
+  display: none;
+  /* display: flex; */
+  min-width: 80px;
+  flex-direction: column;
+  align-items: flex-start;
+  /* background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat; */
+  background-color: white;
+  padding: 0;
+  position: absolute;
+  top: 35px;
+  right: 20px;
+  white-space: nowrap;
+  z-index: var(--z-index-page-version-menu);
+  box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
+  border-radius: 0.5rem;
+  align-items: center;
+}
+
+.nav-panel-explore .version-menu.is-active {
+  display: flex;
 }
 
 .nav-panel-explore:not(:first-child) {
@@ -217,7 +282,7 @@
   max-height: var(--nav-panel-explore-height);
 }
 
-.nav-panel-explore .context {
+/* .nav-panel-explore .context {
   font-size: calc(15 / var(--rem-base) * 1rem);
   flex-shrink: 0;
   color: var(--nav-muted-color);
@@ -228,13 +293,13 @@
   justify-content: space-between;
   line-height: 1;
   height: var(--drawer-height);
-}
+} */
 
 .nav-panel-explore:not(:first-child) .context {
   cursor: pointer;
 }
 
-.nav-panel-explore .context .version {
+/* .nav-panel-explore .context .version {
   display: flex;
   align-items: inherit;
 }
@@ -257,7 +322,7 @@
   overscroll-behavior: none;
   max-height: 100%;
   display: block;
-}
+} */
 
 .nav-panel-explore:not(.is-active) .components {
   display: none;
@@ -265,45 +330,58 @@
 
 .nav-panel-explore .component {
   display: block;
+  width: 100%;
 }
 
-.nav-panel-explore .component + .component {
+/* .nav-panel-explore .component + .component {
   margin-top: 0.75rem;
 }
 
 .nav-panel-explore .component:last-child {
   margin-bottom: 0.75rem;
-}
+} */
 
-.nav-panel-explore .component .title {
+/* .nav-panel-explore .component .title {
   font-weight: var(--body-font-weight-bold);
   text-indent: 0.375rem hanging;
-}
+} */
 
-.nav-panel-explore .versions {
+.nav-panel-explore .version-menu .versions {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   flex-wrap: wrap;
   padding-left: 0;
-  margin: -0.125rem -0.375rem 0 0.375rem;
   line-height: 1;
   list-style: none;
+  width: 100%;
 }
 
 .nav-panel-explore .component .version {
-  margin: 0.375rem 0.375rem 0 0;
+  /* margin: 0.375rem 0.375rem 0 0; */
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.nav-panel-explore .component .version:hover {
+  background-color: var(--color-blue-10);
 }
 
 .nav-panel-explore .component .version a {
-  background: var(--nav-border-color);
-  border-radius: 0.25rem;
+  width: 100%;
+  text-align: center;
   white-space: nowrap;
-  padding: 0.25em 0.5em;
-  display: inherit;
-  opacity: 0.75;
+  /* padding: 0.25em 0.5em; */
+  /* opacity: 0.75; */
+  color: var(--color-gray-50);
+  display: block;
+  padding: 0.5rem 0;
+  border-radius: 0.5rem;
 }
 
 .nav-panel-explore .component .is-current a {
-  background: var(--nav-heading-font-color);
+  background: var(--color-bwg-main);
   color: var(--nav-secondary-background);
   font-weight: var(--body-font-weight-bold);
   opacity: 1;

src/js/01-nav.js

@@ -15,6 +15,10 @@
   var menuPanel = navContainer.querySelector('[data-panel=menu]')
   if (!menuPanel) return
   var explorePanel = navContainer.querySelector('[data-panel=explore]')
+  var selector = document.querySelector('.page-versions')
+  var backdrop = explorePanel.querySelector('.backdrop')
+  var versionMenu = explorePanel.querySelector('.version-menu')
+  var versions = versionMenu?.querySelectorAll('.component')
 
   var currentPageItem = menuPanel.querySelector('.is-current-page')
   var originalPageItem = currentPageItem
@@ -52,14 +56,29 @@
   }
 
   if (explorePanel) {
-    explorePanel.querySelector('.context').addEventListener('click', function () {
+    explorePanel.querySelector('.version-menu-toggle').addEventListener('click', function (e) {
       // NOTE logic assumes there are only two panels
-      find(nav, '[data-panel]').forEach(function (panel) {
-        panel.classList.toggle('is-active')
-      })
+      // find(nav, '[data-panel]').forEach(function (panel) {
+      //   panel.classList.toggle('is-active')
+      // })
+      if (!versions.length) return
+
+      versionMenu.classList.toggle('is-active')
+      backdrop.classList.toggle('is-active')
+      e.stopPropagation() // trap event
     })
   }
 
+  backdrop.addEventListener('click', function () {
+    versionMenu.classList.remove('is-active')
+    backdrop.classList.remove('is-active')
+  })
+
+  document.documentElement.addEventListener('click', function () {
+    versionMenu.classList.remove('is-active')
+    backdrop.classList.remove('is-active')
+  })
+
   // NOTE prevent text from being selected by double click
   menuPanel.addEventListener('mousedown', function (e) {
     if (e.detail > 1) e.preventDefault()

src/partials/nav-explore.hbs

 <div class="nav-panel-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
   {{#if page.component}}
-  <div class="context">
-    <span class="title">{{page.component.title}}</span>
-    <span class="version">{{#if (or page.componentVersion.version (ne page.componentVersion.displayVersion 'default'))}}{{page.componentVersion.displayVersion}}{{/if}}</span>
-  </div>
+  <div class="backdrop"></div>
+  <h2 class="title">{{page.component.title}}</h2>
+  <button class="version-menu-toggle">{{#if (or page.componentVersion.version (ne page.componentVersion.displayVersion 'default'))}}{{page.componentVersion.displayVersion}}{{/if}}</button>
   {{/if}}
-  <ul class="components">
+  <ul class="version-menu">
     {{#each site.components}}
     <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
-      <div class="title"><a href="{{{relativize ./url}}}">{{{./title}}}</a></div>
+      {{!-- <div class="title"><a href="{{{relativize ./url}}}">{{{./title}}}</a></div> --}}
       {{#if (or ./versions.[1] ./versions.[0].version (ne ./versions.[0].displayVersion 'default'))}}
       <ul class="versions">
         {{#each ./versions}}
         <li class="version
           {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
           {{~#if (eq this ../latest)}} is-latest{{/if}}">
-          <a href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+          <a href="{{{relativize ./url}}}">v{{./displayVersion}}</a>
         </li>
         {{/each}}
       </ul>

src/partials/nav.hbs

@@ -2,8 +2,8 @@
   <aside class="nav">
     <div class="panels">
 {{!-- {{> page-versions}} --}}
-{{> nav-menu}}
 {{> nav-explore}}
+{{> nav-menu}}
     </div>
   </aside>
 </div>