add table of content compoenent

Author: fanixus96

docs/_layouts/static-site-main.html

@@ -2,7 +2,7 @@
 layout: main
 ---
 
-<div class="container">
+<div class="site-container">
   <div id="site-header"></div>
   {% if page.movedTo %}
   <aside class="warning">

scaladoc/resources/dotty_res/styles/scalastyle.css

@@ -929,7 +929,7 @@ footer .socials {
   height: 8px;
 }
 
-#toc {
+/* #toc {
   display: inline;
   position: fixed;
   right: 0px;
@@ -968,7 +968,7 @@ footer .socials {
 
 #toc li.active > a {
   color: var(--link-hover-fg);
-}
+} */
 
 /* Signature coloring */
 

scaladoc/resources/dotty_res/styles/theme/components/table-of-content.css

@@ -0,0 +1,59 @@
+#toc {
+  display: flex;
+  flex-direction: column;
+  margin-top: calc(18.75 * var(--base-spacing));
+  margin-right: calc(36.75 * var(--base-spacing));
+}
+
+#toc ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+#toc li {
+  margin-bottom: calc(2.5 * var(--base-spacing));
+}
+
+@media(max-width: 1366px) {
+  #toc {
+    margin-right: calc(6 * var(--base-spacing));
+  }
+}
+
+@media(max-width: 1366px) {
+  #toc {
+    margin-right: calc(6 * var(--base-spacing));
+  }
+}
+
+@media(max-width: 768px) {
+  #toc {
+    display: none;
+  }
+}
+
+.toc-title {
+  color: var(--text-primary);
+  margin-bottom: calc(2 * var(--base-spacing));
+}
+
+.toc-nav a{
+  color: var(--action-primary-content-default);
+  text-decoration: none;
+}
+
+#toc li:hover > a {
+  color: var(--action-primary-content-hover);
+}
+
+#toc li:active > a {
+  color: var(--action-primary-content-hover);
+}
+
+#toc li.selected > a {
+  color: var(--action-primary-content-selected);
+}
+
+#toc li:focus-visible {
+  box-shadow: 0px 0px 0px 2px var(--focus-default);
+}

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

@@ -2,13 +2,36 @@
   height: 100%;
   width: calc(100% - calc(39 * var(--base-spacing)));
   float: right;
-  overflow: scroll;
   margin-top: var(--header-height);
   display: flex;
+  margin-left: calc(36.75 * var(--base-spacing));
 }
 
 #content-wrapper {
+  margin-left: calc(36,75 * var(--base-spacing));
+  margin-right: calc(9.5 * var(--base-spacing));
+  overflow: scroll;
+}
+
+@media(max-width: 1365px) {
+  #content-wrapper {
+    margin-left: calc(6 * var(--base-spacing));
+    margin-right: calc(7 * var(--base-spacing));
+  }
+}
+
+@media(max-width: 768px) {
+  #content-wrapper {
+    margin-right: calc(6 * var(--base-spacing));
+  }
+}
+
 
+@media(max-width: 390px) {
+  #content-wrapper {
+    margin-left: calc(4 * var(--base-spacing));
+    margin-right: calc(4 * var(--base-spacing));
+  }
 }
 
 #content h1 {

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

@@ -5,7 +5,7 @@
   padding: calc(3 * var(--base-spacing)) 0px;
   position: absolute;
   width: calc(39 * var(--base-spacing));
-  height: calc(100% - var(--header-height) - (6 * var(--base-spacing)));
+  height: calc(100% - (8 * var(--base-spacing)) - (6 * var(--base-spacing)));
   left: 0px;
   top: calc(8 * var(--base-spacing));
   background: var(--background-default);
@@ -17,7 +17,7 @@
 
 @media (max-width: 480px) {
   #leftColumn {
-    height: calc(100% - var(--header-height) - (9 * var(--base-spacing)));
+    height: calc(100% - (8 * var(--base-spacing)) - (9 * var(--base-spacing)));
   }
 }
 
@@ -33,7 +33,7 @@
 
 @media (max-width: 390px) {
   #leftColumn {
-    height: calc(100% - var(--header-height));
+    height: calc(100% - (8 * var(--base-spacing)));
     width: 100%;
     left: -100%;
     z-index: 1;

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

@@ -1,5 +1,5 @@
 .side-menu {
-  overflow-y: auto;
+  overflow-y: scroll;
   overflow-x: hidden;
   width: 100%;
   height: calc(100% - calc(11 * var(--base-spacing)));

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

@@ -328,8 +328,8 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
         div(id := "content")(
           content.content,
           renderTableOfContents(content.toc).fold(Nil) { toc =>
-            div(id := "toc")(
-            span(cls := "toc-title")("In this article"),
+            div(id := "toc", cls:="body-small")(
+            span(cls := "toc-title h200")("In this article"),
             toc
           )
           }

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

@@ -120,6 +120,7 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       "styles/theme/components/button/text-button.css",
       "styles/theme/components/dropdown-menu.css",
       "styles/theme/components/divider.css",
+      "styles/theme/components/table-of-content.css",
 
       "styles/nord-light.css",
       "styles/dotty-icons.css",