Generalize table of contents for dottydoc

2 files changed, 10 insertions, 51 deletions

diff --git a/doc-tool/resources/_includes/toc.html b/doc-tool/resources/_includes/toc.html
index 0ff3f9586..15952ef78 100644
--- a/doc-tool/resources/_includes/toc.html
+++ b/doc-tool/resources/_includes/toc.html
@@ -1,55 +1,11 @@
-{% assign parent = page.path | first %}
 <ul class="toc">
     <li class="logo-li">
         <a id="home-button" href="{{ site.baseurl }}/index.html">
             {% include "scala-logo.svg" %}
         </a>
     </li>
-    <li>
-        <a href="{{ site.baseurl }}/blog/index.html">Blog</a>
-    </li>
-    <li class="toc-title">
-        <a href="{{ site.baseurl }}/docs/index.html">Docs</a>
-    </li>
-    <li>
-        <a class="toggle-children" onclick="tocToggleChild('usage')">Usage</a>
-        <ul id="usage" class="{% if parent == "usage" %} show {% else %} hide {% endif %}">
-            <li><a href="{{ site.baseurl }}/docs/usage/cbt-projects.html">cbt-projects</a></li>
-            <li><a href="{{ site.baseurl }}/docs/usage/sbt-projects.html">sbt-projects</a></li>
-            <li><a href="{{ site.baseurl }}/docs/usage/migrating.html">migrating</a></li>
-        </ul>
-    </li>
-    <li>
-        <a class="toggle-children" onclick="tocToggleChild('contributing')">Contributing</a>
-        <ul id="contributing" class="{% if parent == "contributing" %} show {% else %} hide {% endif %}">
-            <li><a href="{{ site.baseurl }}/docs/contributing/eclipse.html">Eclipse</a></li>
-            <li><a href="{{ site.baseurl }}/docs/contributing/getting-started.html">Getting Started</a></li>
-            <li><a href="{{ site.baseurl }}/docs/contributing/intellij-idea.html">IntelliJ IDEA</a></li>
-            <li><a href="{{ site.baseurl }}/docs/contributing/workflow.html">Workflow</a></li>
-        </ul>
-    </li>
-    <li>
-        <a class="toggle-children" onclick="tocToggleChild('internals')">Internals</a>
-        <ul id="internals" class="{% if parent == "internals" %} show {% else %} hide {% endif %}">
-            <li><a href="{{ site.baseurl }}/docs/internals/backend.html">Backend</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/benchmarks.html">Benchmarks</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/classpaths.html">Classpaths</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/core-data-structures.html">Core Data Structures</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/contexts.html">Contexts</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/dotc-scalac.html">Dotc vs Scalac</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/higher-kinded-v2.html">Higher-Kinded Types</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/overall-structure.html">Overall Structure</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/periods.html">Periods</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/syntax.html">Syntax</a></li>
-            <li><a href="{{ site.baseurl }}/docs/internals/type-system.html">Type System</a></li>
-        </ul>
-    </li>
+    {% assign parent = page.path | first %}
+    {% for title in sidebar %}
+    <li>{% renderTitle title, parent %}</li>
+    {% endfor %}
 </ul>
-
-<script>
-function tocToggleChild(c) {
-    var child = document.getElementById(c);
-    child.classList.toggle("show");
-    child.classList.toggle("hide");
-}
-</script>
diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index bb0d6506b..aa197de07 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -85,7 +85,7 @@ ul.toc > li > a#home-button svg g#logo-background {
     fill: rgba(202, 68, 94, 0.45);
 }
 
-ul.toc > li > a.toggle-children {
+ul.toc > li > a {
     width: 100%;
     user-select: none;
 }
@@ -182,13 +182,16 @@ ul.index-entities > li.index-title > span {
     padding: 0 24px;
 }
 
+ul.index-entities > li.index-title:hover {
+    background-color: transparent;
+}
+
 li.index-entity > a:focus {
     text-decoration: none;
 }
 
 ul.index-entities > li:hover,
-ul.toc > li.toc-title:hover,
-ul.toc > li > a.toggle-children:hover {
+ul.toc > li > a:hover {
     background-color: rgba(0, 0, 0, 0.2);
 }