TEST: move table of contents into the header

Author: dscho

assets/sass/reference.scss

@@ -111,6 +111,19 @@ h3.plumbing {
     &#reference-languages-trigger {
       float: right;
     }
+
+    // Ensure the TOC trigger floats right like topics/languages
+    &#reference-toc-trigger {
+      float: right;
+    }
+  }
+
+  // Place the "last updated" span inline next to the left-floating versions trigger
+  > span.light {
+    display: inline-block;
+    clear: none;
+    margin-left: 6px;
+    vertical-align: middle;
   }
 }
 
@@ -213,6 +226,28 @@ h3.plumbing {
   }
 }
 
+// Position the Table of Contents dropdown under the right-floated TOC trigger
+#toc-dropdown {
+  width: 300px;
+  right: 12px;
+  padding: 12px;
+  font-weight: normal;
+  line-height: 1;
+
+  ul {
+    margin: 0;
+  }
+
+  li {
+    line-height: $base-line-height * 0.8;
+  }
+
+  a {
+    font-weight: normal;
+    padding: 0;
+  }
+}
+
 ol.reference-previous-versions {
   @extend .unstyled !optional;
   margin-top: 3px;

layouts/_default/baseof.html

@@ -123,6 +123,7 @@ <h1>{{ .Params.book.section.cs_number }} {{ .Params.book.chapter.title }} - {{ .
           <div id='reference-version'>
             {{ partial "ref/languages.html" . }}
             {{ partial "ref/topics.html" . }}
+            {{ partial "ref/toc.html" . }}
             {{ partial "ref/versions.html" . }}
           </div>
 

layouts/partials/ref/toc.html

@@ -0,0 +1,13 @@
+{{ $headings := .Params.headings }}
+{{ if $headings }}
+<a class="dropdown-trigger" id="reference-toc-trigger" data-panel-id="toc-dropdown" href="#">Table of Contents ▾</a>
+<div class='dropdown-panel right' id='toc-dropdown'>
+  <div>
+    <ul class="toc">
+      {{ range $i, $item := $headings }}
+        <li><a href="#{{ .id }}">{{ .text }}</a></li>
+      {{ end }}
+    </ul>
+  </div>
+</div>
+{{ end }}

layouts/partials/sidebar.html

@@ -50,19 +50,6 @@
       </li>
     </ul>
 
-    {{ $headings := .Params.headings }}
-    {{ if $headings }}
-    <ul>
-      <li> Table of Contents
-        <ul class="expanded">
-          {{ range $i, $item := $headings }}
-            <li><a href="#{{ .id }}">{{ .text }}</a> </li>
-          {{ end }}
-        </ul>
-      </li>
-    </ul>
-    {{ end }}
-
     {{ if (eq .Params.Sidebar "book") }}
       <hr class="sidebar">
       {{- /* If this page displays a section of the ProGit book, map all the translations thereof */ -}}