add sidebar toggle

docs/common/DocsPageTemplate/Header.vue

@@ -6,6 +6,11 @@
   >
     <div>
       <h1 class="header-text">
+        <KIconButton
+          icon="menu"
+          class="menu"
+          @click="toggleSideNav"
+        />
         <span :class="{ code: codeStyle }">{{ title }}</span>
         <a
           href="#"
@@ -90,6 +95,9 @@
       updateHighlight() {
         this.highlighed = ['', '#'].includes(window.location.hash);
       },
+      toggleSideNav() {
+        this.$emit('update-side-nav', true); // Emit value to parent
+      },
     },
   };
 
@@ -144,6 +152,10 @@
     font-weight: 400;
   }
 
+  .header-text > * {
+    vertical-align: middle;
+  }
+
   .icon-link {
     width: 14px;
     height: 14px;
@@ -157,4 +169,14 @@
     transform: scale(1.25);
   }
 
+  .menu {
+    display: none !important;
+  }
+
+  @media (max-width: 768px) {
+    .menu {
+      display: inline-block !important;
+    }
+  }
+
 </style>

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -8,6 +8,11 @@
     >
       <template if="loaded">
         <h1 class="header">
+          <KIconButton
+            icon="close"
+            class="close-icon"
+            @click="closeSideNav"
+          />
           <KLogo
             altText="Design System"
             size="60"
@@ -99,6 +104,9 @@
       throttleHandleScroll: throttle(function handleScroll() {
         window.sessionStorage.setItem('nav-scroll', this.$refs.links.scrollTop);
       }, 100),
+      closeSideNav() {
+        this.$emit('update-side-nav', false);
+      },
     },
   };
 
@@ -146,6 +154,7 @@
     left: 0;
     z-index: 100;
     width: $nav-width;
+    transition: transform 0.3s ease;
   }
 
   .sidenav {
@@ -165,4 +174,14 @@
     margin-top: 16px;
   }
 
+  .close-icon {
+    display: none !important;
+  }
+
+  @media (max-width: 768px) {
+    .close-icon {
+      display: block !important;
+    }
+  }
+
 </style>

docs/common/DocsPageTemplate/index.vue

@@ -1,13 +1,25 @@
 <template>
 
   <div class="content-wrapper">
-    <SideNav />
+    <SideNav
+      :class="{ show: isSideNavVisible, 'side-nav': true }"
+      @update-side-nav="handleSideNavUpdate"
+    />
+
+    <div
+      v-if="isSideNavVisible"
+      class="overlay"
+      @click="handleSideNavUpdate(false)"
+    ></div>
+
     <Header
       :sections="pageSections"
       :title="page.title"
       :codeStyle="page.isCode"
       class="floating-header"
+      @update-side-nav="handleSideNavUpdate"
     />
+
     <div class="border">
       <!-- second header used as a spacer -->
       <Header
@@ -81,6 +93,11 @@
         default: false,
       },
     },
+    data() {
+      return {
+        isSideNavVisible: false, // Track state received from child
+      };
+    },
     computed: {
       page() {
         let path = this.$route.path;
@@ -152,6 +169,11 @@
         return sections;
       },
     },
+    methods: {
+      handleSideNavUpdate(visible) {
+        this.isSideNavVisible = visible; // Update parent state
+      },
+    },
     head() {
       return {
         title: this.fullTitle,
@@ -165,19 +187,47 @@
 <style lang="scss" scoped>
 
   @import '~/assets/definitions';
+  @import '../../../lib/styles/definitions';
 
   .floating-header {
     position: fixed;
     top: 0;
     right: 0;
     left: $nav-width;
-    z-index: 100;
+    z-index: 95;
+  }
+
+  @media screen and (max-width: 768px) {
+    .floating-header {
+      left: 0;
+    }
+  }
+
+  .side-nav {
+    transform: translateX(0);
+    @extend %dropshadow-2dp;
+  }
+
+  @media (max-width: 768px) {
+    .side-nav {
+      transform: translateX(-100%);
+    }
+
+    .side-nav.show {
+      transform: translateX(0);
+    }
   }
 
   .content-wrapper {
     margin-left: $nav-width;
   }
 
+  @media (max-width: 768px) {
+    .content-wrapper {
+      margin-left: 0;
+    }
+  }
+
   .border {
     border-left: 1px solid $border-color;
   }
@@ -188,4 +238,16 @@
     padding-left: 32px;
   }
 
+  .overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 98;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+  }
+
 </style>