Updated sidebat in synopsis page

- toggleable
- overlay content at narrow widths
- right of page
- background & border

doc/.gitignore

@@ -1,4 +1,5 @@
 synopsis/index.txt
+synopsis/index-t2t.html
 synopsis/index.html
 synopsis/api-examples-*.txt
 synopsis/api-examples.gfs

doc/synopsis/Makefile

@@ -29,10 +29,13 @@ index: index.html
 index.txt: MkSynopsis.hs MkExxTable.hs $(INCLUDES) $(EXAMPLES_OUT) $(SRC_FILES)
 	runghc -i$(ROOT) MkSynopsis.hs
 
-TITLE=$(shell head -n 1 index.txt)
-index.html: index.txt $(TEMPLATE)
+index-t2t.html: index.txt
 	txt2tags --target=html --no-headers --quiet --toc --outfile=$@ --infile=$<
 	sed -i.bak "s/<A NAME=\"\(.*\)\"><\/A>/<div id=\"\1\"><\/div>/" $@
+	rm "$@.bak"
+
+TITLE=$(shell head -n 1 index.txt)
+index.html: index-t2t.html $(TEMPLATE)
 	pandoc \
 		--from=html \
 		--to=html5 \
@@ -44,7 +47,7 @@ index.html: index.txt $(TEMPLATE)
 		--css="synopsis.css" \
 		--include-after-body="quicklinks.html" \
 		--output=$(TMP) \
-		$@
+		index-t2t.html
 	mv $(TMP) $@
 	sed -i.bak "s/<table>/<table class=\"table w-auto\">/" $@
 	sed -i.bak -e '/img src="categories.png"/r categories-imagemap.html' -e '/img src="categories.png"/d' $@

doc/synopsis/quicklinks.js

@@ -122,3 +122,47 @@ appendChildren(
     quicklinks()
   ]
 )
+
+/* -------------------------------------------------------------------------- */
+
+// Toggle quicklinks
+function toggleSidebar () {
+  var m = document.getElementById('main')
+  var q = document.getElementById('quicklinks')
+  var mClasses = 'col-md-9 col-xl-10'
+  var qClasses = 'col-4 col-md-3 col-xl-2 offset-8 offset-md-9 offset-xl-10'
+  if (hasClass(q, 'd-none')) {
+    // Show
+    addClass(m, mClasses)
+    addClass(q, qClasses)
+    removeClass(q, 'd-none')
+  } else {
+    // Hide
+    removeClass(m, mClasses)
+    removeClass(q, qClasses)
+    addClass(q, 'd-none')
+  }
+}
+document.getElementById('btn-quicklinks-toggle').addEventListener('click', toggleSidebar)
+if (window.innerWidth >= 768) {
+  // Below 768 (== 'md' breakpoint) sidebar overlays content and best left hidden
+  toggleSidebar()
+}
+
+/* -------------------------------------------------------------------------- */
+
+// Helpers
+
+// Won't work on IE9; use className and split
+function addClass (elem, classnames) {
+  for (var c of classnames.split(' ')) elem.classList.add(c)
+}
+function removeClass (elem, classnames) {
+  for (var c of classnames.split(' ')) elem.classList.remove(c)
+}
+// function toggleClass (elem, classnames) {
+//   for (var c of classnames.split(' ')) elem.classList.toggle(c)
+// }
+function hasClass (elem, classname) {
+  return elem.classList.contains(classname)
+}

doc/synopsis/template.html

@@ -35,15 +35,15 @@ $endfor$
 <div class="container-fluid">
 <div class="row">
 
-  <nav class="col-md-3 col-xl-2 d-none d-md-block sidebar pt-4" id="quicklinks">
-    <!-- filled dynamically via quicklinks.js -->
-  </nav>
+  <button class="btn btn-light m-1" id="btn-quicklinks-toggle" style="position: fixed; top: 0; right: 0; z-index: 10;">
+    <i class="fas fa-bars"></i>
+  </button>
 
-  <main role="main" class="col-md-9 col-xl-10 offset-md-3 offset-xl-2 pt-3">
+  <main role="main" class="col my-3" style="overflow-x: scroll" id="main">
 $if(title)$
     <header id="title-block-header">
       <a href="$rel-root$" title="Home">
-        <img src="$rel-root$/doc/Logos/gf1.svg" height="200px" class="float-md-right mb-3 bg-white" alt="GF Logo">
+        <img src="$rel-root$/doc/Logos/gf1.svg" height="200px" class="float-md-left mb-3 mr-3 bg-white" alt="GF Logo">
       </a>
       <h1 class="title">$title$</h1>
 $if(subtitle)$
@@ -64,6 +64,11 @@ $if(toc)$
 $endif$
     $body$
   </main>
+
+  <nav class="d-none sidebar py-3 border-left bg-light" id="quicklinks">
+    <!-- filled dynamically via quicklinks.js -->
+  </nav>
+
 </div><!-- .row -->
 </div><!-- .container-fluid -->