Added menu button which toggles TOC for small screens

src/client/js/app-view.js

@@ -30,6 +30,10 @@
         headingsOffset = 80,
         headings;
 
+    document.getElementById('button-menu').addEventListener('click', function() {
+      document.body.classList.toggle('is-toc-visible');
+    });
+
     // tocbot needs ID attributes at the headings in order to function
     headings = document.getElementById('content').querySelectorAll(headingSelector);
     Array.prototype.forEach.call(headings, function (headingElem) {

src/server/i18n/de.php

@@ -11,6 +11,7 @@ $i18n = array(
     'button.cancel' => 'Abbrechen',
     'button.back' => 'Zurück',
     'button.edit' => 'Bearbeiten',
+    'button.menu' => 'Menü',
     'button.createUser' => 'Benutzer erstellen',
     'button.createArticle' => 'Artikel anlegen',
     'demoAlert.title' => 'Dies ist eine Demo.',

src/server/i18n/en.php

@@ -11,6 +11,7 @@ $i18n = array(
     'button.cancel' => 'Cancel',
     'button.back' => 'Back',
     'button.edit' => 'Edit',
+    'button.menu' => 'Menu',
     'button.createUser' => 'Create user',
     'button.createArticle' => 'Create article',
     'demoAlert.title' => 'This is a demo.',

src/server/theme/slim/less/_layout.less

@@ -53,14 +53,27 @@
   .mode-edit & {
     width: 50%;
   }
+
+  #button-menu {
+    display: none;
+
+    .is-toc-enabled & {
+      @media (max-width: @screen-size-small-max) {
+        display: block;
+      }
+    }
+  }
 }
 
 .toc-wrapper {
   position: fixed;
+  top: 0;
   left: 50%;
-  right: 10px;
-  top: 70px;
+  right: 0;
+  height: 100%;
+  padding: 70px 10px 0 0;
   margin-left: @contentMaxWidth / 2 + @tocMarginLeft;
+  background-color: rgba(255, 255, 255, 0.9);
 
   .mode-edit & {
     display: none;
@@ -75,7 +88,15 @@
     margin-left: 0;
   }
   @media (max-width: @screen-size-small-max) {
-    display: none;
+    transform: translateX(100%);
+    left: auto;
+    width: @tocMinWidth;
+    bottom: 0;
+    transition: all 300ms ease-in-out;
+
+    .is-toc-visible & {
+      transform: translateX(0);
+    }
   }
 }
 

src/server/theme/slim/page-header.php

@@ -1,4 +1,14 @@
-<nav class="breadcrumbs"><div class="main-column"><?php
+<?php
+if ($data['showToc']) {
+    ?><nav class="toc-wrapper"></nav><?php
+}
+?><nav class="breadcrumbs"><div class="main-column"><?php
+
+// NOTE: We add buttons in reberse order because they float right
+
+if ($mode == 'view' && $data['showToc']) {
+    ?><div id="button-menu" class="btn btn-default btn-xs pull-right"><?php echo $i18n['button.menu']; ?></div><?php
+}
 if ($data['showCreateUserButton']) {
     ?><a class="btn btn-default btn-xs pull-right" href="<?php echo $data['requestPath']; ?>?createUser"><?php echo $i18n['button.createUser']; ?></a><?php
 }
@@ -19,8 +29,3 @@ foreach ($data['breadcrumbs'] as $item) {
     $isFirst = false;
 }
 ?></div></nav>
-<?php
-if ($data['showToc']) {
-    ?><nav class="toc-wrapper"></nav><?php
-}
-?>