move styles and js to the root directory

styles/elements/_sidenav.scss

@@ -0,0 +1,87 @@
+.sidenav {
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+     li {
+      margin: 0;
+      display: block;
+    }
+  }
+
+  .sidenav__link {
+    display: block;
+    border-top: 1px solid $color-black;
+    padding: $gap ($gap * 2);
+    color: $color-black;
+    text-decoration: none;
+    white-space: nowrap;
+
+    .sidenav__link-icon {
+      margin-left: - ($gap * .5);
+    }
+
+    &.sidenav__link--disabled {
+      color: $color-shadow;
+      pointer-events: none;
+    }
+
+    &.sidenav__link--active {
+      @include h4;
+      background-color: $color-white;
+      color: $color-primary;
+      box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
+
+      .sidenav__link-icon {
+        @include icon-style-active;
+      }
+
+      + ul {
+        background-color: $color-white;
+
+        .sidenav__link {
+          &--active {
+            @include h5;
+            color: $color-primary;
+            box-shadow: none;
+          }
+        }
+      }
+    }
+
+    + ul {
+      padding-bottom: $gap / 2;
+
+      li {
+        .sidenav__link {
+          @include h5;
+          padding: $gap * .75;
+          padding-left: 4.5rem;
+          border: 0;
+          font-weight: normal;
+
+          .sidenav__link-icon {
+            @include icon-size(12);
+            flex-shrink: 0;
+            margin-right: 1.5rem;
+            margin-left: -3rem
+          }
+
+          .sidenav__link-label {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+
+    &:hover {
+      color: $color-primary;
+
+      .sidenav__link-icon {
+        @include icon-style-active;
+      }
+
+    }
+  }
+}