Put the sidebar behind a menubar on smaller screens.

Author: ayosec

lib/ffdocs/view/release_renderer.rb

@@ -249,11 +249,15 @@ def emphasis(text)
 
       when "Other Vers."
         js = <<~JS
-          (function(e) {
-            e.open = true;
+          (function() {
+            const ov = document.querySelector(".other-versions");
+            const sidebar = document.querySelector("#sidebar-toggle-check");
 
-            requestAnimationFrame(() => e.scrollIntoView(true));
-          })(document.querySelector(".other-versions"));
+            sidebar.checked = true;
+            ov.open = true;
+
+            requestAnimationFrame(() => ov.scrollIntoView(true));
+          })();
 
           return false;
         JS

lib/ffdocs/view/styles/_layout.scss

@@ -21,6 +21,10 @@ body {
 header {
   grid-column: 1 / 3;
   grid-row: 1 / 2;
+
+  .sidebar-toggle, #sidebar-toggle-check {
+    display: none;
+  }
 }
 
 nav {
@@ -34,38 +38,84 @@ main {
 }
 
 @media screen and (max-width: 20cm) {
+  @supports selector(:has(a, b)) {
 
-  body {
-    grid-template-rows: auto 1fr auto;
-    grid-template-columns: auto;
-  }
+    body {
+      grid-template-rows: auto 1fr auto;
+      grid-template-columns: auto;
+    }
 
-  header {
-    grid-column: 1 / 2;
-    grid-row: 1 / 2;
-  }
+    header {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
 
-  nav {
-    grid-column: 1 / 2;
-    grid-row: 3 / 4;
-  }
+    nav, main {
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
+    }
 
-  main {
-    grid-column: 1 / 2;
-    grid-row: 2 / 3;
-  }
+    // Toggle sidebar
+    header .sidebar-toggle {
+      display: flex;
+    }
+
+    body:has(#sidebar-toggle-check:checked) {
+      nav { display: block; }
+      main { display: none; }
+    }
 
+    body:not(:has(#sidebar-toggle-check:checked)) {
+      main { display: block; }
+      nav { display: none; }
+    }
+
+  }
 }
 
 // Content.
 
 header {
+  $padding: 1ex;
+
   display: flex;
-  justify-content: space-between;
-  padding: 1ex;
+  padding: $padding;
+  align-items: center;
 
-  .links {
-    align-self: flex-end;
+  .title {
+    flex: 1;
+  }
+
+  // Sidebar toggle button.
+  .sidebar-toggle {
+    align-items: center;
+
+    padding-right: $padding;
+
+    label {
+      font-size: 0;
+      overflow: hidden;
+
+      &::after {
+        content: " ";
+
+        font-size: 1rem;
+        display: inline-block;
+
+        $size: calc(var(--base-font-size) * 1.4);
+        height: $size;
+        width: $size;
+
+        background-image: svg-file(menu);
+        background-size: 100%;
+        background-position: center center;
+        background-repeat: no-repeat;
+      }
+    }
+
+    &:has(input:checked) label::after {
+      filter: sepia(100%) hue-rotate(90deg) saturate(10) drop-shadow(0 0 3px var(--main-green));;
+    }
   }
 }
 

lib/ffdocs/view/svg/menu.svg

@@ -22,7 +22,12 @@
 
   %body
     %header
+      .sidebar-toggle
+        %input{type: "checkbox", id: "sidebar-toggle-check"}
+        %label{for: "sidebar-toggle-check"} Sidebar
+
       .title= "FFmpeg #{release ? release.version : ""}"
+
       .links
         != link_to_file :version_matrix, "Version Matrix"
         - if project_url