layout

components/SiteMenu.vue

@@ -1,20 +1,43 @@
 <template>
   <section :class="{ 'is-open': isOpen }"
            class="menu-drawer menu-layout"
-           @click="$emit('toggleMenu')">
+           @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"
+          <li class="site-nav__item"
-              :key="item.to">
+              v-for="item in siteNav"
-            <nuxt-link :to="item.to">{{ item.text }}</nuxt-link>
+              :key="item.to"
+          >
+            <nuxt-link class="site-nav__link"
+                       :to="item.to"
+            >
+              {{ item.text }}
+            </nuxt-link>
+          </li>
+        </ul>
+        <ul class="site-nav__footer social-nav">
+          <li class="social-nav__item"
+              v-for="item in socialNav"
+              :key="item.to"
+          >
+            <a class="social-nav__link"
+               :href="item.to"
+               target="_blank"
+            >
+              <b-icon class="social-nav__icon"
+                      :icon="item.icon"
+              >
+              </b-icon>
+            </a>
           </li>
         </ul>
       </nav>
-      <div class="menu-content__footer">
+      <footer class="menu-content__footer">
-      </div>
+        <p class="footer-attr">Copyright &copy; 2019 Marc Leopold Photography</p>
-      <footer class="menu-content__footer"></footer>
+      </footer>
     </div>
     <div class="menu-header">
       <div class="menu-header__inner">
@@ -44,10 +67,10 @@ export default {
         { 'to': '/contact', 'text': 'Contact Me' },
       ],
       socialNav: [
-        { 'to': 'https://www.facebook.com', 'text': 'Facebook', icon: '' },
+        { 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: 'instagram' },
-        { 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: '' },
+        { 'to': 'https://www.facebook.com', 'text': 'Facebook', icon: 'facebook' },
-        { 'to': 'https://twitter.com', 'text': 'Twitter', icon: '' },
+        { 'to': 'https://twitter.com', 'text': 'Twitter', icon: 'twitter' },
-        { 'to': 'https://uk.linkedin.com', 'text': 'LinkedIn', icon: '' },
+        { 'to': 'https://uk.linkedin.com', 'text': 'LinkedIn', icon: 'linkedin' },
       ]
     }
   },
@@ -75,7 +98,7 @@ export default {
   }
 
   @media (min-width: $bp__layout) {
-    width: 20em;
+    width: 25em;
     top: 0;
     right: 100%;
     transform: translate3d($site-menu__header-width, 0, 0);
@@ -96,12 +119,46 @@ export default {
 }
 
 .menu-content {
+  display: flex;
+  flex-direction: column;
+
+  padding: .5rem;
+
+  @media (min-width: $bp__layout) {
+    padding: .5rem 1rem;
+  }
+
   width: 100%;
   height: 100%;
   background-color: $color__primary-100;
-
 }
 
+  .menu-content__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 auto;
+    text-align: center;
+
+    @media (min-width: $bp__layout) {
+      align-items: normal;
+      text-align: left;
+    }
+  }
+
+  .menu-content__footer {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    text-align: center;
+    padding: 1em 0 0;
+
+    @media (min-width: $bp__layout) {
+      text-align: left;
+    }
+  }
+
 .menu-header {
   position: relative;
   flex: 0 0 $site-menu__header-height;
@@ -150,10 +207,11 @@ export default {
 
 .site-title {
   font-size: 1.2rem;
-  letter-spacing: 1px;
   text-transform: uppercase;
   line-height: 1.1;
 
+  @include font-title();
+
   @media (min-width: $bp__layout) {
     font-size: 1.4rem;
   }
@@ -186,4 +244,68 @@ export default {
     right: 1rem;
   }
 }
+
+.site-nav {
+  font-size: 1.4em;
+
+  @media (min-width: $bp__layout) {
+    font-size: .8em;
+  }
+}
+
+  .site-nav__item {
+    text-transform: uppercase;
+  }
+
+  .site-nav__link {
+    display: inline-block;
+    padding: .2em 0;
+
+    @media (min-width: $bp__layout) {
+      padding: .5em 0;
+    }
+  }
+
+  .site-nav__footer {
+    margin-top: 1.8em;
+  }
+
+.social-nav {
+  list-style: none;
+  display: flex;
+
+  @media (min-width: $bp__layout) {
+  }
+}
+
+  .social-nav__item {
+  }
+
+  .social-nav__link {
+    display: block;
+    height: 2em;
+    width: 5ch;
+
+    @media (min-width: $bp__layout) {
+      width: 3ch;
+    }
+  }
+
+  .social-nav__icon.icon {
+    justify-content: normal;
+  }
+
+.footer-attr {
+  font-size: .7em;
+}
+
+</style>
+
+<style lang="scss">
+@media (min-width: $bp__layout) {
+  .menu-content .social-nav__icon i::before {
+    font-size: 1.1em;
+  }
+}
+
 </style>