Remove tabs and add toc

assets/css/configurator.css

@@ -86,19 +86,12 @@
 }
 
 .view__item {
-    display: none;
-    opacity: 0;
-    height: 0;
     position: relative;
-    z-index: -1;
 }
 
 .view__item.active {
-    display: inherit;
-    opacity: 1;
     min-height: 500px;
     height: fit-content;
-    z-index: 1;
 }
 
 .configurator span.tooltip-text {
@@ -135,6 +128,43 @@ https://github.com/codesandbox/codesandbox-client/blob/389073613e06eee944231f4ae
     overflow: hidden;
 }
 
+.configurator-toc {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 24px;
+    width: 680px;
+    padding: 32px 64px 32px 40px;
+    border-radius: 16px;
+    background: #F6F8FE;
+
+    #toc {
+        margin-bottom: 0;
+    }
+}
+
+.configurator-toc #toc > ul > li::before {
+    content: '';
+    display: block;
+    background: var(--main-color);
+    width: 6px;
+    height: 6px;
+    border: 1px solid var(--main-color);
+    border-radius: 50%;
+}
+
+.configurator-toc #toc ul ul > li::before {
+    content: '';
+    display: block;
+    top: 12px;
+    background: transparent;
+    width: 6px;
+    height: 6px;
+    border: 1px solid var(--main-color);
+    border-radius: 50%;
+}
+
 .view__item:not(.active) .codesandbox__wrap iframe {
     position: absolute;
     left: -5000px;

assets/js/configurator/tabs.js

@@ -1,23 +1,5 @@
 $(document).ready(() => {
 
-    // Handle tab switches.
-    $(document).on('click tap', '.configurator__views-buttons', (e) => {
-        e.preventDefault();
-        const target = $(e.target);
-        setOffsetElements();
-
-        // Handle only clicks on non-active buttons.
-        if (target.hasClass('btn') && !target.hasClass('active')) {
-            // Activate clicked button.
-            target.parent().find('[data-view-button]').removeClass('active');
-            target.addClass('active');
-            // Activate tab content.
-            $('#view__wrap').find('[data-view-content]').removeClass('active');
-            const btnAttr = target.attr('data-view-button');
-            $(`[data-view-content = ${btnAttr}]`).addClass('active');
-        }
-    });
-
     $(document).on('click tap', '.directory-structure', (e) => {
         const structure = $('.directory-structure');
         const filesView = $('.files-view__wrap');

bin/configurator/static/_data/_common/configurator.yaml

@@ -211,3 +211,8 @@ tabs:
     title:
       en: "Run"
       ru: "Запуск"
+toc:
+  - name: "tableOfContent"
+    title:
+      en: "Content"
+      ru: "Содержание"

bin/configurator/templates/includes/tabs.html

@@ -1,15 +1,9 @@
 
 <div class="configurator__views docs">
-    <div class="configurator__views-buttons">
-        {{- range $i, $tab := .Tabs }}
-        {% assign tab_info = site.data.common.configurator.tabs | find: "name", "{{ $tab.Name }}" %}
-        {% assign tab_title = tab_info.title[page.lang] | default: "{{ $tab.Name }}" %}
-        <a href="#" id="{{ $tab.Name }}" class="btn btn_o{{ if eq $i 0}} active{{ end }}" data-view-button="{{ $tab.Name }}">{{`{{tab_title}}`}}</a>
-        {{ end }}
-    </div>
     <div id="view__wrap">
         {{- range $i, $tab := .Tabs }}
-<div id="partial-{{ $tab.Name }}" class="view__item{{ if eq $i 0 }} active{{ end }}" data-view-content="{{ $tab.Name }}" markdown="1">
+        <h2>{{ $tab.Name }}</h2>
+<div id="partial-{{ $tab.Name }}" class="view__item" data-view-content="{{ $tab.Name }}" markdown="1">
 {% include {{ $tab.IncludePath }} {{ range $option := $.Options }}{{ $option.Name }}='{{ $option.Value }}' {{ end }} {{ range $k, $v := $tab.Params }}{{ $k }}='{{ $v }}' {{ end -}} %}
 </div>
         {{- end }}

bin/configurator/templates/pages/configurator.html

@@ -34,6 +34,31 @@ <h1 class="docs__title">{{ .Title }}</h1>
         {{- end }}
     </div>
 
+    <div class="configurator-toc">
+        <div>Содержание</div>
+        <script>
+            $( document ).ready(function() {
+                // Handler for .ready() called.
+
+                $('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2, h3:not(.tabs__content>h3), h4' });
+
+                if ($('#toc').is(':empty')) { $('#toc').hide(); }
+
+                /* this offset helps account for the space taken up by the floating toolbar. */
+                $('#toc').on('click tap', 'a', function() {
+                    var target = $(this.getAttribute('href'))
+                        , scroll_target = target.offset().top;
+
+                    $(window).scrollTop(scroll_target - 110);
+                    return false
+                })
+
+            });
+        </script>
+
+        <div id="toc"></div>
+    </div>
+
 <div id="configurator-content" markdown="1">
 {{ if .PageTab }} {% include {{ .IncludePath }} %} {{ else }} {% include {{ .DefaultIncludePath }} %} {{ end }}
 </div>