<template>
  <section :class="{ 'is-open': isMenuOpen }"
           class="site-menu panel-container"
           @click="toggleMenu">
    <div class="panel-content">
      <nav class="nav-main"></nav>
      <footer class="nav-social"></footer>
    </div>
    <div class="panel-header">
      <div class="panel-header__inner">This is the Menu Header</div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
  },

  data () {
    return {
      isMenuOpen: true
    }
  },

  methods: {
    toggleMenu () {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

<style lang="scss" scoped>
$bp-layout: $bp__m;

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

.panel-container {
  display: flex;
  flex-direction: column;

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

.panel-content {
  width: 100%;
  height: 100%;
  background-color: blue; // TEMP
}

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

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