Add sidebar swapper

Author: nginx-jack

assets/js/theme-switcher.js

@@ -5,6 +5,7 @@ if (localStorage.getItem("useNewTheme") === "true") {
 function useNewTheme(useNewTheme) {
   localStorage.setItem("useNewTheme", `${useNewTheme}`);
 
+  // swap out v1 and v2 css style
   const v1cssIds = [
     "cssFA1",
     "cssFA2",
@@ -15,7 +16,7 @@ function useNewTheme(useNewTheme) {
     "css3",
     "css4",
     "css5",
-    "css6",
+    "css6"
   ];
 
   v1cssIds.forEach((cssId) => {
@@ -26,4 +27,17 @@ function useNewTheme(useNewTheme) {
   v2cssIds.forEach((cssId) => {
     document.getElementById(cssId).disabled = !useNewTheme;
   });
+
+  // swap out v1 and v2 elements
+  const v1ElementIds = ["sidebar"]
+
+  v1ElementIds.forEach((elementId) => {
+    document.getElementById(elementId).style.display = useNewTheme ? "none" : "";
+  });
+
+  const v2ElementIds = ["sidebar-v2"];
+  v2ElementIds.forEach((elementId) => {
+    document.getElementById(elementId).style.display = useNewTheme ? "": "none";
+  });
+
 }

layouts/_default/docs.html

@@ -1,8 +1,12 @@
 {{ define "main" }}
 <div class="row override-sidebar-collapse">
-  <nav class="sidenav overflow-auto col-md-3 d-none d-xl-block d-print-none align-top">
+  <nav id="sidebar" class="sidenav overflow-auto col-md-3 d-none d-xl-block d-print-none align-top">
     {{ partial "sidebar.html" . }}
   </nav>
+
+  <nav id="sidebar-v2" class="" style="display:none">
+    Sidebar placeholder
+  </nav>
 
   {{if (.Params.catalog) }}
   <main class="content content-has-toc" role="main">