Merge remote-tracking branch 'origin/title'

css/area_main-sidebar-nav.less

@@ -62,8 +62,14 @@
         }
     }
 
+    // the wrapper around the toggle to reserve space
+    div.nav {
+        height: @icon-size + @margin-small;
+        border: 1px solid transparent;
+    }
+
     // the toggle element
-    a.nav {
+    div.nav a {
         .display-flex();
         .align-items();
 
@@ -145,6 +151,11 @@
             color: @ini_nav_menu_hover_color;
             text-decoration: none;
 
+            // always show label, even with collapsed sidebar
+            position: absolute;
+            z-index: 100;
+            width: 100%;
+
             span.ico {
                 border-color: inherit;
 
@@ -293,3 +304,23 @@
         }
     }
 }
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1439px */
+
+@media @screen_max-xlg {
+    #dokuwiki__aside {
+        nav {
+            li:not([class]),
+            .li {
+                font-size: @font-size-default;
+
+                * {
+                    font-size: inherit;
+                    font-weight: inherit;
+                }
+            }
+        }
+    }
+}
+

css/base_structure.less

@@ -73,23 +73,7 @@
         z-index: 900;
     }
 
-/*  if z-index is needed for .tools col, then use this:
-
-    .tools .row > .col-xs-12 {
-        z-index: 5; // SPR-945 sometimes too small space for suggestionlist
-    }
-
-    .wide-content .tools .row > .col-xs-12 {
-        z-index: 1;
-    }
-*/
-
-    .header .row > .col-xs-12 {
-        z-index: 2;
-    }
-
     .content .row > .col-xs-12 {
-        z-index: 3;
         border-radius: 0 @ini_default_border_radius @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
     }
 

js/sidebar.js

@@ -48,10 +48,10 @@ jQuery(function () {
         /**
          * Toggle a navigation panel
          *
-         * @param {jQuery} $toggler The h6 toggler
+         * @param {jQuery} $toggler The a toggler
          */
          toggleNav = function ($toggler) {
-            var $panel = $toggler.next('div.nav-panel');
+            var $panel = $toggler.parent().next('div.nav-panel');
             var isOpen = $panel.is(':visible');
             // open sidebar on interaction
             setDefaultContent();
@@ -96,7 +96,6 @@ jQuery(function () {
 
                 // make the new toggler
                 var $toggler = jQuery('<a>')
-                        .addClass('nav')
                         .attr('href', '#')
                         .attr('role', 'heading')
                         .attr('aria-level', '2')
@@ -105,6 +104,7 @@ jQuery(function () {
                         .prepend($icon)
                         .data('index', index)
                     ;
+                $toggler = jQuery('<div class="nav">').prepend($toggler);
 
                 // wrap all following siblings til the next element in a wrapper
                 var $wrap = jQuery('<div>')
@@ -135,7 +135,7 @@ jQuery(function () {
          * Initialize the open/close toggling of menu entries
          */
         initMenuHandling = function () {
-            $nav.on('click', 'a.nav', function (e) {
+            $nav.on('click', 'div.nav a', function (e) {
                 toggleNav(jQuery(this));
                 e.preventDefault();
             });

tpl/main-sidebar-nav.php

@@ -5,12 +5,12 @@
 </nav>
 
 <nav class="nav-sitetools">
-    <a class="nav" role="heading" aria-level="2">
+    <div class="nav"><a href="#sidebar-site-tools" role="heading" aria-level="2">
         <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/sitemap.svg') ?></span>
         <span class="lbl"><?php echo $lang['site_tools']; ?></span>
-    </a>
+    </a></div>
     <div class="nav-panel level1">
-        <ul>
+        <ul id="sidebar-site-tools">
             <?php
             tpl_toolsevent(
                 'sitetools',
@@ -27,12 +27,12 @@
 
 
 <nav class="nav-usermenu">
-    <a class="nav" role="heading" aria-level="2">
+    <div class="nav"><a href="#sidebar-user-tools" role="heading" aria-level="2">
         <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/account-settings.svg') ?></span>
         <span class="lbl"><?php echo $lang['user_tools']; ?></span>
-    </a>
+    </a></div>
     <div class="nav-panel level1">
-        <ul>
+        <ul id="sidebar-user-tools">
             <?php /* dokuwiki user tools */
             tpl_toolsevent(
                 'usertools',
@@ -56,12 +56,12 @@ if($plugin_starred) $stars = $plugin_starred->loadStars();
 if($stars):
     ?>
     <nav class="nav-starred">
-        <a class="nav" role="heading" aria-level="2">
+        <div class="nav"><a href="#sidebar-menu-starred" role="heading" aria-level="2">
             <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/star-circle.svg') ?></span>
             <span class="lbl"><?php echo tpl_getLang('head_menu_starred'); ?></span>
-        </a>
+        </a></div>
         <div class="nav-panel level1 plugin_starred">
-            <ul>
+            <ul id="sidebar-menu-starred">
                 <?php
                 foreach($stars as $pid => $time) {
                     echo '<li>';
@@ -80,12 +80,12 @@ if($stars):
 
 <?php if($conf['breadcrumbs']): ?>
     <nav class="nav-trace">
-        <a class="nav" role="heading" aria-level="2">
+        <div class="nav"><a href="#sidebar-menu_trace" 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>
+        </a></div>
         <div class="nav-panel level1">
-            <ul>
+            <ul id="sidebar-menu_trace">
                 <?php /* trace breadcrumbs as list */
                 // FIXME move to helper class
                 $crumbs = breadcrumbs();