Deeper nesting breaks active TOC parent

[serpro69]

I'm trying to add h3 level for nesting, but the sidebar stopped showing h2 and h3 levels altogether, not sure what I'm doing wrong as I was just following the wiki guide for this.

This is the diff of the changes I made to add h3 in the TOC

diff --git a/api/realestate/docs/javascripts/all_nosearch.js b/api/realestate/docs/javascripts/all_nosearch.js
index 026e5a2..9a2f0f5 100644
--- a/api/realestate/docs/javascripts/all_nosearch.js
+++ b/api/realestate/docs/javascripts/all_nosearch.js
@@ -9,7 +9,7 @@ function adjustLanguageSelectorWidth() {
 }
 
 $(function() {
-  loadToc($('#toc'), '.toc-link', '.toc-list-h2', 10);
+  loadToc($('#toc'), '.toc-link', '.toc-list-h2', '.toc-list-h3', 10);
   setupLanguages($('body').data('languages'));
   $('.content').imagesLoaded( function() {
     window.recacheHeights();
diff --git a/api/realestate/docs/javascripts/app/_search.js b/api/realestate/docs/javascripts/app/_search.js
index 0b0ccd9..52a579b 100644
--- a/api/realestate/docs/javascripts/app/_search.js
+++ b/api/realestate/docs/javascripts/app/_search.js
@@ -19,9 +19,9 @@
       this.pipeline.add(lunr.trimmer, lunr.stopWordFilter);
       var lunrConfig = this;
 
-      $('h1, h2').each(function() {
+      $('h1, h2, h3').each(function() {
         var title = $(this);
-        var body = title.nextUntil('h1, h2');
+        var body = title.nextUntil('h1, h2, h3');
         lunrConfig.add({
           id: title.prop('id'),
           title: title.text(),
diff --git a/api/realestate/docs/layouts/layout.erb b/api/realestate/docs/layouts/layout.erb
index 2030918..61998a5 100644
--- a/api/realestate/docs/layouts/layout.erb
+++ b/api/realestate/docs/layouts/layout.erb
@@ -99,6 +99,15 @@ under the License.
                 <% h1[:children].each do |h2| %>
                   <li>
                     <a href="#<%= h2[:id] %>" class="toc-h2 toc-link" data-title="<%= h2[:title] %>"><%= h2[:content] %></a>
+                    <% if h2[:children].length > 0 %>
+                      <ul class="toc-list-h3">
+                        <% h2[:children].each do |h3| %>
+                          <li>
+                            <a href="#<%= h3[:id] %>" class="toc-h3 toc-link" data-title="<%= h3[:content] %>"><%= h3[:content] %></a>
+                          </li>
+                        <% end %>
+                      </ul>
+                    <% end %>
                   </li>
                 <% end %>
               </ul>
diff --git a/api/realestate/docs/stylesheets/screen.css.scss b/api/realestate/docs/stylesheets/screen.css.scss
index 0ce124e..ed1d205 100644
--- a/api/realestate/docs/stylesheets/screen.css.scss
+++ b/api/realestate/docs/stylesheets/screen.css.scss
@@ -174,6 +174,15 @@ html, body {
     font-size: 12px;
   }
 
+  .toc-list-h3 {
+    background-color: $nav-subitem-bg;
+  }
+
+  .toc-h3 {
+    padding-left: $nav-padding + $nav-padding + $nav-indent;
+    font-size: 12px;
+  }
+
   .toc-footer {
     padding: 1em 0;
     margin-top: 1em;
@@ -341,7 +350,7 @@ html, body {
   }
 
   // the div is the tocify hidden div for placeholding stuff
-  &>h1, &>h2, &>div {
+  &>h1, &>h2, &>h3, &>div {
     clear:both;
   }
 
@@ -380,7 +389,7 @@ html, body {
     border-top: none;
   }
 
-  h3, h4, h5, h6 {
+  h4, h5, h6 {
     @extend %header-font;
     font-size: 15px;
     margin-top: 2.5em; 

The result is that only first H1 section displays all the levels, and all other H1 sections do no display either H2 or H3 in the toc.

So an index page like:

---
title: API Reference

language_tabs: # must be one of https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers
  - shell
  - http

search: true

code_clipboard: true

meta:
  - name: description
    content: Documentation for the API
---

# Introduction

## ABC

abc

## ZYZ

xyz

# Resources

## Bar

index

## Baz

### List

get all

### Create

create

would not show anything under Resources in the toc:

UPD: it looks like this is caused by the second H1 header not becoming "active" even when I click on it, and hence having ul element not visible, but I'm not entirely sure why that's happening

[serpro69]

I think I fixed it. Looks like I was missing something in the configs. I first just cloned the repo and tried to add deeper nesting, and once that worked, copied the files over to my own project.