Merge pull request #706 from rei/hamburger

prototype hamburger menu
rei · Jun 23, 2020 · 1cdc65e · 1cdc65e
2 parents b76a186 + 850d4e9
commit 1cdc65e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 27 deletions.
diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue
@@ -3,7 +3,15 @@
     :class="pageClasses">
     <div v-html="iconSprite" style="display: none"/>
     <div class="cdr-doc-page-shell">
-      <div class="cdr-doc-page-shell__side-navigation">
+      <cdr-button
+        :icon-only="true"
+        :with-background="true"
+        size="large"
+        class="cdr-doc-intro__hamburger"
+        @click="toggleSideNav">
+        <cdr-icon use="#navigation-menu"/>
+      </cdr-button>
+      <div :class="menuClass">
         <div class="cdr-doc-side-navigation">
           <Navbar/>
         </div>
@@ -31,7 +39,8 @@ export default {
   components: { Home, Navbar, BackToTopBtn },
   data () {
     return {
-      iconSprite
+      iconSprite,
+      sideNavOpen: false,
     }
   },
 
@@ -63,8 +72,16 @@ export default {
   beforeDestroy () {
     this.updateMetaTags(null, this.currentMetaTags)
   },
+  computed: {
+    menuClass() {
+      return `cdr-doc-page-shell__side-navigation ${this.sideNavOpen ? 'cdr-doc-page-shell__side-navigation--open' : ''}`
+    }
+  },
 
   methods: {
+    toggleSideNav() {
+      this.sideNavOpen = !this.sideNavOpen;
+    },
     scrollToTop() {
       window.scrollTo(0, 0);
     },

diff --git a/docs/.vuepress/theme/styles/theme.scss b/docs/.vuepress/theme/styles/theme.scss
@@ -23,6 +23,7 @@ body {
   flex: 0 0 $side-navigation-width;
   width: $side-navigation-width;
   z-index: 120;
+  transition: flex $cdr-duration-5-x, width $cdr-duration-5-x;
 }
 
 .cdr-doc-side-navigation {
@@ -34,17 +35,43 @@ body {
   overflow-y: scroll;
   width: $side-navigation-width;
   background-color: $cdr-doc-background-color-main-body;
+  transition: width $cdr-duration-5-x;
 }
 
+.cdr-doc-intro__hamburger {
+  display: none;
+}
 
 @media only screen and (max-width: $cdr-breakpoint-sm) {
+
+  .cdr-doc-intro__hamburger {
+    display: block;
+    position: fixed;
+    top: $cdr-space-half-x;
+    left: $cdr-space-half-x;
+    z-index: 200;
+  }
+
   .cdr-doc-page-shell__side-navigation {
-    flex: 0 0 $side-navigation-width-sm;
-    width: $side-navigation-width-sm;
+    flex: 0 0 0;
+    width: 0;
   }
 
   .cdr-doc-side-navigation {
+    width: 0;
+  }
+
+  .cdr-doc-page-shell__side-navigation--open {
+    flex: 0 0 $side-navigation-width-sm;
     width: $side-navigation-width-sm;
+
+    .cdr-doc-side-navigation {
+      width: $side-navigation-width-sm;
+    }
+  }
+
+  .cdr-doc-page-shell__body {
+    max-width: 100%;
   }
 }
 
@@ -66,35 +93,13 @@ body {
   flex: 1 1 100%;
 }
 
+
 .header-anchor {
   @include cdr-text-heading-sans-500;
   color: 	$cdr-color-text-link-rest;
   text-decoration: none;
 }
 
-.cdr-doc-proving-ground {
-  box-sizing: border-box;
-  padding: $cdr-space-inset-one-x;
-  width: 100vw;
-
-  .cdr-doc-page-shell,
-  .cdr-doc-page-shell__body,
-  .page,
-  .content {
-    display: block;
-    width: 100%;
-  }
-
-
-  .cdr-doc-page-shell__side-navigation {
-    display: none;
-  }
-
-  .cdr-doc-page-shell__body {
-    background: none;
-  }
-}
-
 // Code Highlighting
 div[class^='language-'] {
   background: $cdr-doc-background-color-default;