Fix children toggle

resources/views/themes/elements/components/field-details.blade.php

@@ -1,17 +1,24 @@
 @php
-    $hasChildren ??= false
+    $hasChildren ??= false;
+    $isArrayBody = $name == "[]";
 @endphp
 
 <div class="sl-flex sl-relative sl-max-w-full sl-py-2 sl-pl-3">
     <div class="sl-w-1 sl-mt-2 sl-mr-3 sl--ml-3 sl-border-t"></div>
     <div class="sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full sl-ml-2">
         <div class="sl-flex sl-items-center sl-max-w-full @if($hasChildren) sl-cursor-pointer @endif">
-            @if($hasChildren)
-                <div class="sl-flex sl-justify-center sl-w-8 sl--ml-8 sl-pl-3 sl-text-muted"
-                     role="button">
+            @if($hasChildren && !$isArrayBody)
+                <div class="sl-flex sl-justify-center sl-w-8 sl--ml-8 sl-pl-3 sl-text-muted" role="button">
+                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right"
+                         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>
                     <svg aria-hidden="true" focusable="false" data-prefix="fas"
                          data-icon="chevron-down"
-                         class="svg-inline--fa fa-chevron-down fa-fw fa-sm sl-icon"
+                         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"
@@ -19,20 +26,31 @@
                     </svg>
                 </div>
             @endif
-            <div class="sl-flex sl-items-baseline sl-text-base">
-                <div class="sl-font-mono sl-font-semibold sl-mr-2">{{ $name }}</div>
-                @if($type)
-                    <span class="sl-truncate sl-text-muted">{{ $type }}</span>
+            @unless($isArrayBody)
+                <div class="sl-flex sl-items-baseline sl-text-base">
+                    <div class="sl-font-mono sl-font-semibold sl-mr-2">{{ $name }}</div>
+                    @if($type)
+                        <span class="sl-truncate sl-text-muted">{{ $type }}</span>
+                    @endif
+                </div>
+                @if($required)
+                    <div class="sl-flex-1 sl-h-px sl-mx-3"></div>
+                    <span class="sl-ml-2 sl-text-warning">required</span>
                 @endif
-            </div>
-            <div class="sl-flex-1 sl-h-px sl-mx-3"></div>
-            @if($required)
-                <span class="sl-ml-2 sl-text-warning">required</span>
-            @endif
+            @endunless
         </div>
         <div class="sl-prose sl-markdown-viewer" style="font-size: 12px;">
             {!! Parsedown::instance()->text($description) !!}
         </div>
+        @if($isArrayBody)
+            <div class="sl-flex sl-items-baseline sl-text-base">
+                <div class="sl-font-mono sl-font-semibold sl-mr-2">array of:</div>
+                @if($required)
+                    <div class="sl-flex-1 sl-h-px sl-mx-3"></div>
+                    <span class="sl-ml-2 sl-text-warning">required</span>
+                @endif
+            </div>
+        @endif
         @if(!$hasChildren && !is_null($example) && $example != '')
             <div class="sl-stack sl-stack--horizontal sl-stack--2 sl-flex sl-flex-row sl-items-baseline sl-text-muted">
                 <span>Example:</span>

resources/views/themes/elements/components/nested-fields.blade.php

@@ -1,6 +1,14 @@
+@php
+    $level ??= 0;
+    $levelNestingClass = match($level) {
+        0 => "sl-ml-px",
+        default => "sl-ml-7"
+    };
+    $expandable ??= !isset($fields["[]"]);
+@endphp
 
-<div data-level="{{ $level ??= 0 }}" class="sl-text-sm sl-ml-px sl-border-l">
-    @foreach($fields as $name => $field)
+@foreach($fields as $name => $field)
+    <div class="{{ $expandable ? 'expandable' : '' }} sl-text-sm sl-border-l {{ $levelNestingClass }}">
         @component('scribe::themes.elements.components.field-details', [
           'name' => $name,
           'type' => $field['type'] ?? 'string',
@@ -14,12 +22,15 @@
         @endcomponent
 
         @if(!empty($field['__fields']))
-            @component('scribe::themes.elements.components.nested-fields', [
-              'fields' => $field['__fields'],
-              'endpointId' => $endpointId,
-              'level' => $level + 1,
-            ])
-            @endcomponent
+            <div class="children" style="{{ $expandable ? 'display: none;' : '' }}">
+                @component('scribe::themes.elements.components.nested-fields', [
+                  'fields' => $field['__fields'],
+                  'endpointId' => $endpointId,
+                  'level' => $level + 1,
+                  'expandable'=> $expandable,
+                ])
+                @endcomponent
+            </div>
         @endif
-    @endforeach
-</div>
+    </div>
+@endforeach

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

@@ -47,105 +47,54 @@
                 <div class="sl-stack sl-stack--vertical sl-stack--8 sl-flex sl-flex-col sl-items-stretch">
                     @if(count($endpoint->headers))
                         <div class="sl-stack sl-stack--vertical sl-stack--5 sl-flex sl-flex-col sl-items-stretch">
-                            <div class="sl-stack sl-stack--horizontal sl-stack--6 sl-flex sl-flex-row sl-items-center">
-                                <h3 id="/paths/api-file-input/post#request-headers" aria-label="Headers"
-                                    class="sl-link-heading sl-text-2xl sl-leading-snug sl-font-prose sl-font-semibold sl-text-heading">
-                                    <a href="#/paths/api-file-input/post#request-headers"
-                                       class="sl-link sl-link-heading__link sl-inline-flex sl-items-center sl-text-current">
-                                        <div>Headers</div>
-                                        <div class="sl-link-heading__icon sl-text-base sl-ml-4 sl-text-muted">
-                                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link"
-                                                 class="svg-inline--fa fa-link sl-icon" role="img"
-                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-                                                <path fill="currentColor"
-                                                      d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"></path>
-                                            </svg>
-                                        </div>
-                                    </a></h3>
-                            </div>
-                            <div class="" id="mosaic-provider-react-aria-1-1">
-                                <div data-overlay-container="true" class="">
-                                    <div class="JsonSchemaViewer">
-                                        <div></div>
-                                        @foreach($endpoint->headers as $header => $value)
-                                            @component('scribe::themes.elements.components.field-details', [
-                                              'name' => $header,
-                                              'type' => null,
-                                              'required' => false,
-                                              'description' => null,
-                                              'example' => $value,
-                                              'endpointId' => $endpoint->endpointId(),
-                                              'component' => 'header',
-                                              'isInput' => true,
-                                            ])
-                                            @endcomponent
-                                        @endforeach
-                                    </div>
-                                </div>
+                            <h3 class="sl-text-2xl sl-leading-snug sl-font-prose">
+                                Headers
+                            </h3>
+                            <div class="JsonSchemaViewer">
+                                @foreach($endpoint->headers as $header => $value)
+                                    @component('scribe::themes.elements.components.field-details', [
+                                      'name' => $header,
+                                      'type' => null,
+                                      'required' => false,
+                                      'description' => null,
+                                      'example' => $value,
+                                      'endpointId' => $endpoint->endpointId(),
+                                      'component' => 'header',
+                                      'isInput' => true,
+                                    ])
+                                    @endcomponent
+                                @endforeach
                             </div>
                         </div>
                     @endif
 
                     @if(count($endpoint->urlParameters))
                         <div class="sl-stack sl-stack--vertical sl-stack--6 sl-flex sl-flex-col sl-items-stretch">
-                            <div class="sl-stack sl-stack--horizontal sl-stack--6 sl-flex sl-flex-row sl-items-center">
-                                <h3 id="/paths/api-file-input/post#request-body"
-                                    class="sl-link-heading sl-text-2xl sl-leading-snug sl-font-prose sl-font-semibold sl-text-heading">
-                                    <a href="#/paths/api-file-input/post#request-body"
-                                       class="sl-link sl-link-heading__link sl-inline-flex sl-items-center sl-text-current">
-                                        URL Parameters
-                                        <div class="sl-link-heading__icon sl-text-base sl-ml-4 sl-text-muted">
-                                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link"
-                                                 class="svg-inline--fa fa-link sl-icon" role="img"
-                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-                                                <path fill="currentColor"
-                                                      d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"></path>
-                                            </svg>
-                                        </div>
-                                    </a></h3>
-                            </div>
+                            <h3 class="sl-text-2xl sl-leading-snug sl-font-prose">URL Parameters</h3>
 
-                            <div data-overlay-container="true" class="">
-                                <div class="JsonSchemaViewer">
-                                    @foreach($endpoint->urlParameters as $attribute => $parameter)
-                                        @component('scribe::themes.elements.components.field-details', [
-                                          'name' => $parameter->name,
-                                          'type' => $parameter->type ?? 'string',
-                                          'required' => $parameter->required,
-                                          'description' => $parameter->description,
-                                          'example' => $parameter->example ?? '',
-                                          'endpointId' => $endpoint->endpointId(),
-                                          'component' => 'url',
-                                          'isInput' => true,
-                                        ])
-                                        @endcomponent
-                                    @endforeach
-                                </div>
+                            <div class="JsonSchemaViewer">
+                                @foreach($endpoint->urlParameters as $attribute => $parameter)
+                                    @component('scribe::themes.elements.components.field-details', [
+                                      'name' => $parameter->name,
+                                      'type' => $parameter->type ?? 'string',
+                                      'required' => $parameter->required,
+                                      'description' => $parameter->description,
+                                      'example' => $parameter->example ?? '',
+                                      'endpointId' => $endpoint->endpointId(),
+                                      'component' => 'url',
+                                      'isInput' => true,
+                                    ])
+                                    @endcomponent
+                                @endforeach
                             </div>
                         </div>
                     @endif
 
 
                     @if(count($endpoint->queryParameters))
-                        <div class="sl-stack sl-stack--vertical sl-stack--6 sl-flex sl-flex-col sl-items-stretch">
-                            <div class="sl-stack sl-stack--horizontal sl-stack--6 sl-flex sl-flex-row sl-items-center">
-                                <h3 id="/paths/api-file-input/post#request-body"
-                                    class="sl-link-heading sl-text-2xl sl-leading-snug sl-font-prose sl-font-semibold sl-text-heading">
-                                    <a href="#/paths/api-file-input/post#request-body"
-                                       class="sl-link sl-link-heading__link sl-inline-flex sl-items-center sl-text-current">
-                                        Query Parameters
-                                        <div class="sl-link-heading__icon sl-text-base sl-ml-4 sl-text-muted">
-                                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link"
-                                                 class="svg-inline--fa fa-link sl-icon" role="img"
-                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-                                                <path fill="currentColor"
-                                                      d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"></path>
-                                            </svg>
-                                        </div>
-                                    </a></h3>
-                            </div>
+                            <div class="sl-stack sl-stack--vertical sl-stack--6 sl-flex sl-flex-col sl-items-stretch">
+                                <h3 class="sl-text-2xl sl-leading-snug sl-font-prose">Query Parameters</h3>
 
-                            <div data-overlay-container="true" class="">
                                 <div class="JsonSchemaViewer">
                                     @foreach($endpoint->queryParameters as $attribute => $parameter)
                                         @component('scribe::themes.elements.components.field-details', [
@@ -160,65 +109,29 @@
                                         ])
                                         @endcomponent
                                     @endforeach
-                                </div>
                             </div>
                         </div>
                     @endif
 
                     @if(count($endpoint->nestedBodyParameters))
                         <div class="sl-stack sl-stack--vertical sl-stack--6 sl-flex sl-flex-col sl-items-stretch">
-                            <div class="sl-stack sl-stack--horizontal sl-stack--6 sl-flex sl-flex-row sl-items-center">
-                                <h3 id="/paths/api-file-input/post#request-body"
-                                    class="sl-link-heading sl-text-2xl sl-leading-snug sl-font-prose sl-font-semibold sl-text-heading">
-                                    <a href="#/paths/api-file-input/post#request-body"
-                                       class="sl-link sl-link-heading__link sl-inline-flex sl-items-center sl-text-current">
-                                        Body Parameters
-                                        <div class="sl-link-heading__icon sl-text-base sl-ml-4 sl-text-muted">
-                                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link"
-                                                 class="svg-inline--fa fa-link sl-icon" role="img"
-                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-                                                <path fill="currentColor"
-                                                      d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"></path>
-                                            </svg>
-                                        </div>
-                                    </a></h3>
-                            </div>
+                            <h3 class="sl-text-2xl sl-leading-snug sl-font-prose">Body Parameters</h3>
 
-                            <div data-overlay-container="true" class="">
                                 <div class="JsonSchemaViewer">
-                                    <div></div>
                                     @component('scribe::themes.elements.components.nested-fields', [
                                       'fields' => $endpoint->nestedBodyParameters,
                                       'endpointId' => $endpoint->endpointId(),
                                     ])
                                     @endcomponent
-                                </div>
                             </div>
                         </div>
                     @endif
 
                     @if(count($endpoint->responseFields))
-                        <div class="sl-stack sl-stack--vertical sl-stack--6 sl-flex sl-flex-col sl-items-stretch">
-                            <div class="sl-stack sl-stack--horizontal sl-stack--6 sl-flex sl-flex-row sl-items-center">
-                                <h3 id="/paths/api-file-input/post#request-body"
-                                    class="sl-link-heading sl-text-2xl sl-leading-snug sl-font-prose sl-font-semibold sl-text-heading">
-                                    <a href="#/paths/api-file-input/post#request-body"
-                                       class="sl-link sl-link-heading__link sl-inline-flex sl-items-center sl-text-current">
-                                        Response Fields
-                                        <div class="sl-link-heading__icon sl-text-base sl-ml-4 sl-text-muted">
-                                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link"
-                                                 class="svg-inline--fa fa-link sl-icon" role="img"
-                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-                                                <path fill="currentColor"
-                                                      d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"></path>
-                                            </svg>
-                                        </div>
-                                    </a></h3>
-                            </div>
+                            <div class="sl-stack sl-stack--vertical sl-stack--6 sl-flex sl-flex-col sl-items-stretch">
+                                <h3 class="sl-text-2xl sl-leading-snug sl-font-prose">Response Fields</h3>
 
-                            <div data-overlay-container="true" class="">
                                 <div class="JsonSchemaViewer">
-                                    <div></div>
                                     @component('scribe::themes.elements.components.nested-fields', [
                                       'fields' => $endpoint->nestedResponseFields,
                                       'endpointId' => $endpoint->endpointId(),
@@ -227,8 +140,7 @@
                                     @endcomponent
                                 </div>
                             </div>
-                        </div>
-                    @endif
+                        @endif
                 </div>
             </div>
         </div>
@@ -405,9 +317,9 @@
                                     <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 onclick="wasOpen = parentElement.parentElement.open; event.target.querySelector('.open').style.display = !wasOpen ? 'none' : 'initial';  event.target.querySelector('.close').style.display = wasOpen ? 'none' : 'initial'; ">
-                                                            <svg focusable="false"style="display: none;" class="close 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="open 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>
+                                                        <small onclick="wasOpen = parentElement.parentElement.open; event.target.querySelector('.expand-chevron').style.display = !wasOpen ? 'none' : 'initial';  event.target.querySelector('.expanded-chevron').style.display = wasOpen ? 'none' : 'initial'; ">
+                                                            <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
                                                         </small>
                                                     </summary>

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

@@ -60,22 +60,32 @@
         document.querySelectorAll(`.example-response-${endpointId}-toggle`).forEach(el => el.value = index);
     }
 
-    function toggleSidebarChildren(elem, heading) {
-        let children = document.querySelectorAll(`.children-${heading}`)
-        if (!children.length) return;
+    function toggleElementChildren(evt) {
+        let elem = evt.currentTarget;
+        let children = elem.querySelector(`.children`);
+        if (!children) return;
 
-        let oldState = children[0].style.display
-        if (oldState == 'none') {
-            children.forEach(el => el.style.removeProperty('display'));
+        if (children.contains(event.target)) return;
+
+        let oldState = children.style.display
+        if (oldState === 'none') {
+            children.style.removeProperty('display');
             elem.querySelector('.expand-chevron').style.display = 'none'
             elem.querySelector('.expanded-chevron').style.removeProperty('display')
         } else {
-            children.forEach(el => el.style.display = 'none');
+            children.style.display = 'none';
             elem.querySelector('.expand-chevron').style.removeProperty('display')
             elem.querySelector('.expanded-chevron').style.display = 'none'
         }
 
+        evt.stopPropagation();
     }
+
+    window.addEventListener('DOMContentLoaded', () => {
+        document.querySelectorAll('.expandable').forEach(el => {
+            el.addEventListener('click', toggleElementChildren);
+        });
+    });
 </script>
 
 <div style="height: 100%;">
@@ -85,7 +95,7 @@
 
                 @include("scribe::themes.elements.sidebar")
 
-                <div class="sl-overflow-y-auto sl-flex-1 sl-w-full sl-px-24 sl-bg-canvas">
+                <div class="sl-overflow-y-auto sl-flex-1 sl-w-full sl-px-16 sl-bg-canvas">
                     <div class="sl-py-16" style="max-width: 1500px;">
 
                         <div class="sl-mb-10">

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

@@ -16,41 +16,25 @@
         <div class="sl-overflow-y-auto sl-w-full sl-bg-canvas-100">
             <div class="sl-my-3">
                 @foreach($headings as $h1)
-                    <div title="{!! $h1['name'] !!}"
-                         class="sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-4 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none">
-                        <a href="#{!! $h1['slug'] !!}" class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5 sl-p-0" onclick="toggleSidebarChildren(event.target.parentElement, '{{ $h1['slug'] }}')">{!! $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>
-                        @endif
-                    </div>
-
-                    @foreach($h1['subheadings'] as $h2)
-                        <div class="children-{{ $h1['slug'] }} sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-8 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none"
-                                style="display: none;"
-                        >
-                            <div class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5 sl-p-0" id="sl-toc-{!! $h2['slug'] !!}" title="{!! $h2['slug'] !!}">
-                                    <a class="ElementsTableOfContentsItem sl-block sl-no-underline" href="#{!! $h2['slug'] !!}" onclick="toggleSidebarChildren(event.target.parentElement.parentElement, '{{ $h2['slug'] }}')">
-                                    {!! $h2['name'] !!}
-                                    </a>
-                            </div>
-                            @if(count($h2['subheadings']) > 0)
+                    <div class="expandable">
+                        <div title="{!! $h1['name'] !!}"
+                             class="sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-4 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none">
+                            <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-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;"
+                                             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>
@@ -60,17 +44,59 @@
                             @endif
                         </div>
 
-                        @foreach($h2['subheadings'] as $h3)
-                            <a class="children-{{ $h2['slug'] }} ElementsTableOfContentsItem sl-block sl-no-underline"
-                               href="#{!! $h3['slug'] !!}"
-                               style="display: none;">
-                                <div id="sl-toc-{!! $h3['slug'] !!}" title="{!! $h3['slug'] !!}"
-                                     class="sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-12 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none">
-                                    <div class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5">{!! $h3['name'] !!}</div>
-                                </div>
-                            </a>
-                        @endforeach
-                    @endforeach
+                        @if(count($h1['subheadings']) > 0)
+                            <div class="children" style="display: none;">
+                                @foreach($h1['subheadings'] as $h2)
+                                    <div class="expandable">
+                                        <div class="sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-8 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none">
+                                            <div class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5 sl-p-0"
+                                                 title="{!! $h2['slug'] !!}">
+                                                <a class="ElementsTableOfContentsItem sl-block sl-no-underline"
+                                                   href="#{!! $h2['slug'] !!}">
+                                                    {!! $h2['name'] !!}
+                                                </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>
+                                            @endif
+                                        </div>
+
+                                        @if(count($h2['subheadings']) > 0)
+                                            <div class="children" style="display: none;">
+                                                @foreach($h2['subheadings'] as $h3)
+                                                    <a class="children ElementsTableOfContentsItem sl-block sl-no-underline"
+                                                       href="#{!! $h3['slug'] !!}">
+                                                        <div title="{!! $h3['slug'] !!}"
+                                                             class="sl-flex sl-items-center sl-h-md sl-pr-4 sl-pl-12 sl-bg-canvas-100 hover:sl-bg-canvas-200 sl-cursor-pointer sl-select-none">
+                                                            <div class="sl-flex-1 sl-items-center sl-truncate sl-mr-1.5">{!! $h3['name'] !!}</div>
+                                                        </div>
+                                                    </a>
+                                                @endforeach
+                                            </div>
+                                        @endif
+                                    </div>
+                                @endforeach
+                            </div>
+                        @endif
+                    </div>
                 @endforeach
             </div>