mobile toc menu (#121)

* Implement TOC for mobile * Uses Page title as label * Label entries so that tapping TOC will hide menu * Switch to medium breakpoint * Correct tos -> toc * toc-menu-control -> toc-control
2020-01-13 08:44:24 -08:00
parent d6290dcf50
commit e037b7c70f
5 changed files with 29 additions and 16 deletions
@@ -7,6 +7,7 @@
 </head>

 <body>
+  <input type="checkbox" class="hidden" id="toc-control" />
  <input type="checkbox" class="hidden" id="menu-control" />
  <main class="flex container">

@@ -1,4 +1,4 @@
-<nav>
+<nav id="BookMenu">
 {{ partial "docs/brand" . }}
 {{ partial "docs/search" . }}
 {{ partial "docs/inject/menu-before" . }}
@@ -1,6 +1,8 @@
 <header class="flex align-center justify-between book-header">
-  <label for="menu-control">
+  <label id="menu-control" for="menu-control">
    <img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
  </label>
+  <label id="toc-control" for="toc-control">
  <strong>{{ partial "docs/title" . }}</strong>
+  </label>
 </header>
@@ -1,6 +1,10 @@
 {{ $tocLevels := default (default 6 .Site.Params.BookToC) .Params.BookToC }}
 {{ if and $tocLevels .Page.TableOfContents }}
  <aside class="book-toc levels-{{$tocLevels}} fixed">
-    {{ .Page.TableOfContents }}
+    {{ with .Page.TableOfContents }}
+    <label id="toc-control" for="toc-control">
+    {{ . }}
+    </label>
+    {{ end }}
  </aside>
 {{ end }}