Hide other versions inside an accordion to reduce noise in the sidebar.

Author: ayosec

lib/ffdocs/view/styles/_colors.scss

@@ -76,7 +76,7 @@ nav {
   color: var(--nav-fg);
   border-right: 2px solid var(--main-green);
 
-  & > a {
+  .other-versions a {
     font-family: monospace;
 
     color: var(--main-green);
@@ -89,6 +89,11 @@ nav {
     }
   }
 
+  .version-label, .other-versions {
+    color: #fff;
+    background: rgba(0, 0, 0, 0.8);
+  }
+
   .current-version {
     background: var(--nav-current-version-bg);
     color: var(--nav-current-version-fg);

lib/ffdocs/view/styles/_layout.scss

@@ -75,39 +75,12 @@ nav {
     padding: 1ex;
   }
 
-  .current-version {
-    & > .version-label {
-      background: rgba(0, 0, 0, 0.8);
-    }
+  .other-versions summary {
+    padding-left: 1ex;
+  }
 
+  .current-version {
     details {
-      summary {
-        display: block;  // Remove icon.
-        cursor: pointer;
-        outline: 0;
-
-        padding: 0.5rem 0.5rem 0.5rem 1rem;
-        border-bottom: 1px solid $nav-summary-border-color;
-
-        &::after {
-          content: " ";
-
-          float: right;
-          display: inline-block;
-
-          margin-left: 1ch;
-          height: 1em;
-          width: 1em;
-
-          background-image: svg-file(arrow);
-          background-size: 1em;
-          background-position: center right;
-          background-repeat: no-repeat;
-
-          transition: transform 200ms ease-in;
-        }
-      }
-
       a, b {
         &:not(.hidden) {
           display: block;
@@ -147,11 +120,6 @@ nav {
       }
     }
 
-    details[open] > summary::after {
-      // Flip icon in <summary> when <details> is open.
-      transform: scale(1, -1);
-    }
-
     & > details {
       clear: both;
 
@@ -177,6 +145,41 @@ nav {
   .hidden {
     display: none;
   }
+
+  details {
+    summary {
+      display: block;  // Remove icon.
+      cursor: pointer;
+      outline: 0;
+
+      padding: 0.5rem 0.5rem 0.5rem 1rem;
+      border-bottom: 1px solid $nav-summary-border-color;
+
+      &::after {
+        content: " ";
+
+        float: right;
+        display: inline-block;
+
+        margin-left: 1ch;
+        height: 1em;
+        width: 1em;
+
+        background-image: svg-file(arrow);
+        background-size: 1em;
+        background-position: center right;
+        background-repeat: no-repeat;
+
+        transition: transform 200ms ease-in;
+      }
+    }
+
+    &[open] > summary::after {
+      // Flip icon in <summary> when <details> is open.
+      transform: scale(1, -1);
+    }
+  }
+
 }
 
 main {

lib/ffdocs/view/templates/_layout.haml

@@ -57,9 +57,12 @@
                     %label.show-all-label{for: show_all_id} Show All
                     %input.show-all{id: show_all_id, type: "checkbox"}
 
-      - releases.each do |it_release|
-        - if release != it_release
-          != link_to_file versioned_target(it_release, item), it_release.version, class: "version"
+      - if releases.size > 1
+        %details.other-versions
+          %summary Other
+          - releases.each do |it_release|
+            - if release != it_release
+              != link_to_file versioned_target(it_release, item), it_release.version, class: "version"
 
     %main{class: main_class}
       != main_body