add dropdown links

Author: Filip Łukasik

docs/_layouts/static-site-main.html

@@ -1,50 +1,34 @@
 ---
 layout: main
 ---
+
 <div class="container">
-  <div id="site-header">
-    <div class="wrap">
-      <nav class="navigation" role="menu">
-        <ul class="navigation-menu">
-          <li class="navigation-menu-item">
-            <a href="https://docs.scala-lang.org/" class="active">Learn</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://www.scala-lang.org/download/">Install</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://scastie.scala-lang.org">Playground</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://index.scala-lang.org">Find A Library</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://www.scala-lang.org/community/">Community</a>
-          </li>
-          <li class="navigation-menu-item">
-            <a href="https://www.scala-lang.org/blog/">Blog</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
+  <div id="site-header"></div>
   {% if page.movedTo %}
   <aside class="warning">
-    The content of this page is outdated. Click <a href="{{ page.movedTo }}">here</a> to find the up to date version of this page.
+    The content of this page is outdated. Click
+    <a href="{{ page.movedTo }}">here</a> to find the up to date version of this
+    page.
   </aside>
-  {% endif %}
-  {{ content }}
+  {% endif %} {{ content }}
   <nav class="arrows-wrapper" aria-label="Page navigation">
     {% if page.previous %}
-    <a rel="prev" href="{{ page.previous.url }}" class="arrows previous" aria-keyshortcuts="Left">
-        <span>{{ page.previous.title }}</span>
-        <i class="fa fa-angle-left"></i>
+    <a
+      rel="prev"
+      href="{{ page.previous }}"
+      class="arrows previous"
+      aria-keyshortcuts="Left"
+    >
+      <i class="fa fa-angle-left"></i>
     </a>
-    {% endif %}
-    {% if page.next %}
-    <a rel="next" href="{{ page.next.url }}" class="arrows next" aria-keyshortcuts="Right">
-        <span>{{ page.next.title }}</span>
-        <i class="fa fa-angle-right"></i>
+    {% endif %} {% if page.next %}
+    <a
+      rel="next"
+      href="{{ page.next }}"
+      class="arrows next"
+      aria-keyshortcuts="Right"
+    >
+      <i class="fa fa-angle-right"></i>
     </a>
     {% endif %}
   </nav>

scaladoc/resources/dotty_res/scripts/ux.js

@@ -10,14 +10,19 @@ 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(){
+  $(".icon-button.hamburger").on('click', function () {
+    $("#hamburger-dropdown").toggleClass("expanded")
+    $(this).toggleClass("selected")
+  });
+
+  $(".side-menu span").on('click', function () {
     $(this).parent().toggleClass("expanded")
   });
 
@@ -39,7 +44,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
   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")
@@ -51,7 +56,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")
     }
@@ -71,7 +76,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
     };
   }
@@ -136,7 +141,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%");
@@ -146,7 +151,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);
@@ -168,7 +173,7 @@ function showGraph() {
       });
       g.setParent("node0", "node0Cluster");
 
-      g.edges().forEach(function(v) {
+      g.edges().forEach(function (v) {
         g.setEdge(v, {
           arrowhead: "vee"
         });
@@ -179,11 +184,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/color-tokens.css

@@ -84,6 +84,9 @@
 
   /* effects */
   --focus-default: var(--indigo11);
+  --shadow-first: var(--shadow1);
+  --shadow-second: var(--shadow2);
+  --shadow-inset: var(--grey7);
 }
 
 :root.theme-dark {
@@ -171,4 +174,7 @@
 
   /* effects */
   --focus-default: var(--indigo9);
+  --shadow-first: var(--shadow1);
+  --shadow-second: var(--shadow2);
+  --shadow-inset: var(--grey7);
 }