update layout

components/SiteMenu.vue

@@ -3,6 +3,7 @@
            class="menu-drawer menu-layout"
            @click="$emit('toggleMenu')">
     <div class="menu-content">
+      <div class="menu-close">close</div>
       <nav class="menu-content__body">
         <ul class="site-nav">
           <li v-for="item in siteNav"
@@ -11,10 +12,15 @@
           </li>
         </ul>
       </nav>
+      <div class="menu-content__footer">
+      </div>
       <footer class="menu-content__footer"></footer>
     </div>
     <div class="menu-header">
-      <div class="menu-header__inner">This is the Menu Header</div>
+      <div class="menu-header__inner">
+        <span class="menu-header__item site-title">Marc Leopold Photography</span>
+        <div class="menu-header__item menu-toggle">X</div>
+      </div>
     </div>
   </section>
 </template>
@@ -36,6 +42,12 @@ export default {
         { 'to': '/services', 'text': 'Services' },
         { 'to': '/about', 'text': 'About Me' },
         { 'to': '/contact', 'text': 'Contact Me' },
+      ],
+      socialNav: [
+        { 'to': 'https://www.facebook.com', 'text': 'Facebook', icon: '' },
+        { 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: '' },
+        { 'to': 'https://twitter.com', 'text': 'Twitter', icon: '' },
+        { 'to': 'https://uk.linkedin.com', 'text': 'LinkedIn', icon: '' },
       ]
     }
   },
@@ -52,20 +64,18 @@ export default {
   height: 100%;
   right: 0;
   top: -100%;
+
+  font-size: 1rem;
   
   transition: transform .5s;
   transform: translate3d(0, $site-menu__header-width, 0);
 
-  background-color: $color__bg-menu;
-  opacity: .7;
-
   &.is-open {
     transform: translate3d(0, 100%, 0);
   }
 
   @media (min-width: $bp__layout) {
-    width: 50%;
-    max-width: 30em;
+    width: 20em;
     top: 0;
     right: 100%;
     transform: translate3d($site-menu__header-width, 0, 0);
@@ -88,25 +98,38 @@ export default {
 .menu-content {
   width: 100%;
   height: 100%;
-  background-color: blue; // TEMP
+  background-color: $color__primary-100;
+
 }
 
 .menu-header {
   position: relative;
   flex: 0 0 $site-menu__header-height;
 
+  color: $color__neutral-700;
+  background-color: $color__neutral-300;
+  opacity: .97;
+
   @media (min-width: $bp__layout) {
     max-width: $site-menu__header-width;
   }
-
-  background-color: cyan; // TEMP
 }
 
   .menu-header__inner {
     width: 100%;
     height: 100%;
 
-    background-color: rgba(green, .5);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0 $site-menu__header-width 0 1rem;
+
+    @media (min-width: $bp__layout) {
+      justify-content: center;
+      font-size: 1.4rem;
+    }
 
     @media (min-width: $bp__layout) {
       position: absolute;
@@ -120,4 +143,47 @@ export default {
     }
     
   }
+
+  .menu-header__item {
+  }
+
+
+.site-title {
+  font-size: 1.2rem;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  line-height: 1.1;
+
+  @media (min-width: $bp__layout) {
+    font-size: 1.4rem;
+  }
+}
+
+.menu-toggle {
+  $width: 2rem;
+  $margin: ($site-menu__header-width - $width) / 2; 
+  width: $width;
+  height: $width;
+
+  position: absolute;
+  right: $margin;
+  top: $margin;
+
+  @media (min-width: $bp__layout) {
+    transform: rotate(90deg);
+  }
+
+  background-color: rgba(yellow, .3); // TEMP
+}
+
+.menu-close {
+  display: none;
+
+  @media (max-width: $bp__layout) {
+    display: initial;
+    position: absolute;
+    top: .5rem;
+    right: 1rem;
+  }
+}
 </style>