Updated TOC in Default2022 presentation style to be resizable

SHFB/Source/PresentationStyles/Default2022/Templates/TopicTemplate.html

@@ -118,20 +118,22 @@
 				</ul>
 			</nav>
 
-			<div class="columns pl-5 pr-5 fixedContent">
+			<div id="ContentContainer" class="columns pl-5 pr-5 fixedContent">
 				<div id="ShowHideTOCColumn" class="column is-hidden-tablet">
 					<a id="ShowHideTOC"><include item="showHideTOC" /></a>
 				</div>
 
-				<div id="TOCColumn" class="column is-hidden-mobile">
+				<div id="TOCColumn" class="column is-hidden-mobile" style="flex-basis: initial; flex-grow: 0.25">
 					<nav class="toc">
 						<ul id="TableOfContents" class="toc-menu">
 							<!-- TOC entries will be added client-side from the TOC fragment file -->
 						</ul>
 					</nav>
 				</div>
 
-				<div id="TopicContent" class="column content is-7">
+				<div id="Resizer" style="cursor: ew-resize; width: 5px; background: #e6e6e6; margin-top: 8px; margin-bottom: 12px"></div>
+
+				<div id="TopicContent" class="column content is-7" style="flex-grow: 1">
 					<!-- Topic content will go here -->
 				</div>
 

SHFB/Source/PresentationStyles/Default2022/scripts/presentationStyle.js

@@ -21,6 +21,41 @@
 
 // Ignore Spelling: fti json
 
+//===============================================================================================================
+// This section contains the methods used to handle resizing the TOC section
+
+var resizer, tocDiv;
+
+window.onload = function() {
+    resizer = document.getElementById("Resizer");
+    tocDiv = document.getElementById("TOCColumn");
+
+    resizer.addEventListener("mousedown", function(e) {
+        e.preventDefault();
+        document.addEventListener("mousemove", ResizerMouseMove);
+        document.addEventListener("mouseup", ResizerMouseUp);
+    });
+}
+
+function ResizerMouseMove(e) {
+    const container = document.getElementById("ContentContainer");
+    const containerRect = container.getBoundingClientRect();
+    const newWidth = e.clientX - containerRect.left - 80;
+
+    // Ensure that divs are not smaller than some arbitrary minimal width
+    const minWidth = 50; // pixels
+    const contentDivWidth = containerRect.width - newWidth;
+
+    if (newWidth > minWidth && contentDivWidth > minWidth) {
+        tocDiv.style.width = newWidth + 'px';
+    }
+}
+
+function ResizerMouseUp() {
+    document.removeEventListener("mousemove", ResizerMouseMove);
+    document.removeEventListener("mouseup", ResizerMouseUp);
+}
+
 //===============================================================================================================
 // This section contains the methods used to implement the language filter