site menu backgrounds implemented

assets/scss/_globals.scss

@@ -16,6 +16,7 @@ $z-index__menu: 100;
 $site-menu__width: 20rem;
 $site-menu__header-width: 3rem;
 $site-menu__header-height: 3rem;
+$site-menu__color-bg: $color__neutral-200;
 
 $gallery-featured-width: 20rem;
 $gallery-featured-width--compact: 12rem;

components/SiteMenu.vue

@@ -20,6 +20,11 @@
               :key="item.to"
               @click="$emit('closeMenu')"
           >
+            <div v-if="item.bgImgUrl"
+                 class="menu-background menu-link-background"
+                 :style="{ 'background-image': `url(${item.bgImgUrl})` }"
+            >
+            </div>
             <nuxt-link class="site-nav__link"
                        :to="item.to"
             >
@@ -29,8 +34,14 @@
         </ul>
         <ul class="site-nav__footer social-nav">
           <li v-for="item in socialNav"
+              class="social-nav-item"
               :key="item.to"
           >
+            <div class="menu-background social-background">
+              <b-icon class="social-background__icon"
+                      :icon="item.icon"
+              />
+            </div>
             <a class="social-nav__link"
                :href="item.to"
                target="_blank"
@@ -68,11 +79,11 @@ export default {
   data () {
     return {
       siteNav: [
-        { 'to': '/', 'text': 'Home'},
+        { 'to': '/', 'text': 'Home', bgImgUrl: 'https://via.placeholder.com/300x800/ff0000'},
-        { 'to': '/galleries', 'text': 'Galleries' },
+        { 'to': '/galleries', 'text': 'Galleries', bgImgUrl: 'https://via.placeholder.com/300x800/00ff00' },
-        { 'to': '/services', 'text': 'Services' },
+        { 'to': '/services', 'text': 'Services', bgImgUrl: 'https://via.placeholder.com/300x800/0000ff' },
-        { 'to': '/about', 'text': 'About Me' },
+        { 'to': '/about', 'text': 'About Me', bgImgUrl: 'https://via.placeholder.com/300x800/00ffff' },
-        { 'to': '/contact', 'text': 'Contact Me' },
+        { 'to': '/contact', 'text': 'Contact Me', bgImgUrl: 'https://via.placeholder.com/300x800/ffff00' },
       ],
       socialNav: [
         { 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: 'instagram' },
@@ -130,7 +141,7 @@ $transition-timing: .5s;
 }
 
 .menu-content {
-  $color-bg: $color__neutral-200;
+  $color-bg: $site-menu__color-bg;
 
   display: flex;
   flex-direction: column;
@@ -139,7 +150,7 @@ $transition-timing: .5s;
 
   width: 100%;
   height: 100%;
-  background-color: $color__primary-100;
+  background-color: $site-menu__color-bg; 
   background: linear-gradient(
     to right,
     darken($color-bg, 2%),
@@ -173,6 +184,8 @@ $transition-timing: .5s;
   }
 
   .menu-content__footer {
+    position: relative;
+    z-index: 10;
     display: flex;
     flex-direction: column;
     flex: 0 0 auto;
@@ -189,6 +202,7 @@ $transition-timing: .5s;
   $color-shade: darken($color__neutral-300, 5);
   // $color-shade: $color__neutral-200;
 
+  z-index: 20;
   position: relative;
   flex: 0 0 $site-menu__header-height;
 
@@ -244,10 +258,6 @@ $transition-timing: .5s;
     
   }
 
-  .menu-header__item {
-  }
-
-
 .site-title {
   font-size: 0.9rem;
   text-transform: uppercase;
@@ -263,6 +273,7 @@ $transition-timing: .5s;
 }
 
 .menu-close {
+  z-index: 30;
   display: none;
   position: absolute;
   top: 0;
@@ -307,11 +318,13 @@ $transition-timing: .5s;
 }
 
   .site-nav__item {
+    z-index: 1;
     text-transform: uppercase;
     cursor: pointer;
   }
 
   .site-nav__link {
+    z-index: 5;
     position: relative;
     display: block;
     padding: .2em 0;
@@ -372,6 +385,7 @@ $transition-timing: .5s;
   }
 
 .social-nav {
+  z-index: 10;
   list-style: none;
   display: flex;
 }
@@ -412,7 +426,7 @@ $transition-timing: .5s;
   $width: 2rem;
   $margin: ($site-menu__header-width - $width) / 2; 
 
-  z-index: 10;
+  z-index: 30;
   position: absolute;
   width: $width;
   height: $width;
@@ -467,6 +481,70 @@ $transition-timing: .5s;
   }
 }
 
+.menu-background {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+
+  @media (min-width: $bp__layout) {
+    right: $site-menu__header-width;
+  }
+}
+
+.menu-link-background {
+  background-size: cover;
+
+  transition: opacity .5s;
+  opacity: 0;
+
+  &::after {
+    $color: $site-menu__color-bg; //color of gradient overlay
+
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    background: linear-gradient(
+                  to bottom,
+                  rgba($color, 0),
+                  rgba($color, .5),
+                  rgba($color, .5),
+                  rgba($color, 0)
+                );
+  }
+}
+
+  .site-nav__item:hover .menu-link-background {
+    transition: opacity 2s;
+    opacity: .05;
+  }
+
+.social-background {
+  transition: opacity .5s;
+  opacity: 0;
+}
+
+  .social-background__icon {
+    position: absolute;
+    align-items: flex-end;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    left: 0;
+  }
+
+  .social-nav-item:hover .social-background {
+    transition: opacity 2s;
+    opacity: .15;
+  }
+
 
 </style>
 
@@ -476,4 +554,33 @@ $transition-timing: .5s;
     font-size: 1.1em;
   }
 }
+
+.social-background__icon i.mdi {
+  position: relative;
+
+  &::before {
+    font-size: 19em;
+    margin-bottom: -.05em;
+
+    @media (min-width: $bp__layout) {
+      margin-bottom: -.19em;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+
+    background: linear-gradient(
+                  to bottom,
+                  rgba($site-menu__color-bg, .8),
+                  rgba($site-menu__color-bg, 0)
+                );
+  }
+}
+
 </style>