Improve chevrons expansion

resources/views/themes/elements/endpoint.blade.php

@@ -315,12 +315,20 @@
                                      style=" {{ $index == 0 ? '' : 'display: none;' }}"
                                 >
                                     <div class="sl-panel__content sl-p-0">@if(count($response->headers))
-                                                <details class="sl-pl-2">
-                                                    <summary style="cursor: pointer; list-style: none;">
-                                                        <small>
-                                                            <svg focusable="false"style="display: none;" class="expanded-chevron svg-inline--fa fa-chevron-down fa-fw fa-sm sl-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"></path></svg>
-                                                            <svg focusable="false" class="expand-chevron svg-inline--fa fa-chevron-right fa-fw fa-sm sl-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path></svg>
-                                                            Headers
+                                            <details class="sl-pl-2">
+                                                <summary style="cursor: pointer; list-style: none;">
+                                                    <small>
+                                                        <span class="expansion-chevrons">
+
+    <svg aria-hidden="true" focusable="false" data-prefix="fas"
+         data-icon="chevron-right"
+         class="svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted"
+         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+        <path fill="currentColor"
+              d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path>
+    </svg>
+                                                            </span>
+                                                        Headers
                                                         </small>
                                                     </summary>
                                                     <pre><code class="language-http">@foreach($response->headers as $header => $value)

resources/views/themes/elements/index.blade.php

@@ -64,14 +64,20 @@
     function toggleExpansionChevrons(evt) {
         let elem = evt.currentTarget;
 
-        const newState = elem.querySelector('.expand-chevron').style.display === 'none' ? 'expand' : 'expanded';
+        let chevronsArea = elem.querySelector('.expansion-chevrons');
+        const newState = chevronsArea.classList.contains('expanded') ? 'expand' : 'expanded';
         if (newState === 'expanded') {
-            elem.querySelector('.expand-chevron').style.display = 'none';
-            elem.querySelector('.expanded-chevron').style.removeProperty('display');
+            const template = document.querySelector('#expanded-chevron');
+            const chevron = template.content.cloneNode(true);
+            chevronsArea.replaceChildren(chevron);
+            chevronsArea.classList.add('expanded');
         } else {
-            elem.querySelector('.expand-chevron').style.removeProperty('display')
-            elem.querySelector('.expanded-chevron').style.display = 'none'
+            const template = document.querySelector('#expand-chevron');
+            const chevron = template.content.cloneNode(true);
+            chevronsArea.replaceChildren(chevron);
+            chevronsArea.classList.remove('expanded');
         }
+
     }
 
     function toggleElementChildren(evt) {
@@ -167,5 +173,24 @@
 
 </div>
 
+<template id="expand-chevron">
+    <svg aria-hidden="true" focusable="false" data-prefix="fas"
+         data-icon="chevron-right"
+         class="svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted"
+         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+        <path fill="currentColor"
+              d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path>
+    </svg>
+</template>
+
+<template id="expanded-chevron">
+    <svg aria-hidden="true" focusable="false" data-prefix="fas"
+         data-icon="chevron-down"
+         class="svg-inline--fa fa-chevron-down fa-fw sl-icon sl-text-muted"
+         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path fill="currentColor"
+              d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"></path>
+    </svg>
+</template>
 </body>
 </html>

resources/views/themes/elements/sidebar.blade.php

@@ -22,24 +22,14 @@
                             <a href="#{!! $h1['slug'] !!}"
                                class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5 sl-p-0">{!! $h1['name'] !!}</a>
                             @if(count($h1['subheadings']) > 0)
-                                <div class="sl-flex sl-items-center sl-text-xs">
-                                    <div class="sl-flex sl-items-center">
-                                        <svg aria-hidden="true" focusable="false" data-prefix="fas"
-                                             data-icon="chevron-right"
-                                             class="expand-chevron svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted"
-                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-                                            <path fill="currentColor"
-                                                  d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path>
-                                        </svg>
-                                        <svg aria-hidden="true" focusable="false" data-prefix="fas"
-                                             data-icon="chevron-down"
-                                             style="display: none;"
-                                             class="expanded-chevron svg-inline--fa fa-chevron-down fa-fw sl-icon sl-text-muted"
-                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-                                            <path fill="currentColor"
-                                                  d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"></path>
-                                        </svg>
-                                    </div>
+                                <div class="sl-flex sl-items-center sl-text-xs expansion-chevrons">
+                                    <svg aria-hidden="true" focusable="false" data-prefix="fas"
+                                         data-icon="chevron-right"
+                                         class="svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted"
+                                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                                        <path fill="currentColor"
+                                              d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path>
+                                    </svg>
                                 </div>
                             @endif
                         </div>
@@ -57,24 +47,14 @@
                                                 </a>
                                             </div>
                                             @if(count($h2['subheadings']) > 0)
-                                                <div class="sl-flex sl-items-center sl-text-xs">
-                                                    <div class="sl-flex sl-items-center">
-                                                        <svg aria-hidden="true" focusable="false" data-prefix="fas"
-                                                             data-icon="chevron-right"
-                                                             class="expand-chevron svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted"
-                                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-                                                            <path fill="currentColor"
-                                                                  d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path>
-                                                        </svg>
-                                                        <svg aria-hidden="true" focusable="false" data-prefix="fas"
-                                                             data-icon="chevron-down"
-                                                             class="expanded-chevron svg-inline--fa fa-chevron-down fa-fw sl-icon sl-text-muted"
-                                                             style="display: none;"
-                                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-                                                            <path fill="currentColor"
-                                                                  d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"></path>
-                                                        </svg>
-                                                    </div>
+                                                <div class="sl-flex sl-items-center sl-text-xs expansion-chevrons">
+                                                    <svg aria-hidden="true" focusable="false" data-prefix="fas"
+                                                         data-icon="chevron-right"
+                                                         class="svg-inline--fa fa-chevron-right fa-fw sl-icon sl-text-muted"
+                                                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                                                        <path fill="currentColor"
+                                                              d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path>
+                                                    </svg>
                                                 </div>
                                             @endif
                                         </div>