From 8fdf845980eb70785b2f5d31586c81f8b0299907 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 2 Jan 2019 21:12:22 +0000
Subject: [PATCH] menu layout

---
 assets/scss/_globals.scss |  6 +++
 components/SiteMenu.vue   | 85 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+)
 create mode 100644 assets/scss/_globals.scss
 create mode 100644 components/SiteMenu.vue

diff --git a/assets/scss/_globals.scss b/assets/scss/_globals.scss
new file mode 100644
index 0000000..b1fb37d
--- /dev/null
+++ b/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;
diff --git a/components/SiteMenu.vue b/components/SiteMenu.vue
new file mode 100644
index 0000000..f72c899
--- /dev/null
+++ b/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>