side nav styles

scss/sections/_sidenav.scss

@@ -0,0 +1,85 @@
+.sidenav {
+  @include grid-pad;
+  @include panel-margin;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  @include media($large-screen) {
+    width: 21rem;
+  }
+
+  .sidenav__link {
+    display: block;
+    border-top: 1px solid $color-black;
+    padding: $gap ($gap * 2);
+    color: $color-black;
+    text-decoration: none;
+
+    &:hover {
+      background-color: $color-white;
+      color: $color-primary;
+    }
+
+    &.sidenav__link--disabled {
+      color: $color-shadow;
+      pointer-events: none;
+    }
+
+    &.sidenav__link--active {
+      @include h4;
+      background-color: $color-white;
+      color: $color-primary;
+      box-shadow: inset .4rem 0 0 0 $color-primary;
+
+      + ul {
+        background-color: $color-white;
+
+        .sidenav__link {
+          &.sidenav__link--active {
+            @include h5;
+            box-shadow: none;
+          }
+        }
+      }
+    }
+
+    + ul {
+      li {
+        .sidenav__link {
+          padding: ($gap * .75) ($gap * 3);
+          border: 0;
+          @include h5;
+          font-weight: normal;
+        }
+
+        &:last-child {
+          .sidenav__link {
+            padding-bottom: $gap * 1.5;
+          }
+        }
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+     li {
+      margin: 0;
+      display: block;
+    }
+  }
+
+  > ul {
+    > li {
+      &:last-child {
+        > .sidenav__link {
+          border-bottom: 1px solid $color-black;
+        }
+      }
+    }
+  }
+}