Fix doc submenus states, doc links hover, split page & global ToC

3 files changed, 42 insertions, 30 deletions

diff --git a/templates/partials/doc/global_toc.html b/templates/partials/doc/global_toc.html
index 277739c..eea7d26 100644
--- a/templates/partials/doc/global_toc.html
+++ b/templates/partials/doc/global_toc.html
@@ -7,7 +7,7 @@
                 {% for page in section.pages %}
                     <a 
                         href="{{ page.permalink | safe }}"
-                        class="bg-white border border-garage-orange block p-1 rounded block font-semibold hover:bg-garage-orange hover:bg-opacity-20
+                        class="bg-white border border-garage-orange block p-1 rounded font-semibold hover:bg-garage-orange hover:bg-opacity-20
                         {% if current_path == page.path %} activePage text-garage-orange border-opacity-100 border-garage-orange {% endif %}">
                         {{ page.title }}
                     </a>
@@ -19,13 +19,15 @@
             <li class="relative">
                 <a 
                     href="{{ h1.permalink | safe }}"
-                    class="bg-white border border-garage-orange block p-1 rounded-r rounded-tl font-semibold 
-                           {% if current_path == h1.path %} activePage text-garage-orange font-semibold border-opacity-100 border-garage-orange {% else %}text-gray-800{% endif %}
-                    ">
+                    class="bg-white border border-garage-orange block p-1 rounded-r rounded-tl font-semibold {% if current_path == h1.path %}activePage text-garage-orange font-semibold border-opacity-100 border-garage-orange{% else %}text-gray-800{% endif %}">
                     {{ h1.title }}
                 </a>
                 {% if h1.pages %}
-                    <input type="checkbox" id="btn-{{ h1.title | slugify }}" class="deploySubMenu"/>
+                    <input
+                        type="checkbox"
+                        id="btn-{{ h1.title | slugify }}"
+                        class="deploySubMenu"
+                    />
                     <label for="btn-{{ h1.title | slugify }}" class="absolute top-0 right-0.5 bg-garage-orange bg-opacity-10 border-l border-garage-orange border-opacity-20 cursor-pointer inline-block px-3 py-1" style="margin-top:0.08rem;">
                         <svg class="arrow w-6 h-6 text-garage-gray group-hover:text-garage-orange transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                     </label>
diff --git a/templates/partials/doc/global_toc_script.html b/templates/partials/doc/global_toc_script.html
new file mode 100644
index 0000000..42abcda
--- /dev/null
+++ b/templates/partials/doc/global_toc_script.html
@@ -0,0 +1,35 @@
+<script>
+// Global ToC
+/*
+    - Deploy current submenu (if any) and reploy others.
+    - Fixed ToC when user scrolls.
+*/
+
+document.addEventListener("DOMContentLoaded", function() {
+    var menusTriggers = document.getElementsByClassName("deploySubMenu");
+    var activeDocPage = document.getElementsByClassName("activePage")[0];
+    for (var i = 0; i < menusTriggers.length; i++) {
+        menusTriggers[i].checked = true;
+    }
+    let parentMenu = activeDocPage.parentElement.parentElement;
+    // Check if current page is the parent submenu page or just a child
+    if (parentMenu.classList.contains('subMenu')) { // child
+        parentMenu.previousElementSibling.previousElementSibling.checked = false;
+    } else { // parent
+        activeDocPage.nextElementSibling.checked = false;
+    }  
+});
+
+window.addEventListener('scroll', function() {
+    if (document.body.clientWidth >= 1280) {
+        if (window.scrollY >= menuBarHeight) {
+            document.getElementById('main-toc-menu').classList.add('fixed', 'top-0', 'left-0');
+            document.getElementById('main-toc-menu').style.width = mainTocMenuWidth + 'px';
+        } else {
+            document.getElementById('main-toc-menu').classList.remove('fixed', 'top-0', 'left-0');
+        }
+    } else {
+        
+    }
+});
+</script>
\ No newline at end of file
diff --git a/templates/partials/doc/toc_script.html b/templates/partials/doc/page_toc_script.html
index 7d10ee6..efe4bac 100644
--- a/templates/partials/doc/toc_script.html
+++ b/templates/partials/doc/page_toc_script.html
@@ -5,22 +5,6 @@ const mainTocMenuWidth = document.getElementById('main-toc-menu').clientWidth;
 const tocItems = document.querySelectorAll(".toc");
 const navSections = new Array(tocItems.length);
 
- // Global ToC
-/*
-    Fixed ToC when user scrolls.
-*/
-
-window.addEventListener('scroll', function() {
-    if (window.screen.width >= 1280) {
-        if (window.scrollY >= menuBarHeight) {
-            document.getElementById('main-toc-menu').classList.add('fixed', 'top-0', 'left-0');
-            document.getElementById('main-toc-menu').style.width = mainTocMenuWidth + 'px';
-        } else {
-            document.getElementById('main-toc-menu').classList.remove('fixed', 'top-0', 'left-0');
-        }
-    }
-});
-
 // Page content
 /*
     Focus effect on current section anchor when user scrolls.
@@ -70,13 +54,4 @@ window.addEventListener('scroll', () => {
     }
 }, false);
 
-document.addEventListener("DOMContentLoaded", function() {
-    var menusTriggers = document.getElementsByClassName("deploySubMenu");
-    var activeDocPage = document.getElementsByClassName("activePage")[0];
-    for (var i = 0; i < menusTriggers.length; i++) {
-        menusTriggers[i].checked = true;
-    }
-    activeDocPage.parentElement.parentElement.previousElementSibling.previousElementSibling.checked = false;
-});
-
 </script>