slide nav explore panel up, over nav menu panel

diff --git a/src/css/nav.css b/src/css/nav.css
index 372a851..550d46b 100644 (file)
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -8,10 +8,6 @@
   z-index: var(--z-index-nav);
 }
 
-.nav-container.is-active {
-  display: block;
-}
-
 @media screen and (min-width: 769px) {
   .nav-container {
     width: var(--nav-width);
@@ -29,6 +25,10 @@
   }
 }
 
+.nav-container.is-active {
+  display: block;
+}
+
 .nav {
   background: var(--nav-background);
   position: relative;
@@ -62,11 +62,9 @@ html.is-clipped--nav {
 }
 
 .nav-panel-menu {
-  flex-grow: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  /* help Chrome calculate the height correctly; must match .nav value minus height of drawer */
   height: var(--nav-panel-height-mobile);
 }
 
@@ -76,8 +74,19 @@ html.is-clipped--nav {
   }
 }
 
-.nav-panel-menu:not(.is-active) {
-  display: none;
+.nav-panel-menu:not(.is-active) .nav-menu {
+  opacity: 0.75;
+}
+
+.nav-panel-menu:not(.is-active)::after {
+  content: "";
+  background: rgba(0, 0, 0, 0.5);
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
 
 .nav-panel-menu::-webkit-scrollbar {
@@ -98,15 +107,14 @@ html.is-clipped--nav {
 }
 
 .nav-menu h3.title {
-  margin: 0;
-  font-weight: 500;
   color: var(--nav-heading-font-color);
-  font-size: 1em;
+  font-size: inherit;
+  font-weight: 500;
+  margin: 0;
   padding: 0.25em 0 0.125em;
 }
 
-.nav-menu a,
-.nav-menu a:visited {
+.nav-menu a {
   color: inherit;
 }
 
@@ -165,12 +173,14 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore {
+  background: var(--nav-background);
   display: flex;
   flex-direction: column;
-}
-
-.nav-panel-explore.is-active {
-  height: inherit;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  max-height: calc(50% + var(--drawer-height));
 }
 
 .nav-panel-explore .context {
@@ -193,10 +203,6 @@ html.is-clipped--nav {
   }
 }
 
-.nav-panel-explore.is-active .context {
-  box-shadow: 0 1px 0 var(--nav-panel-divider-color);
-}
-
 .nav-panel-explore .context .version {
   background-image: url(../img/chevron.svg);
   background-repeat: no-repeat;
@@ -209,13 +215,17 @@ html.is-clipped--nav {
   flex-grow: 1;
   box-shadow: inset 0 1px 5px var(--nav-panel-divider-color);
   background: var(--nav-secondary-background);
-  padding: 0.5rem;
+  padding: 0.5rem 0.5rem 0 0.5rem;
   margin: 0;
   overflow-y: auto;
   max-height: 100%;
   display: block;
 }
 
+.nav-panel-explore .component:last-child {
+  margin-bottom: 0.75rem;
+}
+
 .nav-panel-explore:not(.is-active) .components {
   display: none;
 }