site-menu styling/layout/functionality

assets/scss/_base.scss

@@ -6,3 +6,16 @@
 html {
   overflow: hidden;
 }
+
+body {
+  font-family: 'Raleway', sans-serif;
+  font-size: 100%;
+}
+
+a {
+  font-family: 'Montserrat', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Montserrat', sans-serif;
+}

assets/scss/_buefy.scss

@@ -0,0 +1,8 @@
+$link: $color__neutral-800;
+$link-hover: $color__primary-500;
+
+$primary: #f00;
+
+@import "~bulma/sass/utilities/_all.sass";
+@import "~bulma/bulma.sass";
+@import "~buefy/src/scss/buefy";

assets/scss/_globals.scss

@@ -1,4 +1,5 @@
 @import 'palette';
+@import 'mixins';
 
 $bp__m: 40em;
 
@@ -6,7 +7,9 @@ $bp__m: 40em;
 $bp__layout: 40em;
 
 $z-index__page: 50;
+$z-index__page-overlay: 75;
 $z-index__menu: 100;
 
+$site-menu__width: 25rem;
 $site-menu__header-width: 3rem;
 $site-menu__header-height: 3rem;

assets/scss/_mixins.scss

@@ -0,0 +1,10 @@
+@mixin font-body($weight: 400) {
+  font-family: 'Raleway', sans-serif;
+  font-weight: $weight;
+}
+
+@mixin font-title($weight: 400) {
+  font-family: 'Montserrat', sans-serif;
+  letter-spacing: 1px;
+  font-weight: $weight;
+}

assets/scss/style.scss

@@ -1 +1,2 @@
+@import 'buefy';
 @import 'base';

components/SiteMenu.vue

@@ -1,8 +1,12 @@
 <template>
   <section :class="{ 'is-open': isOpen }"
            class="menu-drawer menu-layout"
+  >
+    <div class="menu-header__item menu-toggle"
          @click="$emit('toggleMenu')"
     >
+      <div class="menu-bars"></div>
+    </div>
     <div class="menu-content">
       <div class="menu-close">close</div>
       <nav class="menu-content__body">
@@ -29,20 +33,20 @@
             >
               <b-icon class="social-nav__icon"
                       :icon="item.icon"
-              >
+              />
-              </b-icon>
             </a>
           </li>
         </ul>
       </nav>
       <footer class="menu-content__footer">
-        <p class="footer-attr">Copyright &copy; 2019 Marc Leopold Photography</p>
+        <p class="footer-attr">Copyright &copy; {{ new Date().getFullYear() }} Marc Leopold Photography</p>
       </footer>
     </div>
-    <div class="menu-header">
+    <div class="menu-header"
+         @click="$emit('toggleMenu')"
+    >
       <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>
@@ -81,7 +85,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$transition-timing: .5s;
+
 .menu-drawer {
+
   position: absolute;
   width: 100%;
   height: 100%;
@@ -90,7 +97,7 @@ export default {
 
   font-size: 1rem;
   
-  transition: transform .5s;
+  transition: transform $transition-timing;
   transform: translate3d(0, $site-menu__header-width, 0);
 
   &.is-open {
@@ -98,7 +105,7 @@ export default {
   }
 
   @media (min-width: $bp__layout) {
-    width: 25em;
+    width: $site-menu__width;
     top: 0;
     right: 100%;
     transform: translate3d($site-menu__header-width, 0, 0);
@@ -160,15 +167,34 @@ export default {
   }
 
 .menu-header {
+  $color-bg: $color__primary-300;
+  $color-shade: darken($color__primary-300, 5);
+
   position: relative;
   flex: 0 0 $site-menu__header-height;
 
-  color: $color__neutral-700;
+  color: $color__primary-100;
-  background-color: $color__neutral-300;
+  background-color: $color-bg;
-  opacity: .97;
+  background: linear-gradient(
+    to right,
+    $color-shade,
+    $color-bg,
+    $color-bg,
+    $color-shade
+  );
+  cursor: pointer;
 
   @media (min-width: $bp__layout) {
     max-width: $site-menu__header-width;
+    background: linear-gradient(
+      to top,
+      $color-shade,
+      $color-bg,
+      $color-bg,
+      $color-shade
+    );
+    opacity: .97;
+
   }
 }
 
@@ -210,30 +236,14 @@ export default {
   text-transform: uppercase;
   line-height: 1.1;
 
-  @include font-title();
+  @include font-title($weight: 400);
 
   @media (min-width: $bp__layout) {
     font-size: 1.4rem;
+    letter-spacing: 1.3px;
   }
 }
 
-.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;
 
@@ -296,9 +306,70 @@ export default {
   }
 
 .footer-attr {
+  color: $color__neutral-500;
   font-size: .7em;
 }
 
+.menu-toggle {
+  $width: 2rem;
+  $margin: ($site-menu__header-width - $width) / 2; 
+
+  z-index: 10;
+  position: absolute;
+  width: $width;
+  height: $width;
+  right: $margin;
+  bottom: $margin;
+
+  cursor: pointer;
+
+  transition: opacity .2s;
+  opacity: .6;
+
+  &:hover {
+    opacity: .8;
+  }
+
+  @media (min-width: $bp__layout) {
+    bottom: auto;
+    top: $margin;
+  }
+}
+
+.menu-bars {
+  $color: $color__primary-800;
+  $width: 4px;
+  $padding: 4px; // padding on top/bottom
+
+  position: absolute;
+  width: 100%;
+  top: $padding;
+  bottom: $padding;
+  left: 0;
+
+  border-top: $width solid $color;
+  border-bottom: $width solid $color;
+
+  transition: transform .3s .2s ease-out;
+  transform: scale(1, .7);
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: $width;
+    left: 0;
+    top: calc(50% - #{$width / 2});
+
+    background-color: $color;
+  }
+
+  @at-root .menu.is-open & {
+    transform: none;
+  }
+}
+
+
 </style>
 
 <style lang="scss">
@@ -307,5 +378,4 @@ export default {
     font-size: 1.1em;
   }
 }
-
 </style>

layouts/default.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="page-container">
     <div class="page">
+      <div class="page-overlay"
+           :class="{ 'is-active': isMenuOpen }"
+           @click="closeMenu"
+      >
+      </div>
       <nuxt />
     </div>
     <SiteMenu class="menu"
@@ -27,7 +32,10 @@ export default {
   methods: {
     toggleMenu () {
       this.isMenuOpen = !this.isMenuOpen
-    }
+    },
+    closeMenu () {
+      this.isMenuOpen = false
+    },
   }
 }
 </script>
@@ -51,6 +59,37 @@ export default {
   height: 100%;
 }
 
+.page-overlay {
+  $color: $color__primary-100;
+  z-index: $z-index__page-overlay;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+
+  background-color: rgba($color, .6);
+  background: linear-gradient(
+    to right,
+    rgba($color, 1),
+    rgba($color, 1) $site-menu__width + 3rem,
+    rgba($color, .8),
+    rgba($color, 1)
+  );
+  box-shadow: 0 0 70px 40px $color inset;
+
+  transition: opacity .5s .2s;
+  opacity: 0;
+  pointer-events: none;
+
+  @media (min-width: $bp__layout) {
+    &.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
 .menu {
   z-index: $z-index__menu;
 }

nuxt.config.js

@@ -18,7 +18,8 @@ module.exports = {
       { hid: 'description', name: 'description', content: pkg.description }
     ],
     link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800|Raleway:400,500,600,700,800,900' },
     ]
   },