share style between api and docs sidemenu elements, make sidemenu element collapsable only with arrow click

Author: Filip Łukasik

scaladoc/resources/dotty_res/scripts/ux.js

@@ -10,20 +10,20 @@ window.addEventListener("DOMContentLoaded", () => {
   var elements = document.getElementsByClassName("documentableElement")
   if (elements) {
     for (i = 0; i < elements.length; i++) {
-      elements[i].onclick = function(e) {
-        if(!$(e.target).is("a") && e.fromSnippet !== true)
+      elements[i].onclick = function (e) {
+        if (!$(e.target).is("a") && e.fromSnippet !== true)
           this.classList.toggle("expand")
       }
     }
   }
 
-  $(".side-menu span").on('click', function(){
-    $(this).parent().toggleClass("expanded")
+  $(".ar").on('click', function () {
+    $(this).parent().parent().toggleClass("expanded")
   });
 
   document.querySelectorAll(".side-menu a").forEach(elem => elem.addEventListener('click', e => e.stopPropagation()))
 
-  $('.names .tab').on('click', function() {
+  $('.names .tab').on('click', function () {
     parent = $(this).parents(".tabs").first()
     shown = $(this).hasClass('selected')
     single = parent.hasClass("single")
@@ -35,7 +35,7 @@ window.addEventListener("DOMContentLoaded", () => {
     if (!shown) { myTab.addClass('selected') }
     if (shown && !single) myTab.removeClass('selected')
 
-    if(!shown && $(this).filter(".showGraph").length > 0) {
+    if (!shown && $(this).filter(".showGraph").length > 0) {
       showGraph()
       $(this).find(".showGraph").removeClass("showGraph")
     }
@@ -55,7 +55,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
   var logo = document.getElementById("logo");
   if (logo) {
-    logo.onclick = function() {
+    logo.onclick = function () {
       window.location = pathToRoot; // global variable pathToRoot is created by the html renderer
     };
   }
@@ -97,7 +97,7 @@ var transform;
 function showGraph() {
   if ($("svg#graph").children().length == 0) {
     var dotNode = document.querySelector("#dot")
-    if (dotNode){
+    if (dotNode) {
       var svg = d3.select("#graph");
       var radialGradient = svg.append("defs").append("radialGradient").attr("id", "Gradient");
       radialGradient.append("stop").attr("stop-color", "var(--aureole)").attr("offset", "20%");
@@ -107,7 +107,7 @@ function showGraph() {
 
       // Set up zoom support
       zoom = d3.zoom()
-        .on("zoom", function({transform}) {
+        .on("zoom", function ({ transform }) {
           inner.attr("transform", transform);
         });
       svg.call(zoom);
@@ -129,7 +129,7 @@ function showGraph() {
       });
       g.setParent("node0", "node0Cluster");
 
-      g.edges().forEach(function(v) {
+      g.edges().forEach(function (v) {
         g.setEdge(v, {
           arrowhead: "vee"
         });
@@ -140,11 +140,11 @@ function showGraph() {
       var bounds = svg.node().getBBox();
       var parent = svg.node().parentElement;
       var fullWidth = parent.clientWidth || parent.parentNode.clientWidth,
-          fullHeight = parent.clientHeight || parent.parentNode.clientHeight;
+        fullHeight = parent.clientHeight || parent.parentNode.clientHeight;
       var width = bounds.width,
-          height = bounds.height;
+        height = bounds.height;
       var midX = bounds.x + width / 2,
-          midY = bounds.y + height / 2;
+        midY = bounds.y + height / 2;
       if (width == 0 || height == 0) return; // nothing to fit
       var scale = Math.min(fullWidth / width, fullHeight / height) * 0.99; // 0.99 to make a little padding
       var translate = [fullWidth / 2 - scale * midX, fullHeight / 2 - scale * midY];

scaladoc/resources/dotty_res/styles/theme/components/navigation-item.css

@@ -1,5 +1,3 @@
-/* api */
-
 .side-menu .ni {
   display: none;
 }
@@ -33,47 +31,47 @@
   box-sizing: border-box;
 }
 
-#api-nav .n0 > .nh > .ar {
+.n0 > .nh > .ar {
   left: calc(1.5 * var(--base-spacing));
 }
 
-#api-nav .n0 > .nh > a {
+.n0 > .nh > a {
   left: calc(4.5 * var(--base-spacing));
   max-width: calc(23 * var(--base-spacing));
 }
 
-#api-nav .n1 > .nh > .ar {
+.n1 > .nh > .ar {
   left: calc(4.5 * var(--base-spacing));
 }
 
-#api-nav .n1 > .nh > a {
+.n1 > .nh > a {
   left: calc(7.5 * var(--base-spacing));
   max-width: calc(20 * var(--base-spacing));
 }
 
-#api-nav .n2 > .nh > .ar {
+.n2 > .nh > .ar {
   left: calc(7.5 * var(--base-spacing));
 }
 
-#api-nav .n2 > .nh > a {
+.n2 > .nh > a {
   left: calc(10.5 * var(--base-spacing));
   max-width: calc(17 * var(--base-spacing));
 }
 
-#api-nav .n3 > .nh > .ar {
+.n3 > .nh > .ar {
   left: calc(10.5 * var(--base-spacing));
 }
 
-#api-nav .n3 > .nh > a {
+.n3 > .nh > a {
   left: calc(13.5 * var(--base-spacing));
   max-width: calc(14 * var(--base-spacing));
 }
 
-#api-nav .n4 > .nh > .ar {
+.n4 > .nh > .ar {
   left: calc(13.5 * var(--base-spacing));
 }
 
-#api-nav .n4 > .nh > a {
+.n4 > .nh > a {
   left: calc(16.5 * var(--base-spacing));
   max-width: calc(11 * var(--base-spacing));
 }
@@ -209,42 +207,15 @@ span.ar::before {
   color: transparent;
 }
 
-#api-nav span.ar {
+span.ar {
   cursor: pointer;
   position: absolute;
 }
 
-#api-nav .nh a {
+.nh a {
   position: relative;
 }
 
-/* docs */
-
-/* Hardcode visibility of children of top-level entry */
-#docs-nav .ni.n0 > .ni {
-  display: block;
-}
-
-#docs-nav .n0 > .nh {
-  padding-left: calc(1.5 * var(--base-spacing));
-}
-
-#docs-nav .n1 > .nh {
-  padding-left: calc(1.5 * var(--base-spacing));
-}
-
-#docs-nav .n2 > .nh {
-  padding-left: calc(6.5 * var(--base-spacing));
-}
-
-#docs-nav .n3 > .nh {
-  padding-left: calc(11.5 * var(--base-spacing));
-}
-
-#docs-nav span.ar {
-  margin-right: calc(1 * var(--base-spacing));
-}
-
 /* icons light*/
 .micon.cl {
   content: url("../../../images/class.svg");

scaladoc/resources/dotty_res/styles/theme/layout/leftMenu.css

@@ -4,7 +4,7 @@
   align-items: center;
   padding: calc(3 * var(--base-spacing)) 0px;
   position: absolute;
-  width: calc(35 * var(--base-spacing));
+  width: calc(39 * var(--base-spacing));
   height: calc(100% - var(--header-height));
   left: 0px;
   top: calc(8 * var(--base-spacing));

scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala

@@ -110,15 +110,12 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
       val isSelected = nav.link.dri == pageLink.dri
       val isTopElement = nestLevel == 0
 
-      val isTopLevelDocs = !isApi && isTopElement
-
       def linkHtml(expanded: Boolean = false, withArrow: Boolean = false) =
         val attrs: Seq[String] = Seq(
-          Option.when((isSelected || expanded) && !isTopLevelDocs)("h100"),
+          Option.when(isSelected || expanded)("h100"),
           Option.when(isSelected)("selected"),
-          Option.when(expanded || isTopLevelDocs)("expanded cs"),
+          Option.when(expanded)("expanded cs"),
           Option.when(!isApi)("de"),
-          Option.when(isTopLevelDocs)("h200")
         ).flatten
         val icon = nav.content match {
           case m: Member => navigationIcon(m)
@@ -137,9 +134,9 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
           val nested = children.map(renderNested(_, nestLevel + 1))
           val expanded = nested.exists(_._1)
           val attr =
-            if expanded || isSelected || isTopLevelDocs then Seq(cls := s"ni n$nestLevel expanded") else Seq(cls := s"ni n$nestLevel")
+            if expanded || isSelected then Seq(cls := s"ni n$nestLevel expanded") else Seq(cls := s"ni n$nestLevel")
           (isSelected || expanded) -> div(attr)(
-            linkHtml(expanded, !isTopLevelDocs),
+            linkHtml(expanded, true),
             nested.map(_._2)
           )