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

src/input.css

@@ -91,7 +91,7 @@ p > code, p > strong > code, li > code, li > strong > code {
 }
 
 .page-content a {
-  @apply font-semibold text-garage-orange border-b hover:border-garage-gray border-garage-orange bg-transparent hover:bg-garage-orange hover:text-white hover:rounded-sm hover:no-underline duration-150 transition;
+  @apply font-semibold text-garage-orange border-b border-garage-orange hover:text-red-500 hover:border-red-500 transition-all duration-500;
 }
 
 .page-content img {

static/js/site.js

@@ -195,12 +195,7 @@ function documentReadyCallback() {
   }
 
   document.addEventListener('click', function(ev) {
-    if (ev.target.matches('#nav-search-btn') || ev.target.matches('#nav-search-btn-icon')) {
+    if (!ev.target.closest('#search-modal')) {
-      openSearchModal();
-    }
-    else if (ev.target.matches('#close-modal-btn')
-    || ev.target.matches('#close-modal-btn-icon')
-    || !ev.target.closest('#search-modal')) {
       closeSearchModal();
     }
   });

templates/documentation.html

@@ -13,7 +13,7 @@
             {% include "partials/doc/global_toc.html" %}
             <div class="col-span-full xl:col-span-3" style="min-height:85vh;">
                 <article class="box my-12 px-6 lg:px-8 xl:px-12">
-                    <div class="flex flex-col bg-gray-100 rounded-r shadow-sm w-full xl:w-max">
+                    <div class="flex flex-col mb-10 bg-gray-100 rounded-r shadow-sm w-full xl:w-max">
                         <div class="flex flex-col border-l-4 border-garage-orange py-2 px-4 relative">
                             <h1 class="title leading-10 text-xl lg:text-2xl xl:text-3xl text-garage-orange font-semibold">
                                 {{ page.title }}
@@ -53,6 +53,7 @@
       {% set page = section %}
     {% endif %}
     {% if page.toc %}
-        {% include "partials/doc/toc_script.html" %}
+        {% include "partials/doc/page_toc_script.html" %}
     {% endif %}
+    {% include "partials/doc/global_toc_script.html" %}
 {% endblock %}

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 
+                    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 %}">
-                           {% 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>

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>

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>

templates/partials/shared/nav.html

@@ -22,13 +22,16 @@
                         {% endfor %}
                     {% endif %}
                 {% endfor %}
-                <button
+                <a
                     id="nav-search-btn"
+                    href="javascript:openSearchModal()"
                     type="button"
                     title="Open Search (alt + S)"
                     class="focus:bg-white hover:bg-white hover:shadow px-4 py-2 rounded-lg">
-                    <svg id="nav-search-btn-icon" class="w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                    <svg id="nav-search-btn-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                </button>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                    </svg>
+                </a>
                 <a
                 href="https://garagehq.deuxfleurs.fr/_releases.html"
                 class="group flex items-center justify-center space-x-1 font-semibold shadow hover:shadow px-2 py-1.5 rounded text-white transition-all duration-500 bg-gradient-to-tl from-garage-orange via-orange-500 to-orange-300 bg-size-200 bg-pos-0 hover:bg-pos-100">

templates/partials/shared/search.html

@@ -17,9 +17,16 @@
                 <div class="search-results__items max-h-96 overflow-y-scroll p-2 md:p-4 focus:outline outline-garage-orange"></div>
             </div>
         </section>
-        <button aria-label="close" id="close-modal-btn" class="absolute top-4 right-4 flex items-center group rounded-full shadow-inner bg-gray-300 border border-transparent hover:border-gray-500 bg-opacity-50 p-2">
+        <a
-            <svg id="close-modal-btn-icon" class="w-6 h-6 text-gray-400" 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="M6 18L18 6M6 6l12 12"></path></svg>
+        aria-label="close"
+        type="button"
+        id="close-modal-btn"
+        href="javascript:closeSearchModal()"
+        class="absolute top-4 right-4 flex items-center group rounded-full shadow-inner bg-gray-300 border border-transparent hover:border-gray-500 bg-opacity-50 p-2">
+            <svg id="close-modal-btn-icon" class="w-6 h-6 text-gray-400" 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="M6 18L18 6M6 6l12 12"></path>
+            </svg>
             <small class="text-xs text-gray-400">(Esc)</small>
-        </button>
+        </a>
     </div>
 </section>