update: refactor, better class names

components/SiteMenu.vue

@@ -1,13 +1,13 @@
 <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>
+  <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="panel-header">
-      <div class="panel-header__inner">This is the Menu Header</div>
+    <div class="menu-header">
+      <div class="menu-header__inner">This is the Menu Header</div>
     </div>
   </section>
 </template>
@@ -15,18 +15,18 @@
 <script>
 export default {
   props: {
+    isOpen: {
+      type: Boolean,
+      required: true
+    }
   },
 
   data () {
     return {
-      isMenuOpen: true
     }
   },
 
   methods: {
-    toggleMenu () {
-      this.isMenuOpen = !this.isMenuOpen
-    }
   }
 }
 </script>
@@ -34,7 +34,7 @@ export default {
 <style lang="scss" scoped>
 $bp-layout: $bp__m;
 
-.site-menu {
+.menu-drawer {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -63,7 +63,7 @@ $bp-layout: $bp__m;
   }
 }
 
-.panel-container {
+.menu-layout {
   display: flex;
   flex-direction: column;
 
@@ -72,13 +72,13 @@ $bp-layout: $bp__m;
   }
 }
 
-.panel-content {
+.menu-content {
   width: 100%;
   height: 100%;
   background-color: blue; // TEMP
 }
 
-.panel-header {
+.menu-header {
   position: relative;
   flex: 0 0 $site-menu__header-height;
 
@@ -89,7 +89,7 @@ $bp-layout: $bp__m;
   background-color: cyan; // TEMP
 }
 
-  .panel-header__inner {
+  .menu-header__inner {
     width: 100%;
     height: 100%;
 

layouts/default.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="page-container">
-    <SiteMenu />
+    <SiteMenu
+      :is-open="isMenuOpen"
+      @toggleMenu="toggleMenu"
+    />
     <div class="page-content">
       <nuxt />
     </div>
@@ -14,12 +17,16 @@ export default {
   components: {
     SiteMenu
   },
+
   data() {
     return {
-      items: [
-        { title: 'Home', icon: 'home', to: { name: 'index' } },
-        { title: 'Inspire', icon: 'lightbulb', to: { name: 'inspire' } }
-      ]
+      isMenuOpen: true,
+    }
+  },
+
+  methods: {
+    toggleMenu () {
+      this.isMenuOpen = !this.isMenuOpen
     }
   }
 }