update navigation style

src/css/base.css

@@ -32,7 +32,7 @@ a {
 }
 
 a:hover {
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 a:active {

src/css/header.css

@@ -10,7 +10,9 @@ body {
 
 .navbar {
   background: var(--color-white);
+  border-bottom: 1px solid var(--color-bwg-main);
   color: var(--color-bwg-main);
+  height: 4.5rem;
   font-size: calc(16 / var(--rem-base) * 1rem);
   position: fixed;
   top: 0;

src/css/nav.css

@@ -16,7 +16,8 @@
 
 @media screen and (min-width: 769px) {
   .nav-container {
-    width: var(--nav-width);
+    /* width: var(--nav-width); */
+    width: 20.125rem;
   }
 }
 
@@ -71,6 +72,7 @@
   overflow-y: scroll;
   overscroll-behavior: none;
   height: var(--nav-panel-menu-height);
+  padding: 1.25em;
 }
 
 .nav-panel-menu:not(.is-active) .nav-menu {
@@ -90,9 +92,9 @@
 
 .nav-menu {
   min-height: 100%;
-  padding: 0.5rem 0.75rem;
-  line-height: var(--nav-line-height);
   position: relative;
+  padding: 0.5rem 0.5rem 0.5rem 0;
+  line-height: 1.375;
 }
 
 .nav-menu-toggle {
@@ -128,8 +130,8 @@
 
 .nav-list {
   list-style: none;
-  margin: 0 0 0 0.75rem;
   padding: 0;
+  margin: 0;
 }
 
 .nav-menu > .nav-list + .nav-list {
@@ -138,6 +140,24 @@
 
 .nav-item {
   margin-top: 0.5em;
+  position: relative;
+}
+
+.nav-item .nav-link {
+  padding: 0.5rem 0 0.35rem 0.25rem;
+  display: block;
+  border-bottom: 1px solid transparent;
+  border-radius: 3px;
+}
+
+.nav-item .nav-link:hover {
+  border-bottom: 1px solid var(--color-bwg-main);
+  border-radius: 0;
+}
+
+.nav-item.is-current-page>a {
+  background: var(--color-bwg-main);
+  color: var(--color-white);
 }
 
 /* adds some breathing room below a nested list */
@@ -151,6 +171,30 @@
   margin: 0;
 }
 
+.nav-item[data-depth="1"] > .nav-link {
+  padding-left: 1.25rem;
+}
+
+.nav-item[data-depth="1"] > .nav-item-toggle {
+  left: 1rem;
+}
+
+.nav-item[data-depth="2"] > .nav-link {
+  padding-left: 1.75rem;
+}
+
+.nav-item[data-depth="2"] > .nav-item-toggle {
+  left: 1.5rem;
+}
+
+.nav-item[data-depth="3"] > .nav-link {
+  padding-left: 2.25rem;
+}
+
+.nav-item[data-depth="3"] > .nav-item-toggle {
+  left: 2rem;
+}
+
 .nav-item:not(.is-active) > .nav-list {
   display: none;
 }
@@ -164,8 +208,9 @@
   position: absolute;
   height: calc(var(--nav-line-height) * 1em);
   width: calc(var(--nav-line-height) * 1em);
-  margin-top: -0.05em;
+  margin-top: 0.35em;
   margin-left: calc(var(--nav-line-height) * -1em);
+  top: 0.15rem;
 }
 
 .nav-item.is-active > .nav-item-toggle {

src/partials/nav-tree.hbs

@@ -11,7 +11,8 @@
       {{~#if (eq ./urlType 'internal')}}{{{relativize ./url}}}
       {{~else}}{{{./url}}}{{~/if}}">{{{./content}}}</a>
     {{else}}
-    <span class="nav-text">{{{./content}}}</span>
+    {{!-- <span class="nav-text">{{{./content}}}</span> --}}
+    <a class="nav-link" href="#">{{{./content}}}</a>
     {{/if}}
     {{/if}}
 {{> nav-tree navigation=./items level=(increment ../level)}}