diff --git a/assets/js/sidebar-resizer.js b/assets/js/sidebar-resizer.js
new file mode 100644
index 00000000000..bf032e9266d
--- /dev/null
+++ b/assets/js/sidebar-resizer.js
@@ -0,0 +1,62 @@
+
+    document.addEventListener("DOMContentLoaded", function () {
+      const resizer = document.getElementById("left-resizer");
+      const sidebar = document.getElementById("left-sidebar");
+      
+      if (!resizer || !sidebar) return;
+      if (window.innerWidth < 768) return;
+
+
+      let isResizing = false;
+
+      
+      const savedWidth = localStorage.getItem("leftSidebarWidth");
+      if (savedWidth) {
+        sidebar.style.width = savedWidth;
+        sidebar.style.flex = "none";
+        sidebar.style.maxWidth = "35vw";
+      }
+
+     
+      resizer.addEventListener("mousedown", function (e) {
+        isResizing = true;
+        document.body.style.cursor = "col-resize"; 
+        document.body.style.userSelect = "none";  
+      });
+
+     
+      document.addEventListener("mousemove", function (e) {
+        if (!isResizing) return;
+        
+      
+        const newWidth = e.clientX + "px";
+        sidebar.style.width = newWidth;
+        sidebar.style.flex = "none"; // Override bootstrap grid flex
+      });
+
+    
+      document.addEventListener("mouseup", function () {
+        if (isResizing) {
+          isResizing = false;
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+          
+          // Save the final width
+          localStorage.setItem("leftSidebarWidth", sidebar.style.width);
+        }
+      });
+
+     
+      resizer.addEventListener("dblclick", function () {
+        sidebar.classList.add("is-resetting"); // Add transition class
+        
+        sidebar.style.width = "";
+        sidebar.style.flex = "";
+        localStorage.removeItem("leftSidebarWidth");
+        
+        
+        setTimeout(() => sidebar.classList.remove("is-resetting"), 300);
+      });
+
+    });
+  
\ No newline at end of file
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 00ca1b8770b..9453f071c44 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -264,7 +264,6 @@ a:not([href]):not([class]):hover {
 // Left sidebar
 .td-sidebar-nav {
   max-height: none;
-  overflow: hidden;
   padding: 0px;
 
   &__section-title {
@@ -818,15 +817,56 @@ html {
 h1, h2, h3, h4, h5, h6 {
   scroll-margin-top: 1rem;
 }
+/* Sidebar Resizer Handle */
+/* Sidebar Resizer Handle */
+@include media-breakpoint-up(md)
+{
+  .sidebar-resizer {
+  width: 10px; 
+  cursor: col-resize;
+  position: absolute;
+  top: 0;
+  right: 8px; /* Push it outside the scrollbar */
+  bottom: 0;
+  z-index: 100;
+  background-color: transparent;
+
+  /* Grip icon using a pseudo-element */
+  &::after {
+    content: "⋮";
+    position: sticky; 
+    top: 40vh;
+    display: block;
+    text-align: center;
+    color: var(--secondary);
+    font-size: 18px;
+    opacity: 0.9;
+  }
 
-@media (max-width: 767px) {
-  .td-navbar {
-    top: 0;
-    margin-top: 0;
-    padding-top: 0;
+  &:hover::after, &:active::after {
+    opacity: 1; 
+  }
+}
+#left-sidebar {
+    min-width: 20vw;
+    max-width: 35vw; 
   }
+  #left-sidebar.is-resetting {
+  transition: width 0.3s ease, max-width 0.3s ease;
+}
 
-  body {
-    padding-top: 0;
+
+}
+@include media-breakpoint-down(sm) {
+ #left-sidebar {
+    /* Force mobile width and override any JS inline styles */
+    width: 100% !important;
+    max-width: 100% !important;
+    flex: 100% !important; 
   }
 }
+
+
+
+
+
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index 3503963fb79..a70c38fe99d 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -10,8 +10,10 @@
   <div class="container-fluid td-outer">
     <div class="td-main">
       <div class="row flex-xl-nowrap">
-        <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+        <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none" id="left-sidebar">
           {{ partial "sidebar.html" . }}
+          <!-- Add the resizer handle here! -->
+          <div class="sidebar-resizer" id="left-resizer"></div>
         </aside>
         <aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none">
           {{ partial "page-meta-links.html" . }}
@@ -38,6 +40,13 @@
   </div>
   {{ partial "scripts.html" . }}
   {{ partial "image-modal.html" . }}
+
+    {{ with resources.Get "js/sidebar-resizer.js" }}
+  <script src="{{ .RelPermalink }}" defer></script>
+  {{ end }}
+</body>
+
 </body>
 
+
 </html>
\ No newline at end of file