marc-leopold/components/SiteMenu.vue

<template>
  <section :class="{ 'is-open': isOpen }"
           class="menu-drawer menu-layout"
           @click="$emit('toggleMenu')">
    <div class="menu-content">
      <nav class="menu-content__body"></nav>
      <footer class="menu-content__footer"></footer>
    </div>
    <div class="menu-header">
      <div class="menu-header__inner">This is the Menu Header</div>
    </div>
  </section>
</template>

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

  data () {
    return {
    }
  },

  methods: {
  }
}
</script>

<style lang="scss" scoped>
.menu-drawer {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: -100%;
  
  transition: transform .5s;
  transform: translate3d(0, $site-menu__header-width, 0);

  background-color: $color__bg-menu;
  opacity: .7;

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

  @media (min-width: $bp__layout) {
    max-width: 30em;
    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 {
  width: 100%;
  height: 100%;
  background-color: blue; // TEMP
}

.menu-header {
  position: relative;
  flex: 0 0 $site-menu__header-height;

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

  background-color: cyan; // TEMP
}

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

    background-color: rgba(green, .5);

    @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);
    }
    
  }
</style>