mobile handling of the sidebar SPR-840

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
+    }
 
     // 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 @@
             }
         }
     }
+
+
 }
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */

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();
 });
 

tpl/main-sidebar-nav.php

@@ -50,6 +50,7 @@
 
 
 <?php if($conf['breadcrumbs']): ?>
+    <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>
@@ -68,4 +69,5 @@
                 ?>
             </ul>
         </div>
+    </nav>
 <?php endif ?>