Styling Fix (#168)

* fix logic issue

* add TOC active styling

* apply copilot feedback

* feedback

Author: 0xlukem

material-overrides/assets/stylesheets/polkadot.css

@@ -1199,12 +1199,22 @@ input.md-search__input::placeholder {
     color: var(--nav-fg-color);
     font-size: 16px;
   }
+
+  .md-nav--secondary .md-nav__link--active {
+    background: var(--nav-hover-bg-color);
+    border-radius: 6px;
+  }
 }
 
 @media screen and (min-width: 76.25em) {
   .md-nav--secondary .md-nav__link {
     margin-top: 0;
   }
+
+  .md-nav--secondary .md-nav__link--active {
+    margin-left: -0.7em;
+    padding-left: 0.7em;
+  }
 }
 
 /** Nav styling on smaller screens **/

material-overrides/partials/nav-item.html

@@ -34,6 +34,12 @@
           {% endif %}
         {% endfor %}
       {% endif %}
+      {% set visible_children = [] %}
+      {% for nav_item in nav_item.children %}
+        {% if not indexes or nav_item != indexes | first %}
+          {% set _ = visible_children.append({ 'idx': loop.index, 'node': nav_item }) %}
+        {% endif %}
+      {% endfor %}
       {% if not indexes %}
         <label class="md-nav__link" for="{{ path }}" id="{{ path }}_label" tabindex="0">
           {{ render_title_with_icon(nav_item.title, "twemoji nav-title") | safe }}
@@ -54,25 +60,28 @@
           {% endif %}
         </div>
       {% endif %}
-      <nav class="md-nav" data-md-level="{{ level }}" aria-labelledby="{{ path }}_label" aria-expanded="{{ nav_item.active | tojson }}">
-        <label class="md-nav__title" for="{{ path }}">
-          <span class="md-nav__icon md-icon"></span>
-          {{nav_item.title}}
-        </label>
-        <div class="nav-wrapper">
-          {% if page %}
-            {% if indexes[0] %}
-              <ul class="md-nav__list {{ indexes[0].url.replace('/', '-') }}" data-md-scrollfix>
-            {% endif %}
-          {% endif %}
-          {% for nav_item in nav_item.children %}
-            {% if not indexes or nav_item != indexes | first %}
-              {{ render(nav_item, path ~ "_" ~ loop.index, level + 1) }}
-            {% endif %}
-          {% endfor %}
-          </ul>
-        </div>
-      </nav>
+
+      {% if visible_children | length > 0 %}
+        <nav class="md-nav"
+             data-md-level="{{ level }}"
+             aria-labelledby="{{ path }}_label"
+             aria-expanded="{{ nav_item.active | tojson }}">
+
+          <label class="md-nav__title" for="{{ path }}">
+            <span class="md-nav__icon md-icon"></span>
+            {{ nav_item.title }}
+          </label>
+
+          {% set indexes_class = indexes[0].url.replace('/', '-') if indexes and indexes[0] else '' %}
+          <div class="nav-wrapper">
+            <ul class="md-nav__list {{ indexes_class }}" data-md-scrollfix>
+              {% for it in visible_children %}
+                {{ render(it.node, path ~ "_" ~ it.idx, level + 1) }}
+              {% endfor %}
+            </ul>
+          </div>
+        </nav>
+      {% endif %}
     </li>
   {% elif nav_item == page %}
     <li class="{{ class }}">