add sidebar toggle

docs/common/DocsPageTemplate/Header.vue

@@ -6,6 +6,9 @@
   >
     <div>
       <h1 class="header-text">
+        <span @click="toggleSideNav">
+        <KIcon icon="menu"  />
+        </span>
         <span :class="{ code: codeStyle }">{{ title }}</span>
         <a
           href="#"
@@ -90,6 +93,9 @@
       updateHighlight() {
         this.highlighed = ['', '#'].includes(window.location.hash);
       },
+      toggleSideNav() {
+        this.$emit('update-side-nav', true); // Emit value to parent
+      },
     },
   };
 

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -14,6 +14,7 @@
             :showBackground="true"
           />
           <span class="header-text">Design System</span>
+          <span @click="closeSideNav"> <KIcon icon="close"/></span>
         </h1>
 
         <DocsFilter v-model="filterText" />
@@ -99,6 +100,9 @@
       throttleHandleScroll: throttle(function handleScroll() {
         window.sessionStorage.setItem('nav-scroll', this.$refs.links.scrollTop);
       }, 100),
+      closeSideNav() {
+        this.$emit('update-side-nav', false);
+      },
     },
   };
 
@@ -146,6 +150,7 @@
     left: 0;
     z-index: 100;
     width: $nav-width;
+    transition: transform 0.3s ease;
   }
 
   .sidenav {

docs/common/DocsPageTemplate/index.vue

@@ -1,12 +1,13 @@
 <template>
 
   <div class="content-wrapper">
-    <SideNav />
+    <SideNav :class="{ show: isSideNavVisible, 'side-nav': true }" @update-side-nav="handleSideNavUpdate"/>
     <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 -->
@@ -81,6 +82,16 @@
         default: false,
       },
     },
+    data() {
+    return {
+      isSideNavVisible: false, // Track state received from child
+      };
+    },
+    methods: {
+    handleSideNavUpdate(visible) {
+      this.isSideNavVisible = visible; // Update parent state
+      },
+    },
     computed: {
       page() {
         let path = this.$route.path;
@@ -171,13 +182,43 @@
     top: 0;
     right: 0;
     left: $nav-width;
-    z-index: 100;
+    z-index: 99;
+  }
+
+  @media screen and (max-width: 768px) {
+    .floating-header {
+      left: 0;
+
+    }
+
   }
 
+.side-nav {
+  // display: block; 
+  transform: translateX(0);
+}
+
+@media (max-width: 768px) {
+  .side-nav {
+    // display: none; 
+    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;
   }