show sidebar label on collapsed sidebar SPR-957

This removes the base z-indexes as they seem not to be needed (source
order defines initial heights) and interfered with the sidbar functionality.

Removing it was suggested in SPR-899 as well

css/area_main-sidebar-nav.less

@@ -84,8 +84,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();
 
@@ -156,6 +162,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;
 
@@ -284,7 +295,6 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1439px */
 

css/base_structure.less

@@ -73,16 +73,7 @@
         z-index: 900;
     }
 
-    .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,10 +5,10 @@
 </nav>
 
 <nav class="nav-sitetools">
-    <a class="nav" role="heading" aria-level="2">
+    <div class="nav"><a 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>
             <?php
@@ -27,10 +27,10 @@
 
 
 <nav class="nav-usermenu">
-    <a class="nav" role="heading" aria-level="2">
+    <div class="nav"><a 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>
             <?php /* dokuwiki user tools */
@@ -56,10 +56,10 @@ 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 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>
                 <?php
@@ -80,10 +80,10 @@ if($stars):
 
 <?php if($conf['breadcrumbs']): ?>
     <nav class="nav-trace">
-        <a class="nav" role="heading" aria-level="2">
+        <div class="nav"><a 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>
                 <?php /* trace breadcrumbs as list */