Fix the models documentation navigation #182 (#183)

Signed-off-by: tdruez <[email protected]>

Author: tdruez

CHANGELOG.rst

@@ -1,6 +1,11 @@
 Release notes
 =============
 
+### Version 5.3.0-dev
+
+- Fix the models documentation navigation.
+  https://github.com/aboutcode-org/dejacode/issues/182
+
 ### Version 5.2.0
 
 - Add visual indicator in hierarchy views, when an object on the far left or far right

dje/templates/admin/docs/models.html

@@ -3,20 +3,21 @@
 {% block body %}
   <div class="sidebar" style="width: 270px;">
     <h3 class="brand"><a href="#">Models documentation</a></h3>
-    <span data-bs-toggle="collapse" data-bs-target="#menu-content">
-      <i class="fa fa-bars fa-2x toggle-btn"></i>
-    </span>
     <div class="menu-list">
       <ul id="menu-content" class="menu-content collapse out">
         {% for app_verbose_name, models in help_data.items %}
-          <li data-bs-toggle="collapse" data-bs-target="#{{ app_verbose_name|slugify }}-dropdown" class="collapsed" aria-expanded="false">
-            <a><i class="fa fa-dot-circle-o fa-lg"></i> {{ app_verbose_name }} <span class="arrow"></span></a>
+          <li data-toggle="collapse" data-target="#{{ app_verbose_name|slugify }}-dropdown" class="collapsed" aria-expanded="false">
+            <a>
+              <i class="fa fa-dot-circle-o fa-lg"></i>
+              {{ app_verbose_name }}
+              <span class="arrow"></span>
+            </a>
+            <ul class="sub-menu collapse" id="{{ app_verbose_name|slugify }}-dropdown" aria-expanded="false" style="height: 0;">
+              {% for model in models %}
+                <li><a href="#{{ model.verbose_name }}-list">{{ model.verbose_name|title }}</a></li>
+              {% endfor %}
+            </ul>
           </li>
-          <ul class="sub-menu collapse" id="{{ app_verbose_name|slugify }}-dropdown" aria-expanded="false" style="height: 0;">
-            {% for model in models %}
-              <li><a href="#{{ model.verbose_name }}-list">{{ model.verbose_name|title }}</a></li>
-            {% endfor %}
-          </ul>
         {% endfor %}
       </ul>
     </div>
@@ -67,15 +68,18 @@ <h4>Long description:</h4>
   </div>
 
   <script>
-    // Turns the menu into an accordion-like menu to avoid overflow issues
-    $('#menu-content').on('show.bs.collapse', function () {
-      $('.sub-menu').collapse('hide');
-    });
+    document.addEventListener('DOMContentLoaded', function () {
+      // Turns the menu into an accordion-like menu to avoid overflow issues
+      $('#menu-content').on('show.bs.collapse', function () {
+        $('.sub-menu').collapse('hide');
+      });
 
-    // Change the page location on left menu main section click
-    $('ul#menu-content li[data-bs-toggle="collapse"]').on('click', function () {
-      let target = $(this).data('target').replace('-dropdown', '');
-      window.location.replace(target);
+      document.querySelectorAll('ul#menu-content li[data-toggle="collapse"]').forEach(item => {
+        item.addEventListener('click', function () {
+          const target = this.getAttribute('data-target').replace('-dropdown', '');
+          window.location.replace(target);
+        });
+      });
     });
   </script>
 {% endblock %}