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')"
          >
            <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"
              />
            </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 {
      siteNav: [
        { 'to': '/', 'text': 'Home'},
        { 'to': '/galleries', 'text': 'Galleries' },
        { 'to': '/services', 'text': 'Services' },
        { 'to': '/about', 'text': 'About Me' },
        { 'to': '/contact', 'text': 'Contact Me' },
      ],
      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' },
      ]
    }
  },

  methods: {
  }
}
</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: $color__primary-100;

  display: flex;
  flex-direction: column;

  padding: .5rem;

  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 {
    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 {
  $color-bg: $color__primary-300;
  $color-shade: darken($color__primary-300, 5);

  position: relative;
  flex: 0 0 $site-menu__header-height;

  color: $color__primary-100;
  background-color: $color-bg;
  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;

  }
}

  .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);
    }
    
  }

  .menu-header__item {
  }


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

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

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

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

  .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 {
    text-transform: uppercase;
    cursor: pointer;
  }

  .site-nav__link {
    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;
      }


    }
  }

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

    opacity: .7;

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

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

.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">
@media (min-width: $bp__layout) {
  .menu-content .social-nav__icon i::before {
    font-size: 1.1em;
  }
}
</style>