From fa1028ad604270ca8d15fcbaf6a178833305018c Mon Sep 17 00:00:00 2001
From: Andreas Gohr <gohr@cosmocode.de>
Date: Thu, 16 Feb 2017 16:58:36 +0100
Subject: [PATCH] finally align the menu items correctly

I had to wrap the labels in their own span and use flex box to make them
behave correctly. Simplifications welcome.
---
 css/area_main-sidebar-nav.less | 26 +++++++++++++++++---------
 js/sidebar.js                  |  3 ++-
 tpl/main-sidebar-nav.php       | 14 ++++++++------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less
index 8bc479e..6565b61 100755
--- a/css/area_main-sidebar-nav.less
+++ b/css/area_main-sidebar-nav.less
@@ -13,23 +13,31 @@
     // the toggle element
     h6 {
         cursor: pointer;
-
-        height: @line-height-big;
-        line-height: @line-height-big;
         font-weight: normal;
         margin-left: (@menu-margin * -1); // moves the toggles back to the left
-
         color: @color-nav;
         border: 1px solid transparent;
         border-radius: @fix_border-radius;
-        // margin-bottom: -.3rem; FIXME
-        // padding: .7em 0 .7em (@margin-big + 1); FIXME WTF?
         transition: @transition color, @transition background-color, @transition border-color;
 
+        height: @icon-size + @margin-small;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
         span {
             display: inline-block;
+            vertical-align: middle;
+        }
+
+        span.lbl {
+            flex-grow: 1;
+        }
+
+        span.ico {
             width: @menu-margin;
-            height: @line-height-big;
+            height: @icon-size;
+            flex-grow: 0;
             border-right: 1px solid @color-border;
             text-align: center;
             margin-right: @margin-small;
@@ -70,12 +78,12 @@
             color: @button_background;
             text-decoration: none;
 
-            span strong {
+            span.ico strong {
                 color: @button_background;
                 border-color: @button_background;
             }
 
-            span svg path {
+            span.ico svg path {
                 fill: @button_background;
             }
         }
diff --git a/js/sidebar.js b/js/sidebar.js
index fd13efb..f31bb75 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -65,7 +65,7 @@ jQuery(function () {
             // prepare text and the optional icon
             const data = $me.text().split('@', 2);
             const text = data[0].trim();
-            const $icon = jQuery('<span>')
+            const $icon = jQuery('<span class="ico">')
                 .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
                 .wrapInner('<strong>');
             if (data[1]) {
@@ -78,6 +78,7 @@ jQuery(function () {
                     .attr('role', 'heading')
                     .attr('aria-level', '2')
                     .text(text)
+                    .wrapInner('<span class="lbl">')
                     .prepend($icon)
                 ;
 
diff --git a/tpl/main-sidebar-nav.php b/tpl/main-sidebar-nav.php
index ae3046b..cab23cb 100644
--- a/tpl/main-sidebar-nav.php
+++ b/tpl/main-sidebar-nav.php
@@ -7,8 +7,8 @@
 
 <nav class="nav-sitetools">
     <h6 role="heading" aria-level="2">
-        <span><?php echo inlineSVG(__DIR__ . '/../img/sitemap.svg')?></span>
-        <?php echo $lang['site_tools']; ?>
+        <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/sitemap.svg') ?></span>
+        <span class="lbl"><?php echo $lang['site_tools']; ?></span>
     </h6>
     <div class="nav-panel level1">
         <ul>
@@ -29,8 +29,9 @@
 
 <nav class="nav-usermenu">
     <h6 role="heading" aria-level="2">
-        <span><?php echo inlineSVG(__DIR__ . '/../img/account-settings.svg')?></span>
-        <?php echo $lang['user_tools']; ?></h6>
+        <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/account-settings.svg') ?></span>
+        <span class="lbl"><?php echo $lang['user_tools']; ?></span>
+    </h6>
     <div class="nav-panel level1">
         <ul>
             <?php /* dokuwiki user tools */
@@ -51,8 +52,9 @@
 <?php if($conf['breadcrumbs']): ?>
     <nav class="nav-trace">
         <h6 role="heading" aria-level="2">
-            <span><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg')?></span>
-            <?php echo tpl_getLang('head_menu_trace'); ?></h6>
+            <span class="ico"><?php echo inlineSVG(__DIR__ . '/../img/apple-safari.svg') ?></span>
+            <span class="lbl"><?php echo tpl_getLang('head_menu_trace'); ?></span>
+        </h6>
         <div class="nav-panel level1">
             <ul>
                 <?php /* trace breadcrumbs as list */