Improved navigation: folding, vsual feedback, optimization for mobile

(cherry picked from commit db50f282bab1e98397cc7434a811b8b7da2fe6dc)

_sass/layout.scss

@@ -113,8 +113,6 @@
 }
 
 .site-nav {
-  @include container;
-
   @include mq(md) {
     padding-top: $sp-8;
     padding-bottom: $gutter-spacing-sm;
@@ -165,6 +163,11 @@
   }
 }
 
+.site-title:hover,
+.site-button:hover {
+  background-color: darken($sidebar-color, 3%);
+}
+
 // stylelint-disable selector-max-type
 
 body {

_sass/navigation.scss

@@ -7,66 +7,76 @@
   margin-top: 0;
   margin-bottom: 0;
   list-style: none;
-}
-
-.nav-list-child-list {
-  padding-left: $sp-3;
-  list-style: none;
-
-  .nav-list-link {
-    color: $nav-child-link-color;
-  }
 
   .nav-list-item {
-    position: relative;
+    @include fs-4;
+    margin: 0;
 
-    &::before {
+    @include mq(md) {
+      @include fs-3;
+    }
+
+    .nav-list-link {
+      display: block;
+      height: $nav-list-item-height;
+      line-height: #{$nav-list-item-height - 2 * $sp-1};
+      padding-top: $sp-1;
+      padding-right: $gutter-spacing-sm;
+      padding-bottom: $sp-1;
+      padding-left: $nav-list-item-height;
+
+      &.active {
+        font-weight: 600;
+        text-decoration: none;
+      }
+
+      &:hover,
+      &.active {
+        background-color: darken($sidebar-color, 3%);
+      }
+    }
+
+    .nav-list-expander {
       position: absolute;
-      margin-top: 0.3em;
-      margin-left: -0.8em;
-      color: rgba($body-text-color, 0.3);
-      content: "- ";
+      width: $nav-list-item-height;
+      height: $nav-list-item-height;
+      padding-top: #{$nav-list-item-height / 4};
+      padding-right: #{$nav-list-item-height / 4};
+      padding-bottom: #{$nav-list-item-height / 4};
+      padding-left: #{$nav-list-item-height / 4};
+      fill: $link-color;
+
+      &:hover {
+        background-color: darken($sidebar-color, 3%);
+      }
+    }
+
+    > .nav-list {
+      display: none;
+      padding-left: $sp-3;
+      list-style: none;
+
+      .nav-list-item {
+        position: relative;
+
+        .nav-list-link {
+          color: $nav-child-link-color;
+        }
+      }
     }
 
     &.active {
-      &::before {
-        color: $body-text-color;
+      > .nav-list-expander svg {
+        transform: rotate(90deg);
+      }
+
+      > .nav-list {
+        display: block;
       }
     }
   }
 }
 
-.nav-list-item {
-  @include fs-4;
-  margin: 0;
-
-  @include mq(md) {
-    @include fs-3;
-  }
-
-  .nav-list-child-list {
-    display: none;
-  }
-
-  &.active {
-    .nav-list-child-list {
-      display: block;
-    }
-  }
-}
-
-.nav-list-link {
-  display: block;
-  padding-top: $sp-1;
-  padding-bottom: $sp-1;
-
-  &.active {
-    font-weight: 600;
-    color: $body-heading-color;
-    text-decoration: none;
-  }
-}
-
 // Small screen nav
 
 .site-nav {

_sass/support/_variables.scss

@@ -112,6 +112,7 @@ $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
 $nav-width: 264px !default;
 $nav-width-md: 248px !default;
+$nav-list-item-height: $sp-6 !default;
 $content-width: 800px !default;
 $header-height: 60px !default;
 $search-results-width: 500px !default;