From e4993cb583f4cd778e4aa8870b80b9818ae78678 Mon Sep 17 00:00:00 2001
From: Cole Willsea <cowills@rei.com>
Date: Mon, 22 Jun 2020 14:26:52 -0700
Subject: [PATCH 1/4] prototype hamburger menu

---
 docs/.vuepress/theme/Layout.vue        | 21 ++++++++++++++++++--
 docs/.vuepress/theme/styles/theme.scss | 27 ++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/docs/.vuepress/theme/Layout.vue b/docs/.vuepress/theme/Layout.vue
index 960464b77..bc1cb3a32 100644
--- 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
index 414d97e5e..29a2ba21e 100644
--- 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 1s, width 1s;
 }
 
 .cdr-doc-side-navigation {
@@ -34,17 +35,39 @@ body {
   overflow-y: scroll;
   width: $side-navigation-width;
   background-color: $cdr-doc-background-color-main-body;
+  transition: width 1s;
 }
 
+.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;
+    }
   }
 }
 

From 2e5ffe3ea3a2c86a78fbcb741f66627374ee54b0 Mon Sep 17 00:00:00 2001
From: Cole Willsea <cowills@rei.com>
Date: Mon, 22 Jun 2020 14:35:07 -0700
Subject: [PATCH 2/4] restrict doc site content to screen size at XS

---
 docs/.vuepress/theme/styles/theme.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/.vuepress/theme/styles/theme.scss b/docs/.vuepress/theme/styles/theme.scss
index 29a2ba21e..369bb74e6 100644
--- a/docs/.vuepress/theme/styles/theme.scss
+++ b/docs/.vuepress/theme/styles/theme.scss
@@ -69,6 +69,10 @@ body {
       width: $side-navigation-width-sm;
     }
   }
+
+  .cdr-doc-page-shell__body {
+    max-width: 100%;
+  }
 }
 
 .cdr-doc-side-navigation__logo-wrap {

From b6506c9ad7ed1682f88a67542d5ea3ef2d0ffda5 Mon Sep 17 00:00:00 2001
From: Cole Willsea <cowills@rei.com>
Date: Mon, 22 Jun 2020 14:35:19 -0700
Subject: [PATCH 3/4] remove un-used CSS

---
 docs/.vuepress/theme/styles/theme.scss | 24 +-----------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/docs/.vuepress/theme/styles/theme.scss b/docs/.vuepress/theme/styles/theme.scss
index 369bb74e6..5ed93bbd2 100644
--- a/docs/.vuepress/theme/styles/theme.scss
+++ b/docs/.vuepress/theme/styles/theme.scss
@@ -93,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;

From 850d4e96cda17f9591218fbf4c4b968e9b88d7a3 Mon Sep 17 00:00:00 2001
From: Cole Willsea <cowills@rei.com>
Date: Mon, 22 Jun 2020 14:36:53 -0700
Subject: [PATCH 4/4] use duration token for hamburger transition

---
 docs/.vuepress/theme/styles/theme.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/.vuepress/theme/styles/theme.scss b/docs/.vuepress/theme/styles/theme.scss
index 5ed93bbd2..d410bc366 100644
--- a/docs/.vuepress/theme/styles/theme.scss
+++ b/docs/.vuepress/theme/styles/theme.scss
@@ -23,7 +23,7 @@ body {
   flex: 0 0 $side-navigation-width;
   width: $side-navigation-width;
   z-index: 120;
-  transition: flex 1s, width 1s;
+  transition: flex $cdr-duration-5-x, width $cdr-duration-5-x;
 }
 
 .cdr-doc-side-navigation {
@@ -35,7 +35,7 @@ body {
   overflow-y: scroll;
   width: $side-navigation-width;
   background-color: $cdr-doc-background-color-main-body;
-  transition: width 1s;
+  transition: width $cdr-duration-5-x;
 }
 
 .cdr-doc-intro__hamburger {