Improve sidebar responsiveness and resizability

Wulian233 · Wulian233 · commit 71e3162832a7 · 2024-12-21T07:23:20.000+08:00
diff --git a/python_docs_theme/layout.html b/python_docs_theme/layout.html
@@ -78,6 +78,7 @@ <h3>{{ _('Navigation') }}</h3>
             <script type="text/javascript" src="{{ pathto('_static/menu.js', 1) }}"></script>
             <script type="text/javascript" src="{{ pathto('_static/search-focus.js', 1) }}"></script>
             <script type="text/javascript" src="{{ pathto('_static/themetoggle.js', 1) }}"></script>
+            <script type="text/javascript" src="{{ pathto('_static/sidebar-resizer.js', 1) }}"></script>
         {%- endif -%}
     {%- endif -%}
     {{ super() }}
diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css
@@ -149,6 +149,9 @@ div.sphinxsidebar {
     border-radius: 5px;
     line-height: 130%;
     font-size: smaller;
+    width: 300px;
+    resize: horizontal;
+    overflow: auto;
 }
 
 div.sphinxsidebar h3,
@@ -157,7 +160,7 @@ div.sphinxsidebar h4 {
 }
 
 div.sphinxsidebarwrapper {
-    width: 217px;
+    width: 100%;
     box-sizing: border-box;
     height: 100%;
     overflow-x: hidden;
diff --git a/python_docs_theme/static/sidebar-resizer.js b/python_docs_theme/static/sidebar-resizer.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const sidebar = document.querySelector('.sphinxsidebar');
+    const resizer = document.createElement('div');
+    resizer.className = 'sidebar-resizer';
+    sidebar.appendChild(resizer);
+
+    resizer.addEventListener('mousedown', function(e) {
+        document.addEventListener('mousemove', resizeSidebar);
+        document.addEventListener('mouseup', stopResize);
+    });
+
+    function resizeSidebar(e) {
+        const newWidth = e.clientX - sidebar.getBoundingClientRect().left;
+        if (newWidth > 150 && newWidth < window.innerWidth - 100) {
+            sidebar.style.width = newWidth + 'px';
+        }
+    }
+
+    function stopResize() {
+        document.removeEventListener('mousemove', resizeSidebar);
+        document.removeEventListener('mouseup', stopResize);
+    }
+});
