Merge pull request #63 from dermatz/add-parent-child-indicators

Add visual indicators for parent/child menu elements

Author: fballiano

resources/css/_sidebar_layout.css

@@ -24,12 +24,17 @@
                     content: "";
                     background: url(/img/icons/active_marker.min.svg);
                 }
+
+                &.child-indicator > a::before {
+                    content: "•";
+                    @apply absolute left-[3px] top-0 text-gray-500;
+                }
             }
         }
 
         .sub--on {
             > h2 {
-                @apply mb-2;
+                @apply mb-2 font-semibold;
             }
 
             ul {

resources/js/docs.js

@@ -49,6 +49,18 @@ function setupNavCurrentLinkHandling() {
             }
         });
     });
+
+    // Add .has-children class to parent elements
+    [...document.querySelectorAll('.docs_sidebar ul li')].forEach(el => {
+        if (el.querySelector('ul')) {
+            el.classList.add('has-children');
+        }
+    });
+
+    // Add .child-indicator class to child elements
+    [...document.querySelectorAll('.docs_sidebar ul ul li')].forEach(el => {
+        el.classList.add('child-indicator');
+    });
 }
 
 function replaceBlockquotesWithCalloutsInDocs() {

resources/views/partials/header.blade.php

@@ -32,5 +32,17 @@ class="lg:hidden"
         x-transition:leave="duration-100 ease-in"
         x-cloak
     >
+        <nav class="bg-white shadow-lg">
+            <ul class="space-y-2">
+                <li class="has-children">
+                    <a href="#" class="block px-4 py-2 text-gray-700">Parent Item</a>
+                    <ul class="pl-4 space-y-1">
+                        <li class="child-indicator">
+                            <a href="#" class="block px-4 py-2 text-gray-700">Child Item</a>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
     </div>
 </header>