UNFINISHED

meator · meator · commit 18db032f4fab · 2025-05-04T15:02:53.000+02:00
diff --git a/src/theme/book.js b/src/theme/book.js
@@ -23,6 +23,7 @@ window.onunload = function () { };
     var sidebar = document.getElementById("sidebar");
     var sidebarLinks = document.querySelectorAll('#sidebar a');
     var sidebarToggleButton = document.getElementById("sidebar-toggle");
+    var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
     var firstContact = null;
 
     function showSidebar() {
@@ -50,6 +51,11 @@ window.onunload = function () { };
     // Toggle sidebar
     sidebarToggleButton.addEventListener('click', function sidebarToggle() {
         if (body.classList.contains("sidebar-hidden")) {
+            var current_width = parseInt(
+                document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
+            if (current_width < 150) {
+                document.documentElement.style.setProperty('--sidebar-width', '150px');
+            }
             showSidebar();
         } else if (body.classList.contains("sidebar-visible")) {
             hideSidebar();
@@ -62,6 +68,32 @@ window.onunload = function () { };
         }
     });
 
+    sidebarResizeHandle.addEventListener('mousedown', initResize, false);
+
+    function initResize(e) {
+        window.addEventListener('mousemove', resize, false);
+        window.addEventListener('mouseup', stopResize, false);
+        body.classList.add('sidebar-resizing');
+    }
+    function resize(e) {
+        var pos = (e.clientX - sidebar.offsetLeft);
+        if (pos < 20) {
+            hideSidebar();
+        } else {
+            if (body.classList.contains("sidebar-hidden")) {
+                showSidebar();
+            }
+            pos = Math.min(pos, window.innerWidth - 100);
+            document.documentElement.style.setProperty('--sidebar-width', pos + 'px');
+        }
+    }
+    //on mouseup remove windows functions mousemove & mouseup
+    function stopResize(e) {
+        body.classList.remove('sidebar-resizing');
+        window.removeEventListener('mousemove', resize, false);
+        window.removeEventListener('mouseup', stopResize, false);
+    }
+
     document.addEventListener('touchstart', function (e) {
         firstContact = {
             x: e.touches[0].clientX,
diff --git a/src/theme/css/general.css b/src/theme/css/general.css
@@ -264,11 +264,6 @@ ul#searchresults span.teaser {
 
 /* chapter navigation */
 
-#nav-wide-wrapper {
-    max-width: 800px;
-    margin: 0 auto;
-    margin-top: 50px;
-}
 .previous {
     float: left;
 }
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
@@ -27,6 +27,8 @@
             var path_to_root = "{{ path_to_root }}";
             var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}";
         </script>
+        <!-- Start loading toc.js asap -->
+        <script src="{{ path_to_root }}toc.js"></script>
     </head>
     <body>
     <div id="body-container">
@@ -59,6 +61,29 @@
 
         <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
 
+        <!-- Hide / unhide sidebar before it is displayed -->
+        <script type="text/javascript">
+            var html = document.querySelector('html');
+            var sidebar = 'hidden';
+            if (document.body.clientWidth >= 1080) {
+                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
+                sidebar = sidebar || 'visible';
+            }
+            html.classList.remove('sidebar-visible');
+            html.classList.add("sidebar-" + sidebar);
+        </script>
+
+        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
+            <!-- populated by js -->
+            <mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
+            <noscript>
+                <iframe class="sidebar-iframe-outer" src="{{ path_to_root }}toc.html"></iframe>
+            </noscript>
+            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
+                <div class="sidebar-resize-indicator"></div>
+            </div>
+        </nav>
+
         <header>
             <nav id="void-nav">
                 <ul>
@@ -124,22 +149,6 @@
         </header>
 
         <div id="content">
-            <!-- Hide / unhide sidebar before it is displayed -->
-            <script type="text/javascript">
-                var html = document.querySelector('html');
-                var sidebar = 'hidden';
-                if (document.body.clientWidth >= 1080) {
-                    try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
-                    sidebar = sidebar || 'visible';
-                }
-                html.classList.remove('sidebar-visible');
-                html.classList.add("sidebar-" + sidebar);
-            </script>
-
-            <nav id="sidebar" aria-label="Table of contents">
-                {{#toc}}{{/toc}}
-            </nav>
-
             <div id="page-wrapper" class="page-wrapper">
 
                 {{#if search_enabled}}
