Add Mobile Menu, slideout, styling and component restructure

src/components/Header.css

@@ -41,4 +41,92 @@
   transform: rotate(-45deg);
   -webkit-transform-origin: 15% 95%;
   transform-origin: 15% 95%;
-}
+}
+
+/* Side Menu */
+.slideout-menu {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 256px;
+  min-height: 100vh;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  z-index: 0;
+  display: none;
+  background-color: #1a0828;
+}
+
+.slideout-menu-left {
+  left: 0;
+}
+
+.slideout-menu-right {
+  right: 0;
+}
+
+.slideout-panel {
+  position: relative;
+  z-index: 1;
+  will-change: transform;
+  background-color: #fff;
+  /* A background-color is required */
+  min-height: 100vh;
+}
+
+.slideout-open,
+.slideout-open body,
+.slideout-open .slideout-panel {
+  overflow: hidden;
+}
+
+.slideout-open .slideout-menu {
+  display: block;
+}
+
+.panel:before {
+  content: '';
+  display: block;
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.5s ease-in-out;
+}
+
+.panel-open:before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
+
+.mainmenu {
+  margin-top: 4rem;
+}
+
+.side--close:hover,
+.mainmenu li:hover {
+  background-color: #cfba89;
+}
+
+.side--close {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.mainmenu li a {
+  color: #fff;
+  font-size: 1.2rem;
+  height: 100%;
+  display: block;
+  padding: 0.5rem 0rem;
+  font-weight: 600;
+  font-family: 'Montserrat', sans-serif;
+}
+
+.mainmenu li a:hover,
+.side--close:hover,
+a:hover {
+  text-decoration: none !important;
+}