From 20c2979a6eafd9e409b5d99ac64f5e0765b0757d Mon Sep 17 00:00:00 2001
From: Sara <sara_babic@intention.de>
Date: Thu, 5 Mar 2026 20:00:30 +0100
Subject: [PATCH 1/4] Fix bug related to className and make styles more similar
 to Craft

---
 src/assetbundles/dist/css/SidebarCss.css | 13 ++++++-------
 src/templates/_sidebar.twig              |  4 ++--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/assetbundles/dist/css/SidebarCss.css b/src/assetbundles/dist/css/SidebarCss.css
index 209bb6f..d87dd0c 100644
--- a/src/assetbundles/dist/css/SidebarCss.css
+++ b/src/assetbundles/dist/css/SidebarCss.css
@@ -1,5 +1,5 @@
 .accordion-item-body > ul {
-    padding: 0 1rem 1rem 2.1rem;
+    padding: 1rem 1rem 1rem 2.1rem;
 }
 
 .accordion-item-body > ul > li {
@@ -12,9 +12,8 @@
     max-width: 1000px;
 }
 .accordion-item {
-    background-color: #fff;
+    background-color: #f3f7fc;
     border-radius: 0.5rem;
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
     color: #111;
     margin: 1rem 0;
 }
@@ -27,6 +26,10 @@
     min-height: 3.5rem;
     padding: 0.5rem 3rem 0.5rem 1rem;
     position: relative;
+    box-shadow:
+    0 0 0 1px #cdd8e4,
+    0 2px 12px rgba(205, 216, 228, 0.5);
+    border-radius: 0.5rem;
 }
 .accordion-item-header::after {
     color: var(--medium-text-color);
@@ -45,9 +48,5 @@
     transition: max-height 0.2s ease-out;
 }
 .accordion-item-body-content {
-    
-
     line-height: 1.5rem;
-    border-top: 1px solid;
-    border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
 }
\ No newline at end of file
diff --git a/src/templates/_sidebar.twig b/src/templates/_sidebar.twig
index aad2133..de6c49f 100644
--- a/src/templates/_sidebar.twig
+++ b/src/templates/_sidebar.twig
@@ -20,7 +20,7 @@
                         </div>
                         {% if fieldObj.className == "benf\\neo\\Field" %}
                             <div class="accordion-item-body">
-                                <ul class="accorion-item-body-content">
+                                <ul class="accordion-item-body-content">
                                     {% for block in indexField.level(1).all() %}
                                         {% set itemTitle = macros.getTitle(block, field) %}
                                         <li>
@@ -31,7 +31,7 @@
                             </div>
                         {% elseif fieldObj.className == "craft\\fields\\Matrix" %}
                             <div class="accordion-item-body">
-                                <ul class="accorion-item-body-content">
+                                <ul class="accordion-item-body-content">
                                     {% for block in indexField.all() %}
                                         {% set itemTitle = macros.getTitle(block, field) %}
                                         <li>

From 25406f3da4bf6659be8c50b20c9f1869dd14bad1 Mon Sep 17 00:00:00 2001
From: Sara <sara_babic@intention.de>
Date: Thu, 5 Mar 2026 20:29:11 +0100
Subject: [PATCH 2/4] Show children of blocks in a tree structure, and make
 sidebar scrollable

---
 src/assetbundles/dist/css/SidebarCss.css | 10 +++++++-
 src/assetbundles/dist/js/SidebarJs.js    | 28 ++++++++++++----------
 src/templates/_sidebar.twig              | 30 +++++++++++++++++-------
 3 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/assetbundles/dist/css/SidebarCss.css b/src/assetbundles/dist/css/SidebarCss.css
index d87dd0c..1be9ab6 100644
--- a/src/assetbundles/dist/css/SidebarCss.css
+++ b/src/assetbundles/dist/css/SidebarCss.css
@@ -7,6 +7,14 @@
     padding-bottom: 0.25rem;
 }
 
+.accordion-item-body-content ul {
+    padding-left: 1.5rem;
+}
+
+.accordion-item-body-content ul li {
+    list-style-type: circle;
+}
+
 .accordion {
     margin: auto auto 1rem auto;
     max-width: 1000px;
@@ -44,7 +52,7 @@
 }
 .accordion-item-body {
     max-height: 0;
-    overflow: hidden;
+    overflow-y: auto;
     transition: max-height 0.2s ease-out;
 }
 .accordion-item-body-content {
diff --git a/src/assetbundles/dist/js/SidebarJs.js b/src/assetbundles/dist/js/SidebarJs.js
index de3a693..b76e31e 100644
--- a/src/assetbundles/dist/js/SidebarJs.js
+++ b/src/assetbundles/dist/js/SidebarJs.js
@@ -25,23 +25,27 @@ function toggleToc(hideAll) {
     })
 }
 
-const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");
+const accordionItemHeaders = document.querySelectorAll(
+  ".accordion-item-header",
+);
 
-accordionItemHeaders.forEach(accordionItemHeader => {
-  accordionItemHeader.addEventListener("click", event => {
-    
-    accordionItemHeader.classList.toggle("active");
-    const accordionItemBody = accordionItemHeader.nextElementSibling;
-    if(accordionItemHeader.classList.contains("active")) {
-      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
-    }
-    else {
-      accordionItemBody.style.maxHeight = 0;
+accordionItemHeaders.forEach((header) => {
+  header.addEventListener("click", () => {
+    header.classList.toggle("active");
+    const body = header.nextElementSibling;
+
+    if (header.classList.contains("active")) {
+      const maxHeight = window.innerHeight * 0.8;
+      const contentHeight = body.scrollHeight;
+
+      body.style.maxHeight = Math.min(contentHeight, maxHeight) + "px";
+    } else {
+      body.style.maxHeight = 0;
     }
-    
   });
 });
 
+
 let tocs = document.querySelectorAll(".toc");
 if (tocs[0].closest(".slideout-container")) {
     toggleToc(true)
diff --git a/src/templates/_sidebar.twig b/src/templates/_sidebar.twig
index de6c49f..60ae1da 100644
--- a/src/templates/_sidebar.twig
+++ b/src/templates/_sidebar.twig
@@ -20,14 +20,28 @@
                         </div>
                         {% if fieldObj.className == "benf\\neo\\Field" %}
                             <div class="accordion-item-body">
-                                <ul class="accordion-item-body-content">
-                                    {% for block in indexField.level(1).all() %}
-                                        {% set itemTitle = macros.getTitle(block, field) %}
-                                        <li>
-                                            <a href="#{{ block.id }}" class="tocitem" id="toc{{ block.id }}">{{ itemTitle }}</a>
-                                        </li>
-                                    {% endfor %}
-                                </ul>
+
+                                {% macro renderBlocks(blocks, field) %}
+                                    <ul class="accordion-item-body-content">
+                                        {% for block in blocks %}
+                                            {% set itemTitle = _self.getTitle(block, field) %}
+
+                                            <li>
+                                                <a href="#{{ block.id }}" class="tocitem" id="toc{{ block.id }}">
+                                                    {{ itemTitle }}
+                                                </a>
+
+                                                {% if block.children|length %}
+                                                    {{ _self.renderBlocks(block.children.all(), field) }}
+                                                {% endif %}
+                                            </li>
+
+                                        {% endfor %}
+                                    </ul>
+                                {% endmacro %}
+
+                                {{ macros.renderBlocks(indexField.level(1).all(), field) }}
+
                             </div>
                         {% elseif fieldObj.className == "craft\\fields\\Matrix" %}
                             <div class="accordion-item-body">

From 662e75fb44ae1c2977e67e86672ee8860e92de21 Mon Sep 17 00:00:00 2001
From: Sara <sara_babic@intention.de>
Date: Thu, 5 Mar 2026 20:41:52 +0100
Subject: [PATCH 3/4] Adding abbility to number the elements

---
 entry-toc.php                            |  3 +-
 src/assetbundles/dist/css/SidebarCss.css | 16 +++++++++
 src/templates/_sidebar.twig              | 45 +++++++++++++++---------
 3 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/entry-toc.php b/entry-toc.php
index 7ca6724..c0992c8 100644
--- a/entry-toc.php
+++ b/entry-toc.php
@@ -6,7 +6,8 @@
     'fieldsToIndex' => [
         [
             'fieldHandle' => 'exampleNeoField', 
-            'fieldTitles' => ['exampleHeading']
+            'fieldTitles' => ['exampleHeading'],
+            'numbering' => false
         ],
         [
             'fieldHandle' => 'exampleMatrixField',
diff --git a/src/assetbundles/dist/css/SidebarCss.css b/src/assetbundles/dist/css/SidebarCss.css
index 1be9ab6..a64b799 100644
--- a/src/assetbundles/dist/css/SidebarCss.css
+++ b/src/assetbundles/dist/css/SidebarCss.css
@@ -2,6 +2,10 @@
     padding: 1rem 1rem 1rem 2.1rem;
 }
 
+.accordion-item-body > ol {
+    padding: 1rem 1rem 1rem 2.1rem;
+}
+
 .accordion-item-body > ul > li {
     list-style-type: circle;
     padding-bottom: 0.25rem;
@@ -11,6 +15,18 @@
     padding-left: 1.5rem;
 }
 
+.accordion-item-body-content ol {
+    list-style-type: none;
+}
+
+.accordion-item-body > ol > li {
+    list-style-type: none;
+}
+
+.accordion-item-body > ol > li {
+    padding-bottom: 0.25rem;
+}
+
 .accordion-item-body-content ul li {
     list-style-type: circle;
 }
diff --git a/src/templates/_sidebar.twig b/src/templates/_sidebar.twig
index 60ae1da..07265ab 100644
--- a/src/templates/_sidebar.twig
+++ b/src/templates/_sidebar.twig
@@ -19,28 +19,41 @@
                             <h4>{{ fieldObj.name }} Table of Contents</h4>
                         </div>
                         {% if fieldObj.className == "benf\\neo\\Field" %}
-                            <div class="accordion-item-body">
+                           <div class="accordion-item-body">
+
+                                {% macro renderBlocks(blocks, field, prefix) %}
+                                    {% if field.numbering %}
+                                        <ol class="accordion-item-body-content">
+                                    {% else %}
+                                        <ul class="accordion-item-body-content">
+                                    {% endif %}
 
-                                {% macro renderBlocks(blocks, field) %}
-                                    <ul class="accordion-item-body-content">
-                                        {% for block in blocks %}
-                                            {% set itemTitle = _self.getTitle(block, field) %}
+                                    {% for block in blocks %}
+                                        {% set itemTitle = _self.getTitle(block, field) %}
 
-                                            <li>
-                                                <a href="#{{ block.id }}" class="tocitem" id="toc{{ block.id }}">
-                                                    {{ itemTitle }}
-                                                </a>
+                                        {% set number = field.numbering ? (prefix ? prefix ~ '.' ~ loop.index : loop.index) : '' %}
+
+                                        <li>
+                                            <a href="#{{ block.id }}" class="tocitem" id="toc{{ block.id }}">
+                                                {% if field.numbering %}{{ number }}. {% endif %}
+                                                {{ itemTitle }}
+                                            </a>
 
-                                                {% if block.children|length %}
-                                                    {{ _self.renderBlocks(block.children.all(), field) }}
-                                                {% endif %}
-                                            </li>
+                                            {% if block.children|length %}
+                                                {{ _self.renderBlocks(block.children.all(), field, number) }}
+                                            {% endif %}
+                                        </li>
+
+                                    {% endfor %}
 
-                                        {% endfor %}
-                                    </ul>
+                                    {% if field.numbering %}
+                                        </ol>
+                                    {% else %}
+                                        </ul>
+                                    {% endif %}
                                 {% endmacro %}
 
-                                {{ macros.renderBlocks(indexField.level(1).all(), field) }}
+                                {{ macros.renderBlocks(indexField.level(1).all(), field, '') }}
 
                             </div>
                         {% elseif fieldObj.className == "craft\\fields\\Matrix" %}

From 8cb02c8457129e6d6ddefa5f9c59a9c2bf601c1b Mon Sep 17 00:00:00 2001
From: Sara <sara_babic@intention.de>
Date: Thu, 5 Mar 2026 20:52:30 +0100
Subject: [PATCH 4/4] Add ability to display blockTitleFields next to block
 title

---
 entry-toc.php               |  3 ++-
 src/templates/_sidebar.twig | 22 +++++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/entry-toc.php b/entry-toc.php
index c0992c8..f68c126 100644
--- a/entry-toc.php
+++ b/entry-toc.php
@@ -7,7 +7,8 @@
         [
             'fieldHandle' => 'exampleNeoField', 
             'fieldTitles' => ['exampleHeading'],
-            'numbering' => false
+            'numbering' => false,
+            'blockTitleFields' => ['exampleBlockField', 'exampleBlockField']
         ],
         [
             'fieldHandle' => 'exampleMatrixField',
diff --git a/src/templates/_sidebar.twig b/src/templates/_sidebar.twig
index 07265ab..eff5ac6 100644
--- a/src/templates/_sidebar.twig
+++ b/src/templates/_sidebar.twig
@@ -22,20 +22,32 @@
                            <div class="accordion-item-body">
 
                                 {% macro renderBlocks(blocks, field, prefix) %}
-                                    {% if field.numbering %}
+                                    {% set numbering = field.numbering|default(false) %}
+
+                                    {% if numbering %}
                                         <ol class="accordion-item-body-content">
                                     {% else %}
                                         <ul class="accordion-item-body-content">
                                     {% endif %}
 
                                     {% for block in blocks %}
-                                        {% set itemTitle = _self.getTitle(block, field) %}
+                                        {% set itemTitle = block.type.name %}
+
+                                        {% set titleFound = false %}
+                                        {% if field.blockTitleFields is defined %}
+                                            {% for f in field.blockTitleFields %}
+                                                {% if not titleFound and block[f] is defined and block[f] %}
+                                                    {% set itemTitle = itemTitle ~ ' (' ~ block[f]|striptags ~ ')' %}
+                                                    {% set titleFound = true %}
+                                                {% endif %}
+                                            {% endfor %}
+                                        {% endif %}
 
-                                        {% set number = field.numbering ? (prefix ? prefix ~ '.' ~ loop.index : loop.index) : '' %}
+                                        {% set number = numbering ? (prefix ? prefix ~ '.' ~ loop.index : loop.index) : '' %}
 
                                         <li>
                                             <a href="#{{ block.id }}" class="tocitem" id="toc{{ block.id }}">
-                                                {% if field.numbering %}{{ number }}. {% endif %}
+                                                {% if numbering %}{{ number }}. {% endif %}
                                                 {{ itemTitle }}
                                             </a>
 
@@ -46,7 +58,7 @@
 
                                     {% endfor %}
 
-                                    {% if field.numbering %}
+                                    {% if numbering %}
                                         </ol>
                                     {% else %}
                                         </ul>