menu layout

assets/scss/_globals.scss

@@ -0,0 +1,6 @@
+$bp__m: 40em;
+
+$site-menu__header-width: 3em;
+$site-menu__header-height: 3em;
+
+$color__bg-menu: #f00;

components/SiteMenu.vue

@@ -0,0 +1,85 @@
+<template>
+  <section :class="{ 'is-open': isMenuOpen }"
+           class="site-menu panel-container">
+    <div class="panel-content">
+      <nav class="nav-main"></nav>
+      <footer class="nav-social"></footer>
+    </div>
+    <div class="panel-header"
+         @click="toggleMenu">
+    </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 {
+  flex: 0 0 $site-menu__header-height;
+
+  background-color: cyan; // TEMP
+}
+</style>