Side menu html update

Author: pikinier20

scaladoc/resources/dotty_res/scripts/ux.js

@@ -1,4 +1,28 @@
 window.addEventListener("DOMContentLoaded", () => {
+  var apiNav = document.getElementById("api-nav")
+  var docsNav = document.getElementById("docs-nav")
+
+  var apiNavButton = document.getElementById("api-nav-button")
+  var docsNavButton = document.getElementById("docs-nav-button")
+
+  apiNavButton.addEventListener('click', e => {
+    if (!apiNav.classList.contains('selected')) {
+      apiNav.classList.add('selected')
+      apiNavButton.classList.add('selected')
+      docsNav.classList.remove('selected')
+      docsNavButton.classList.remove('selected')
+    }
+  })
+
+  docsNavButton.addEventListener('click', e => {
+    if (!docsNav.classList.contains('selected')) {
+      docsNav.classList.add('selected')
+      docsNavButton.classList.add('selected')
+      apiNav.classList.remove('selected')
+      apiNavButton.classList.remove('selected')
+    }
+  })
+
   var toggler = document.getElementById("leftToggler");
   if (toggler) {
     toggler.onclick = function () {
@@ -16,7 +40,7 @@ window.addEventListener("DOMContentLoaded", () => {
     }
   }
 
-  $("#sideMenu2 span").on('click', function(){
+  $(".side-menu span").on('click', function(){
     $(this).parent().toggleClass("expanded")
   });
 
@@ -36,7 +60,7 @@ window.addEventListener("DOMContentLoaded", () => {
     observer.observe(section);
   });
 
-  document.querySelectorAll("#sideMenu2 a").forEach(elem => elem.addEventListener('click', e => e.stopPropagation()))
+  document.querySelectorAll(".side-menu a").forEach(elem => elem.addEventListener('click', e => e.stopPropagation()))
 
   $('.names .tab').on('click', function() {
     parent = $(this).parents(".tabs").first()

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

@@ -1,4 +1,4 @@
-#sideMenu2 {
+.side-menu {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
@@ -8,50 +8,54 @@
   box-sizing: border-box;
 }
 
+.side-menu:not(.selected) {
+  display: none;
+}
+
 /* divs in sidebar represent entry and its children */
-#sideMenu2 .ni {
+.side-menu .ni {
   padding-left: 0.8em;
 }
 
-#sideMenu2 > .ni {
+.side-menu > .ni {
   padding-left: 0em;
 }
 
-#sideMenu2 .ni {
+.side-menu .ni {
   display: none;
 }
 
-#sideMenu2 > .ni {
+.side-menu > .ni {
   display: block;
 }
 
-#sideMenu2 .nh a:only-child {
+.side-menu .nh a:only-child {
   padding-left: 20px;
 }
 
-#sideMenu2 .nh {
+.side-menu .nh {
   display: flex;
   flex-direction: row;
   align-items: center;
   border-radius: 3px;
 }
 
-#sideMenu2 .ni.expanded > .ni {
+.side-menu .ni.expanded > .ni {
   display: block;
 }
 
 /* show direct children of currently exmanded node*/
-#sideMenu2 div.expanded > div {
+.side-menu div.expanded > div {
   display: block;
 }
 
 /* always show top level entry*/
-#sideMenu2 > div {
+.side-menu > div {
   display: block;
 }
 
 /* 'a's in side menu represent text of entry with link */
-#sideMenu2 a {
+.side-menu a {
   display: flex;
   align-items: center;
   overflow-wrap: anywhere;
@@ -61,21 +65,21 @@
   box-sizing: border-box;
 }
 
-#sideMenu2 a:hover {
+.side-menu a:hover {
   color: var(--link-hover-fg);
 }
 
-#sideMenu2 a span:not(.micon) {
+.side-menu a span:not(.micon) {
   margin-right: 0.75ex;
   text-indent: -1.5em;
   padding-left: 1.5em;
 }
 
-#sideMenu2 a.selected span:not(.micon) {
+.side-menu a.selected span:not(.micon) {
   margin-right: 0.5ex;
 }
 
-#sideMenu2 .nh:hover {
+.side-menu .nh:hover {
   cursor: pointer;
 }
 /* spans represent a expand button */

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

@@ -99,19 +99,20 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
         case None => ""
     )
 
-  private def buildNavigation(pageLink: Link): AppliedTag =
+  private def buildNavigation(pageLink: Link): ((Boolean, AppliedTag), (Boolean, AppliedTag)) =
     def navigationIcon(member: Member) = member match {
       case m if m.needsOwnPage => Seq(span(cls := s"micon ${member.kind.name.take(2)}"))
       case _ => Nil
     }
 
-    def renderNested(nav: Page, toplevel: Boolean = false): (Boolean, AppliedTag) =
+    def renderNested(nav: Page, apiNav: Boolean, nestLevel: Int): (Boolean, AppliedTag) =
       val isSelected = nav.link.dri == pageLink.dri
 
       def linkHtml(expanded: Boolean = false, withArrow: Boolean = false) =
         val attrs: Seq[String] = Seq(
           Option.when(isSelected)("selected h100"),
-          Option.when(expanded)("expanded")
+          Option.when(expanded)("expanded cs"),
+          Option.when(!apiNav)("de")
         ).flatten
         val icon = nav.content match {
           case m: Member => navigationIcon(m)
@@ -124,19 +125,23 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
           )
         )
 
-      nav.children.filterNot(_.hidden) match
-        case Nil => isSelected -> div(cls := s"ni ${if isSelected then "expanded" else ""}")(linkHtml())
+      nav.children.filter(_.content.isInstanceOf[Member] == apiNav).filterNot(_.hidden) match
+        case Nil => isSelected -> div(cls := s"ni n$nestLevel ${if isSelected || nestLevel == 0 then "expanded" else ""}")(linkHtml())
         case children =>
-          val nested = children.map(renderNested(_))
+          val nested = children.map(renderNested(_, apiNav, nestLevel + 1))
           val expanded = nested.exists(_._1) || isSelected
           val attr =
-            if expanded || isSelected || toplevel then Seq(cls := "ni expanded") else Seq(cls := "ni body-small")
+            if expanded || isSelected || nestLevel == 0 then Seq(cls := s"ni n$nestLevel expanded") else Seq(cls := s"ni n$nestLevel body-small")
           (isSelected || expanded) -> div(attr)(
             linkHtml(expanded, true),
             nested.map(_._2)
           )
 
-    renderNested(navigablePage, toplevel = true)._2
+
+    val apiNav = renderNested(navigablePage, true, 0)
+    val docsNav = renderNested(navigablePage, false, 0)
+
+    (apiNav, docsNav)
 
   private def hasSocialLinks = !args.socialLinks.isEmpty
 
@@ -196,10 +201,6 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
           ),
       ),
       div(id := "leftColumn")(
-        div(cls:= "switcher-container")(
-          button(cls:= "switcher h100")(raw("Docs")),
-          button(cls:= "switcher h100")(raw("API")),
-        ),
         // div(id := "logo")(
         //   projectLogo,
         //   span(
@@ -220,9 +221,17 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
         //   )
         // ),
         // div(id := "paneSearch"),
-        nav(id := "sideMenu2")(
-          buildNavigation(link)
-        ),
+        buildNavigation(link) match {
+          case ((isApiActive, apiNav), (isDocsActive, docsNav)) =>
+            Seq(
+              div(cls:= "switcher-container")(
+                button(id := "docs-nav-button", cls:= s"switcher h100 ${if !isApiActive && isDocsActive then "selected" else ""}")(raw("Docs")),
+                button(id := "api-nav-button", cls:= s"switcher h100 ${if isApiActive then "selected" else ""}")(raw("API")),
+              ),
+              nav(id := "api-nav", cls := s"side-menu ${if isApiActive then "selected" else ""}")(apiNav),
+              nav(id := "docs-nav", cls := s"side-menu ${if !isApiActive && isDocsActive then "selected" else ""}")(docsNav)
+            )
+        },
       ),
       div(id := "main")(
         div (id := "leftToggler")(