Move the nested submenu to a separate block using JavaScript

javascript/DocumentationViewer.js

@@ -50,7 +50,19 @@
 			$("#table-of-contents li a").click(function (e) { e.stopPropagation(); });
 
 		}
-		
+
+		/** -----------------------------------------------
+		 * SUBMENU
+		 *
+		 * move to separate menu block
+		 */
+		if ($("#submenu").length > 0) {
+			var submenu = '<div class = "sidebar-box"><ul>';
+			submenu += $("#submenu").html();
+			$("#sidebar-column").append(submenu);
+			$("#submenu").remove();
+		}
+
 		/** ---------------------------------------------
 		 * HEADING ANCHOR LINKS
 		 *

templates/Includes/DocInThisModule.ss

@@ -6,7 +6,7 @@
 				<li>
 					<a href="$Link" class="$LinkingMode">$Title</a>
 					<% if Children %>
-						<ul>
+						<ul id="submenu">
 							<% control Children %>
 								<li><a href="$Link" class="$LinkingMode">
 									$Title <% if IsFolder %><span class="is-folder">&#9658;</span><% end_if %>