marc-leopold/components/SiteMenu.vue

<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"
           @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')"
          >
            <div v-if="item.bgImgUrl"
                 class="menu-background menu-link-background"
                 :style="{ 'background-image': loadMenuImages ? `url(${item.bgImgUrl})` : 'none' }"
            >
            </div>
            <nuxt-link class="site-nav__link"
                       :to="item.to"
                       :exact="item.to === '/'"
            >
              {{ item.text }}
            </nuxt-link>
          </li>
        </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"
            >
              <b-icon class="social-nav__icon"
                      :icon="item.icon"
              />
            </a>
          </li>
        </ul>
      </nav>
      <footer class="menu-content__footer">
        <p class="footer-attr">Copyright &copy; {{ new Date().getFullYear() }} Marc Leopold Photography</p>
      </footer>
    </div>
    <div class="menu-header"
         @click="$emit('toggleMenu')"
    >
      <div class="menu-header__inner">
        <span class="menu-header__item site-title">Marc Leopold Photography</span>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    isOpen: {
      type: Boolean,
      required: true
    }
  },

  data () {
    return {
      loadMenuImages: true,
      siteNav: [
        { 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'},
        { 'to': '/galleries', 'text': 'Galleries', bgImgUrl: '/img/photo-box--bw.jpg' },
        { 'to': '/services', 'text': 'Services', bgImgUrl: '/img/camera--bw.jpg' },
        { 'to': '/about', 'text': 'About Me', bgImgUrl: '/img/silhouette--dark.jpg' },
        { 'to': '/contact', 'text': 'Contact Me', bgImgUrl: '/img/mail--bw.jpg' },
      ],
      socialNav: [
        { 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: 'instagram' },
        { 'to': 'https://www.facebook.com', 'text': 'Facebook', icon: 'facebook' },
        { 'to': 'https://twitter.com', 'text': 'Twitter', icon: 'twitter' },
        { 'to': 'https://uk.linkedin.com', 'text': 'LinkedIn', icon: 'linkedin' },
      ]
    }
  },

  mounted () {
    const mq = window.matchMedia("(min-width: 40em)")
    this.loadMenuImages = mq.matches
  },
}
</script>

<style lang="scss" scoped>
$transition-timing: .5s;

.menu-drawer {

  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: -100%;

  font-size: 1rem;
  
  transition: transform $transition-timing;
  transform: translate3d(0, $site-menu__header-width, 0);

  &.is-open {
    transform: translate3d(0, 100%, 0);
  }

  @media (min-width: $bp__layout) {
    width: $site-menu__width;
    top: 0;
    right: 100%;
    transform: translate3d($site-menu__header-width, 0, 0);

    &.is-open {
      transform: translate3d(100%, 0, 0);
    }
  }
}

.menu-layout {
  display: flex;
  flex-direction: column;

  @media (min-width: $bp__layout) {
    flex-direction: row;
  }
}

.menu-content {
  $color-bg: $site-menu__color-bg;

  display: flex;
  flex-direction: column;

  padding: .5rem;

  width: 100%;
  height: 100%;
  background-color: $site-menu__color-bg; 
  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 {
    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 {
    position: relative;
    z-index: 10;
    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 {
  $color-bg: $color__neutral-300;
  $color-shade: darken($color__neutral-300, 5);
  // $color-shade: $color__neutral-200;

  z-index: 20;
  position: relative;
  flex: 0 0 $site-menu__header-height;

  color: $color__neutral-900;
  background-color: $color-bg;
  background: linear-gradient(
    to right,
    $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;

  }
}

  .menu-header__inner {
    width: 100%;
    height: 100%;

    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;
      top: 0;
      right: 100%;
      width: 100vh;
      height: $site-menu__header-width;

      transform-origin: 100% 0;
      transform: rotate(-90deg);
    }
    
  }

.site-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  line-height: 1.1;
  opacity: .8;

  @include font-title($weight: 400);

  @media (min-width: $bp__layout) {
    font-size: 1.0rem;
    letter-spacing: 1.3px;
  }
}

.menu-close {
  z-index: 30;
  display: none;
  position: absolute;
  top: 0;
  right: 0;

  @include font-title();
  text-transform: lowercase;
  cursor: pointer;
  color: $color__neutral-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;
  }
}

  .menu-close__content {
    display: block;
    padding: .5rem .75rem 1rem 1rem;

    transition: opacity .2s;
    opacity: .6;

    &:hover {
      opacity: .8;
    }
  }

.site-nav {
  font-size: 1.4em;

  @media (min-width: $bp__layout) {
    font-size: .8em;
  }
}

  .site-nav__item {
    z-index: 1;
    text-transform: uppercase;
    cursor: pointer;
  }

  .site-nav__link {
    z-index: 5;
    position: relative;
    display: block;
    padding: .2em 0;

    color: $color__neutral-800;
    transition: opacity .5s;
    opacity: .9;

    &:link, &:visited {
      opacity: .9;
    }

    &:hover, &:active {
      opacity: .5;
    }

    &.nuxt-link-active {
      pointer-events: none;
      color: $color__neutral-900;
      opacity: 1;
    }

    @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__neutral-600;
        
        transition: opacity .5s;
        opacity: 0;
      }
        
      &.nuxt-link-active::before {
        transition: opacity 1s .5s;
        opacity: .8;
      }


    }
  }

  .site-nav__footer {
    margin-top: 1.8em;
  }

.social-nav {
  z-index: 10;
  list-style: none;
  display: flex;
}

  .social-nav__link {
    display: block;
    height: 2em;
    width: 5ch;

    transition: opacity .5s;
    color: $color__neutral-900;

    &:link, &:visited {
      opacity: .8;
      color: $color__neutral-900;
    }

    &:hover, &:active {
      opacity: .5;
    }

    @media (min-width: $bp__layout) {
      width: 3ch;
    }
  }

  .social-nav__icon.icon {
    justify-content: normal;
  }

.footer-attr {
  color: $color__neutral-600;
  font-size: .7em;
  @include font-body(600);
}

.menu-toggle {
  $width: 2rem;
  $margin: ($site-menu__header-width - $width) / 2; 

  z-index: 30;
  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__neutral-900;
  $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;
  }
}

.menu-background {
  display: none;
}

@media (min-width: $bp__layout) {
  .menu-background {
    z-index: 1;
    display: initial;
    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;
    background-position: center center;

    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, .7),
                    rgba($color, .7),
                    rgba($color, 0)
                  ),
                  linear-gradient(
                    to right,
                    rgba($color, 1),
                    rgba($color, .2) 50%,
                    rgba($color, 0) 90%,
                    rgba($color, 1)
                  ),
                  linear-gradient(
                    to bottom,
                    rgba($color, 1),
                    rgba($color, 0) 20%,
                    rgba($color, 0) 80%,
                    rgba($color, 1) 90%,
                    rgba($color, 1)
                  );
    }
  }

    .site-nav__item:hover .menu-link-background {
      transition: opacity 1s;
      opacity: .3;
    }

  .social-background {
    filter: blur(3px);
    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 1s;
      opacity: .15;
    }
  }


</style>

<style lang="scss">
@media (min-width: $bp__layout) {
  .menu-content .social-nav__icon i::before {
    font-size: 1.1em;
    filter: blur(20xp);
  }
}

.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>