From 4055de39fa1d13689fd492775c7237dab417a8bd Mon Sep 17 00:00:00 2001
From: Andreas Gohr <gohr@cosmocode.de>
Date: Wed, 22 Feb 2017 14:58:43 +0100
Subject: [PATCH 1/2] mobile handling of the sidebar SPR-840

---
 css/area_main-sidebar-nav.less | 36 +++++++++++++++++++++++++++++++-
 js/sidebar.js                  | 11 ++++++++++
 tpl/main-sidebar-nav.php       | 38 ++++++++++++++++++----------------
 3 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less
index 43e1c53..997efc0 100755
--- a/css/area_main-sidebar-nav.less
+++ b/css/area_main-sidebar-nav.less
@@ -8,7 +8,9 @@
     @icon-size: @font-size-big;
     @menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
 
-    margin-left: @menu-margin; // moves *all* sidebar content to the right
+    > * {
+        margin-left: @menu-margin; // moves *all* sidebar content to the right
+    }
 
     // the toggle element
     a.nav {
@@ -98,6 +100,36 @@
     }
 }
 
+/**
+ * Sidebar handling in mobile view
+ */
+@media @screen_max-md {
+    // hide on medium and smaller screens
+    #dokuwiki__aside {
+        display: none;
+    }
+    // show when toggled
+    #dokuwiki__aside.show {
+        display: block;
+
+        position: absolute;
+        left: 0;
+        z-index: 200; // above all
+
+
+        border-right: @ini_border 1px solid;
+        box-shadow: @box-shadow;;
+
+        max-width: 100%;
+        min-width: 45%;
+        height: 100%;
+
+        background-color: @ini_background;
+    }
+}
+
+
+
 // FIXME check if the stuff below is still relevant
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -125,6 +157,8 @@
             }
         }
     }
+
+
 }
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
diff --git a/js/sidebar.js b/js/sidebar.js
index 60245bd..80d6e9a 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -150,11 +150,22 @@ jQuery(function () {
 
     };
 
+    /**
+     * Open and close the sidebar in mobile view
+     */
+    const initMobileToggling = function () {
+        jQuery('.menu-togglelink').find('a').click(function (e) {
+            e.preventDefault();
+            jQuery('#dokuwiki__aside').toggleClass('show');
+        });
+    };
+
     // main
     initContentNav();
     initSidebarToggling();
     initMenuHandling();
     initContentMinHeight();
     initSearchToggling();
+    initMobileToggling();
 });
 
diff --git a/tpl/main-sidebar-nav.php b/tpl/main-sidebar-nav.php
index 4c179b5..5ac9119 100644
--- a/tpl/main-sidebar-nav.php
+++ b/tpl/main-sidebar-nav.php
@@ -50,22 +50,24 @@
 
 
 <?php if($conf['breadcrumbs']): ?>
-    <a class="nav" role="heading" aria-level="2">
-        <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
-        <span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
-    </a>
-    <div class="nav-panel level1">
-        <ul>
-            <?php /* trace breadcrumbs as list */
-            // FIXME move to helper class
-            $crumbs = breadcrumbs();
-            $crumbs = array_reverse($crumbs, true);
-            foreach($crumbs as $id => $name) {
-                echo '<li>';
-                tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
-                echo '</li>';
-            }
-            ?>
-        </ul>
-    </div>
+    <nav class="nav-trace">
+        <a class="nav" role="heading" aria-level="2">
+            <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
+            <span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
+        </a>
+        <div class="nav-panel level1">
+            <ul>
+                <?php /* trace breadcrumbs as list */
+                // FIXME move to helper class
+                $crumbs = breadcrumbs();
+                $crumbs = array_reverse($crumbs, true);
+                foreach($crumbs as $id => $name) {
+                    echo '<li>';
+                    tpl_link(wl($id), hsc($name), 'title="' . $id . '"');
+                    echo '</li>';
+                }
+                ?>
+            </ul>
+        </div>
+    </nav>
 <?php endif ?>

From e35789fd1e5bd74a505e5f40b9fe78be00297174 Mon Sep 17 00:00:00 2001
From: Andreas Gohr <gohr@cosmocode.de>
Date: Wed, 22 Feb 2017 15:51:32 +0100
Subject: [PATCH 2/2] styled the menu button

---
 css/area_header.less      | 42 +++++++++++++++++++++++++++++++++++++++
 css/base_structure.less   |  2 ++
 img/menu.svg              |  1 +
 tpl/main-sidebar-logo.php | 17 ++++++++++------
 4 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 img/menu.svg

diff --git a/css/area_header.less b/css/area_header.less
index cec19b3..d2342fd 100755
--- a/css/area_header.less
+++ b/css/area_header.less
@@ -3,3 +3,45 @@
  *
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
+#dokuwiki__header {
+
+    .menu-togglelink {
+        border: 1px solid @color-border;
+        border-radius: @border-radius;
+        text-align: center;
+        margin: @very-small-spacing -(@very-small-spacing) 0 0;
+
+        font-size: @font-size-small;
+        min-height: 2em;
+        min-width: 2em;
+        box-sizing: border-box;
+        line-height: 2em;
+
+        cursor: pointer;
+        background-color: #fff;
+        text-decoration: none;
+        transition: @transition color, @transition background-color, @transition border-color;
+
+
+        svg {
+            height: @font-size-default + (@font-scale-factor * 4);
+            width: @font-size-default + (@font-scale-factor * 4);
+            vertical-align: middle;
+            path {
+                fill: @color-nav
+            }
+        }
+
+        &:hover,
+        &:active,
+        &:focus {
+            background-color: @button_color;
+            border-color: @button_background;
+            svg path {
+                fill: @button_background;
+            }
+        }
+
+    }
+
+}
diff --git a/css/base_structure.less b/css/base_structure.less
index 6ff66bc..b7bcae2 100755
--- a/css/base_structure.less
+++ b/css/base_structure.less
@@ -153,6 +153,8 @@
                 }
             }
         }
+
+
     }
 
     .showSidebar {
diff --git a/img/menu.svg b/img/menu.svg
new file mode 100644
index 0000000..db5d4df
--- /dev/null
+++ b/img/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
\ No newline at end of file
diff --git a/tpl/main-sidebar-logo.php b/tpl/main-sidebar-logo.php
index ffdb206..6987875 100755
--- a/tpl/main-sidebar-logo.php
+++ b/tpl/main-sidebar-logo.php
@@ -1,9 +1,14 @@
 <?php
-    if (!defined('DOKU_INC')) die();
+if(!defined('DOKU_INC')) die();
 
-    echo '<div class="menu-togglelink mobile-only"><a href=\'#\'>MOB</a></div>';
-    echo '<div class="logo">';
+echo '<div class="menu-togglelink mobile-only">';
+echo '<a href="#">';
+echo inlineSVG(__DIR__ . '/../img/menu.svg');
+echo '<span class="sr-out">'.tpl_getLang('a11y_sidebartoggle').'</span>';
+echo '</a>';
+echo '</div>';
 
-    \dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
-
-    echo "<hr class=\"structure\" /></div>";
+echo '<div class="logo">';
+\dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
+echo '<hr class="structure" />';
+echo '</div>';