menu styles

styles/elements/_menu.scss

@@ -0,0 +1,49 @@
+.menu {
+  background-color: $color-blue-darkest;
+  color: $color-white;
+  position: absolute;
+  min-width: 30rem;
+  max-height: 80vh;
+  overflow-y: auto;
+  padding-bottom: $gap * 2;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
+
+  .menu__heading {
+    @include h5;
+    margin: 0;
+    padding: ($gap * 3) ($gap * 2) $gap;
+  }
+
+  .menu__list {
+    margin: 0;
+    padding: 0;
+
+    > .menu__list__item {
+      margin: 0;
+
+      > a {
+        @include h5;
+        font-weight: normal;
+        text-decoration: none;
+        display: block;
+        color: $color-white;
+        padding: ($gap * .75) ($gap * 2);
+
+        .icon {
+          @include icon-color($color-white);
+          @include icon-size(10);
+          margin-left: $gap;
+        }
+
+        &:hover {
+          background-color: $color-blue-darker;
+        }
+      }
+    }
+  }
+
+  .menu__button {
+    margin: ($gap * 2) ($gap * 2) 0;
+    white-space: nowrap;
+  }
+}