marc-leopold/components/SiteMenu.vue

<template>
  <section :class="{ 'is-open': isOpen }"
           class="menu-drawer menu-layout"
           @click="$emit('toggleMenu')"
  >
    <div class="menu-content">
      <div class="menu-close">close</div>
      <nav class="menu-content__body">
        <ul class="site-nav">
          <li class="site-nav__item"
              v-for="item in siteNav"
              :key="item.to"
          >
            <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"
              >
              </b-icon>
            </a>
          </li>
        </ul>
      </nav>
      <footer class="menu-content__footer">
        <p class="footer-attr">Copyright &copy; 2019 Marc Leopold Photography</p>
      </footer>
    </div>
    <div class="menu-header">
      <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>
</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>
.menu-drawer {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: -100%;

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

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

  @media (min-width: $bp__layout) {
    width: 25em;
    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 {
  display: flex;
  flex-direction: column;

  padding: .5rem;

  @media (min-width: $bp__layout) {
    padding: .5rem 1rem;
  }

  width: 100%;
  height: 100%;
  background-color: $color__primary-100;
}

  .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 {
  position: relative;
  flex: 0 0 $site-menu__header-height;

  color: $color__neutral-700;
  background-color: $color__neutral-300;
  opacity: .97;

  @media (min-width: $bp__layout) {
    max-width: $site-menu__header-width;
  }
}

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

  @include font-title();

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

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

  @media (max-width: $bp__layout) {
    display: initial;
    position: absolute;
    top: .5rem;
    right: 1rem;
  }
}

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

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

  .site-nav__item {
    text-transform: uppercase;
  }

  .site-nav__link {
    display: inline-block;
    padding: .2em 0;

    @media (min-width: $bp__layout) {
      padding: .5em 0;
    }
  }

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

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

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

.footer-attr {
  font-size: .7em;
}

</style>

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

</style>