Make the reference tables of contents collapsible (#320)

data/documentation.yml

@@ -0,0 +1,63 @@
+toc:
+- Syntax: /documentation/syntax
+  :children:
+  - Parsing a Stylesheet: /documentation/syntax/parsing
+  - Structure of a Stylesheet: /documentation/syntax/structure
+  - Comments: /documentation/syntax/comments
+  - Special Functions: /documentation/syntax/special-functions
+- Style Rules: /documentation/style-rules
+  :children:
+  - Property Declarations: /documentation/style-rules/declarations
+  - Parent Selector: /documentation/style-rules/parent-selector
+  - Placeholder Selectors: /documentation/style-rules/placeholder-selectors
+- Variables: /documentation/variables
+- Interpolation: /documentation/interpolation
+- At-Rules: /documentation/at-rules
+  :children:
+  - <code>@import</code>: /documentation/at-rules/import
+  - <code>@mixin</code> and <code>@include</code>: /documentation/at-rules/mixin
+  - <code>@function</code>: /documentation/at-rules/function
+  - <code>@extend</code>: /documentation/at-rules/extend
+  - <code>@error</code>: /documentation/at-rules/error
+  - <code>@warn</code>: /documentation/at-rules/warn
+  - <code>@debug</code>: /documentation/at-rules/debug
+  - <code>@at-root</code>: /documentation/at-rules/at-root
+  - Flow Control: /documentation/at-rules/control
+    :children:
+    - <code>@if</code> and <code>@else</code>: /documentation/at-rules/control/if
+    - <code>@each</code>: /documentation/at-rules/control/each
+    - <code>@for</code>: /documentation/at-rules/control/for
+    - <code>@while</code>: /documentation/at-rules/control/while
+  - From CSS: /documentation/at-rules/css
+- Values: /documentation/values
+  :children:
+  - Numbers: /documentation/values/numbers
+  - Strings: /documentation/values/strings
+  - Colors: /documentation/values/colors
+  - Lists: /documentation/values/lists
+  - Maps: /documentation/values/maps
+  - <code>true</code> and <code>false</code>: /documentation/values/booleans
+  - <code>null</code>: /documentation/values/null
+  - Functions: /documentation/values/functions
+- Operators: /documentation/operators
+  :children:
+  - Equality: /documentation/operators/equality
+  - Relational: /documentation/operators/relational
+  - Numeric: /documentation/operators/numeric
+  - String: /documentation/operators/string
+  - Boolean: /documentation/operators/boolean
+- Built-In Functions: /documentation/functions
+  :children:
+  - Plain CSS: /documentation/functions/css
+  - Numbers: /documentation/functions/math
+  - Strings: /documentation/functions/string
+  - Colors: /documentation/functions/color
+  - Lists: /documentation/functions/list
+  - Maps: /documentation/functions/map
+  - Selectors: /documentation/functions/selector
+  - Introspection: /documentation/functions/meta
+- Command Line: /documentation/cli
+  :children:
+  - Dart Sass: /documentation/cli/dart-sass
+  - Ruby Sass: /documentation/cli/ruby-sass
+- JavaScript API: /documentation/js-api

helpers/sass_helpers.rb

@@ -51,6 +51,24 @@ module SassHelpers
     pages.flatten
   end
 
+  def documentation_toc
+    _toc_level(data.documentation.toc)
+  end
+
+  def _toc_level(links)
+    content_tag(:ul, links.map do |link|
+      children = link[:children]
+      text = link.keys.reject {|k| k == :children}.first
+      href = link[text]
+
+      content_tag(:li, [
+        content_tag(:a, text, href: href,
+          class: ("open selected" if current_page.url.start_with?(href))),
+        (_toc_level(children) if children)
+      ].compact)
+    end)
+  end
+
   # Renders a code example.
   #
   # This takes a block of SCSS and/or indented syntax code, and emits HTML that

source/assets/css/components/_lists.scss

@@ -37,7 +37,50 @@
       line-height: 1.25;
     }
 
-    ul ul { margin: 0 0 0 1rem; }
+    &--collapsible {
+      ul ul a { padding-left: 1rem; }
+      ul ul ul a { padding-left: 2rem; }
+      ul ul ul ul a { padding-left: 3rem; }
+
+      a {
+        border: none;
+        cursor: pointer;
+        display: block;
+        margin: -0.5rem 0;
+        padding: 0.3rem;
+        width: 100%;
+
+        &:hover { background-color: $sl-color--dawn-pink; }
+        &.overview {
+          font-size: $sl-font-size--small;
+          &:not(.selected) { color: transparentize($sl-color--midnight-blue, 0.5); }
+        }
+      }
+
+      li a {
+        &:not([href]) {
+          &::after {
+            content: "▶";
+            float: right;
+            font-size: 0.5em;
+            text-align: center;
+            margin-top: 5px;
+            transition: transform 0.1s;
+            width: 19px;
+          }
+
+          &.open::after { transform: rotate(90deg); }
+
+          + ul { display: none; }
+          &.open + ul { display: block; }
+        }
+
+        &.selected {
+          font-weight: bold;
+          &[href] { background-color: $sl-color--dawn-pink; }
+        }
+      }
+    }
   }
 }
 

source/assets/js/sass.js

@@ -112,3 +112,21 @@ $(function() {
     });
   });
 });
+
+$(function() {
+  $(".sl-c-list-navigation-wrapper--collapsible li > ul")
+      .parent().children("a").each(function() {
+    var overview = $('<li><a class="overview">Overview</a></li>\n');
+    var link = overview.children().first().attr("href", $(this).attr("href"));
+
+    if ($(this).hasClass("selected") &&
+        link[0].pathname == window.location.pathname) {
+      link.addClass("selected");
+    }
+
+    $(this).parent().children("ul").prepend(overview);
+    $(this).removeAttr("href");
+  }).click(function() {
+    $(this).toggleClass("open");
+  });
+});

source/layouts/components/_reference_table_of_contents.haml

@@ -1,59 +1,4 @@
 %h3 Contents
 
-%nav.table-of-contents.sl-c-list-navigation-wrapper
-  :markdown
-    * [Reference](/documentation)
-      * [Syntax](/documentation/syntax)
-          * [Parsing a Stylesheet](/documentation/syntax/parsing)
-          * [Structure of a Stylesheet](/documentation/syntax/structure)
-          * [Comments](/documentation/syntax/comments)
-          * [Special Functions](/documentation/syntax/special-functions)
-      * [Style Rules](/documentation/style-rules)
-          * [Property Declarations](/documentation/style-rules/declarations)
-          * [Parent Selector](/documentation/style-rules/parent-selector)
-          * [Placeholder Selectors](/documentation/style-rules/placeholder-selectors)
-      * [Variables](/documentation/variables)
-      * [Interpolation](/documentation/interpolation)
-      * [At-Rules](/documentation/at-rules)
-          * [`@import`](/documentation/at-rules/import)
-          * [`@mixin` and `@include`](/documentation/at-rules/mixin)
-          * [`@function`](/documentation/at-rules/function)
-          * [`@extend`](/documentation/at-rules/extend)
-          * [`@error`](/documentation/at-rules/error)
-          * [`@warn`](/documentation/at-rules/warn)
-          * [`@debug`](/documentation/at-rules/debug)
-          * [`@at-root`](/documentation/at-rules/at-root)
-          * [Flow Control](/documentation/at-rules/control)
-              * [`@if` and `@else`](/documentation/at-rules/control/if)
-              * [`@each`](/documentation/at-rules/control/each)
-              * [`@for`](/documentation/at-rules/control/for)
-              * [`@while`](/documentation/at-rules/control/while)
-          * [From CSS](/documentation/at-rules/css)
-      * [Values](/documentation/values)
-          * [Numbers](/documentation/values/numbers)
-          * [Strings](/documentation/values/strings)
-          * [Colors](/documentation/values/colors)
-          * [Lists](/documentation/values/lists)
-          * [Maps](/documentation/values/maps)
-          * [`true` and `false`](/documentation/values/booleans)
-          * [`null`](/documentation/values/null)
-          * [Functions](/documentation/values/functions)
-      * [Operators](/documentation/operators)
-          * [Equality](/documentation/operators/equality)
-          * [Relational](/documentation/operators/relational)
-          * [Numeric](/documentation/operators/numeric)
-          * [String](/documentation/operators/string)
-          * [Boolean](/documentation/operators/boolean)
-      * [Built-In Functions](/documentation/functions)
-          * [Plain CSS](/documentation/functions/css)
-          * [Numbers](/documentation/functions/math)
-          * [Strings](/documentation/functions/string)
-          * [Colors](/documentation/functions/color)
-          * [Lists](/documentation/functions/list)
-          * [Maps](/documentation/functions/map)
-          * [Selectors](/documentation/functions/selector)
-          * [Introspection](/documentation/functions/meta)
-      * [Command-Line Interface](/documentation/cli)
-          * [Dart Sass](/documentation/cli/dart-sass)
-          * [Ruby Sass](/documentation/cli/ruby-sass)
-      * [JavaScript API](/documentation/js-api)
+%nav.sl-c-list-navigation-wrapper.sl-c-list-navigation-wrapper--collapsible
+  = documentation_toc

source/layouts/section_reference.haml

@@ -8,5 +8,5 @@
     - content_for :complementary do
       %h3 Page Sections
 
-      %nav.sl-c-list-navigation-wrapper
+      %nav.sl-c-list-navigation-wrapper.sl-c-list-navigation-wrapper--collapsible
         = current_page.metadata[:table_of_contents]