site menu complete

assets/scss/_buefy.scss

@@ -1,5 +1,5 @@
-$link: $color__neutral-800;
+$link: $color__primary-500;
-$link-hover: $color__primary-500;
+$link-hover: $color__primary-700;
 
 $primary: #f00;
 

components/SiteMenu.vue

@@ -8,12 +8,17 @@
       <div class="menu-bars"></div>
     </div>
     <div class="menu-content">
-      <div class="menu-close">close</div>
+      <div class="menu-close"
+           @click="$emit('closeMenu')"
+      >
+        <span class="menu-close__content">close</span>
+      </div>
       <nav class="menu-content__body">
         <ul class="site-nav">
           <li class="site-nav__item"
               v-for="item in siteNav"
               :key="item.to"
+              @click="$emit('closeMenu')"
           >
             <nuxt-link class="site-nav__link"
                        :to="item.to"
@@ -126,18 +131,32 @@ $transition-timing: .5s;
 }
 
 .menu-content {
+  $color-bg: $color__primary-100;
+
   display: flex;
   flex-direction: column;
 
   padding: .5rem;
 
-  @media (min-width: $bp__layout) {
-    padding: .5rem 1rem;
-  }
-
   width: 100%;
   height: 100%;
   background-color: $color__primary-100;
+  background: linear-gradient(
+    to right,
+    darken($color-bg, 2%),
+    $color-bg,
+    darken($color-bg, 2%)
+  );
+
+  @media (min-width: $bp__layout) {
+    padding: .5rem 1rem;
+    background: linear-gradient(
+      to top,
+      darken($color-bg, 2%),
+      $color-bg,
+      darken($color-bg, 2%)
+    );
+  }
 }
 
   .menu-content__body {
@@ -235,6 +254,7 @@ $transition-timing: .5s;
   font-size: 1.2rem;
   text-transform: uppercase;
   line-height: 1.1;
+  opacity: .8;
 
   @include font-title($weight: 400);
 
@@ -246,12 +266,37 @@ $transition-timing: .5s;
 
 .menu-close {
   display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  @include font-title();
+  text-transform: lowercase;
+  cursor: pointer;
+  color: $color__primary-800;
+
+  transition: opacity 0 $transition-timing;
+  opacity: 0;
+
+  @at-root .menu.is-open & {
+    transition: opacity 1s $transition-timing + .2s;
+    opacity: 1;
+  }
 
   @media (max-width: $bp__layout) {
     display: initial;
-    position: absolute;
+  }
-    top: .5rem;
+}
-    right: 1rem;
+
+  .menu-close__content {
+    display: block;
+    padding: .5rem .75rem 1rem 1rem;
+
+    transition: opacity .2s;
+    opacity: .6;
+
+    &:hover {
+      opacity: .8;
     }
   }
 
@@ -265,14 +310,49 @@ $transition-timing: .5s;
 
   .site-nav__item {
     text-transform: uppercase;
+    cursor: pointer;
   }
 
   .site-nav__link {
-    display: inline-block;
+    position: relative;
+    display: block;
     padding: .2em 0;
 
+    &.nuxt-link-exact-active {
+      pointer-events: none;
+      color: $color__primary-700;
+    }
+
     @media (min-width: $bp__layout) {
       padding: .5em 0;
+
+      &::before {
+        $size: .2rem;
+
+        content: '';
+        position: absolute;
+        height: $size;
+        width: $size;
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-top: .02rem;
+        margin-right: .3rem;
+
+        border-radius: 50%;
+
+        background-color: $color__primary-700;
+        
+        transition: opacity .5s;
+        opacity: 0;
+      }
+        
+      &.nuxt-link-exact-active::before {
+        transition: opacity 1s .5s;
+        opacity: .8;
+      }
+
+
     }
   }
 
@@ -296,6 +376,8 @@ $transition-timing: .5s;
     height: 2em;
     width: 5ch;
 
+    opacity: .7;
+
     @media (min-width: $bp__layout) {
       width: 3ch;
     }

layouts/default.vue

@@ -11,6 +11,7 @@
     <SiteMenu class="menu"
               :is-open="isMenuOpen"
               @toggleMenu="toggleMenu"
+              @closeMenu="closeMenu"
     />
   </div>
 </template>
@@ -25,7 +26,7 @@ export default {
 
   data() {
     return {
-      isMenuOpen: true,
+      isMenuOpen: false,
     }
   },