complete refactor of the sidebar behaviour javascript RES-754

Now all toggling of the sidebar and the related menus is done through the same click handler. HTML has been unified. All sidebar related content is now in a single include file instead of several. Icons for the site tools user tools and trace have been added. The CSS for the whole sidebar still has to be refactored.
2017-02-16 14:40:25 +01:00 · 2017-02-16 14:40:25 +01:00 · 6c61749bf2
commit 6c61749bf2
parent 285c4f96a7
13 changed files with 273 additions and 368 deletions
--- a/css/area_main-sidebar.less
+++ b/css/area_main-sidebar.less
@ -4,88 +4,91 @@
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */

-#dokuwiki__aside.main-sidebar {
-    .nav-main {
-        @icon-size: @font-size-big;
-        @menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
+#dokuwiki__aside {
+    @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

-        .navi-toggle {
-            cursor: pointer;
+    // 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;
+
+        span {
+            display: inline-block;
+            width: @menu-margin;
            height: @line-height-big;
-            line-height: @line-height-big;
-            font-weight: normal;
-            margin-left: (@menu-margin * -1); // moves the toggles back to the left
-
+            border-right: 1px solid @color-border;
+            text-align: center;
+            margin-right: @margin-small;
            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;

-            span {
+            // simple fake icon
+            strong {
                display: inline-block;
-                width: @menu-margin;
-                height: @line-height-big;
-                border-right: 1px solid @color-border;
+                font-size: @icon-size * 0.5;
+                width: @icon-size * 0.9;
+                height: @icon-size * 0.9;
+                line-height: @icon-size * 0.9;
+                margin: @icon-size * 0.05;
+                vertical-align: baseline;
                text-align: center;
-                margin-right: @margin-small;
                color: @color-nav;
+                border: 2px solid @color-nav;
+                border-top-right-radius: 50%;
+                border-bottom-left-radius: 50%;

-                // simple fake icon
-                strong {
-                    display: inline-block;
-                    font-size: @icon-size * 0.5;
-                    width: @icon-size * 0.9;
-                    height: @icon-size * 0.9;
-                    line-height: @icon-size * 0.9;
-                    margin: @icon-size * 0.05;
-                    vertical-align: baseline;
-                    text-align: center;
-                    color: @color-nav;
-                    border: 1px solid @color-nav;
-                    border-top-left-radius: 50%;
-                    border-bottom-right-radius: 50%;
-
-                }
-
-                // real icon
-                svg {
-                    width: @icon-size;
-                    height: @icon-size;
-                    path {
-                        fill: @color-nav;
-                    }
-                }
            }

-            &:hover,
-            &:focus,
-            &:active {
-                background-color: @button_color;
-                border-color: @button_background;
-                color: @button_background;
-                text-decoration: none;
-
-                span strong {
-                    color: @button_background;
-                    border-color: @button_background;
-                }
-
-                span svg path {
-                    fill: @button_background;
+            // real icon
+            svg {
+                width: @icon-size;
+                height: @icon-size;
+                path {
+                    fill: @color-nav;
                }
            }
        }
+
+        &:hover,
+        &:focus,
+        &:active {
+            background-color: @button_color;
+            border-color: @button_background;
+            color: @button_background;
+            text-decoration: none;
+
+            span strong {
+                color: @button_background;
+                border-color: @button_background;
+            }
+
+            span svg path {
+                fill: @button_background;
+            }
+        }
+    }
+
+    // the panel (hidden by default)
+    div.nav-panel {
+        display: none;
    }
 }

 // FIXME check if the stuff below is still relevant

-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */

--- a/img/account-settings.svg
+++ b/img/account-settings.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14M7,22H9V24H7V22M11,22H13V24H11V22M15,22H17V24H15V22Z" /></svg>
--- a/img/apple-safari.svg
+++ b/img/apple-safari.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,14.09 4.8,16 6.11,17.41L9.88,9.88L17.41,6.11C16,4.8 14.09,4 12,4M12,20A8,8 0 0,0 20,12C20,9.91 19.2,8 17.89,6.59L14.12,14.12L6.59,17.89C8,19.2 9.91,20 12,20M12,12L11.23,11.23L9.7,14.3L12.77,12.77L12,12M12,17.5H13V19H12V17.5M15.88,15.89L16.59,15.18L17.65,16.24L16.94,16.95L15.88,15.89M17.5,12V11H19V12H17.5M12,6.5H11V5H12V6.5M8.12,8.11L7.41,8.82L6.35,7.76L7.06,7.05L8.12,8.11M6.5,12V13H5V12H6.5Z" /></svg>
--- a/img/sitemap.svg
+++ b/img/sitemap.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z" /></svg>
--- a/js/sidebar-menu.js
+++ b/js/sidebar-menu.js
@ -1,153 +0,0 @@
-( function( $, spc ) {
-
-    var addToggleLink = function($elem){
-            $elem.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
-        },
-
-        setContentMinHeight = function(){
-            var $sidebar = $('.page-wrapper').find('> .tools').find('.col-xs-12');
-
-            if($sidebar.length == 1){
-                var h = $sidebar.height(),
-                    num = parseFloat(h);
-                if(!isNaN(num)){
-                    $('#dokuwiki__content').css('minHeight',num + 100);
-                }
-
-            }
-
-        },
-        setWideContent = function(){
-            var $openTogglers = $('.main-sidebar').find('.opened').find('.toggler');
-            $openTogglers.trigger( "click" );
-            $('body').addClass('wide-content');
-        },
-        setDefaultContent= function(){
-            $('body').removeClass('wide-content');
-
-        },
-        toggleState = function($toggler){
-            $toggler.toggleClass('closed');
-            $toggler.toggleClass('opened');
-        },
-        focusFirstSubLink = function($elem, is2nd){
-
-            var $foc = (is2nd) ? $elem.find('a')[1] : $elem.find('a')[0];
-
-            if($foc){
-                $foc.focus();
-            }
-            return $foc;
-        },
-        focusLastSubLink = function($elem){
-
-            var $foc = $elem.find('a:last-child'),
-                height = $elem.find('p').scrollHeight;
-
-            if($foc){
-                $foc.focus();
-            }
-            $elem.scrollTop(height);
-            return $foc;
-        },
-
-        mainMenu = function(){
-            var $menu = $('.nav-main').find('> ul');
-
-            try{
-                if($menu.length > 0){
-                    var $toggler = $menu.find('> li.level1 > .li'),
-                        $submenu = $menu.find('> li.level1 > ul');
-
-                    if($toggler.length > 0 && $submenu.length > 0){
-
-                        $toggler.addClass('closed');
-                        addToggleLink($toggler);
-                        $toggler.each(function( index ) {
-                            $(this).on( "click", function(e) {
-                                e.preventDefault();
-                                var $this = $(this);
-                                toggleState($this);
-                                if($this.hasClass('opened')){
-                                    var $foc = focusFirstSubLink($this.closest('li.level1'), true);
-                                }
-                                if($('body').hasClass('wide-content')){
-                                    setDefaultContent();
-                                }
-
-                            });
-                        });
-
-
-                        //FIXME: store current nav state with local storage
-                    }
-
-
-                }
-
-            }catch(err){
-
-            }
-        },
-        toggleMainContent = function(){
-            var $toggler = $('.togglelink.page_main-content').find('a');
-            $toggler.on("click", function (e) {
-                e.preventDefault();
-                var $link = $(this);
-
-                if($('body').hasClass('wide-content')){
-                    setDefaultContent();
-                }else{
-                    setWideContent();
-                }
-
-            });
-        },
-        sideMenu = function(){
-            var $menus = $('.tools').find('.toggle-menu');
-
-
-            try{
-                $menus.each(function( ) {
-                    var $menu = $(this);
-                    if($menu.length > 0){
-                        var $toggler = $menu.find('h6'),
-                            $submenu = $menu.find('nav > ul, nav > div');
-                        if($toggler.length > 0 && $submenu.length > 0) {
-
-                            $toggler.addClass('closed');
-                            addToggleLink($toggler);
-                            $toggler.each(function (index) {
-                                $(this).on("click", function (e) {
-                                    e.preventDefault();
-                                    var $this = $(this);
-                                    toggleState($this);
-                                    if ($this.hasClass('opened')) {
-                                        var $elem = ($submenu.is('div')) ? focusLastSubLink($submenu): focusFirstSubLink($submenu,false);
-                                    }
-                                    if($('body').hasClass('wide-content')){
-                                        setDefaultContent();
-                                    }
-                                });
-                            });
-
-                            //FIXME: store current nav state with local storage
-                        }
-                    }
-                });
-
-
-            }catch(err){
-                //console.log('err');
-            }
-        };
-
-    $(function(){
-        mainMenu();
-        sideMenu();
-        toggleMainContent();
-        setContentMinHeight();
-    });
-
-} )( jQuery, spc );
-
--- a/js/sidebar.js
+++ b/js/sidebar.js
@ -1,54 +1,143 @@
 /**
- * Initialize the sidebar to have a toggleable menu system with icon support
+ * Sets up the sidebar behaviour
 */
 jQuery(function () {
-    const $nav = jQuery('#dokuwiki__aside').find('nav.nav-main');
+    const $nav = jQuery('#dokuwiki__aside');
    if (!$nav.length) return;

-    const ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
-    const $elements = $nav.find(ELEMENT);
-    $elements.each(function () {
-        const $me = jQuery(this);
+    /**
+     * closes sidebar
+     */
+    const setWideContent = function () {
+        $nav.find('div.nav-panel').hide(); // close all panels
+        jQuery('body').addClass('wide-content');
+    };

-        // prepare text and the optional icon
-        const data = $me.text().split('@', 2);
-        const text = data[0].trim();
-        const $icon = jQuery('<span>')
-            .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
-            .wrapInner('<strong>');
-        if (data[1]) {
-            const src = data[1].trim();
-            $icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
-        }
+    /**
+     * opens the sidebar
+     */
+    const setDefaultContent = function () {
+        jQuery('body').removeClass('wide-content');

-        // make the new toggler
-        const $toggler = jQuery('<h6>')
-                .addClass('navi-toggle')
-                .text(text)
-                .prepend($icon)
-            ;
+    };

-        // wrap all following sibling til the next element in a wrapper
-        const $wrap = jQuery('<div>').addClass('navi-pane');
-        const $sibs = $me.nextAll();
-        for (let i = 0; i < $sibs.length; i++) {
-            const $sib = jQuery($sibs[i]);
-            if($sib.is(ELEMENT)) break;
-            $sib.detach().appendTo($wrap);
-        }
-        $wrap.hide();
-        $wrap.insertAfter($me);
+    /**
+     * Accessibility helper, focuses the first link witih the given element
+     *
+     * @param {jQuery} $elem
+     */
+    const focusFirstSubLink = function ($elem) {
+        $elem.find('a').first().focus();
+    };

-        // replace element with toggler
-        $me.replaceWith($toggler);
-
-        // add toggling the wrapper
-        $toggler.click(function () {
-            $wrap.dw_toggle(undefined, function () {
-                $me.toggleClass('open');
-            });
+    /**
+     * Toggle a navigation panel
+     *
+     * @param {jQuery} $toggler The h6 toggler
+     */
+    const toggleNav = function ($toggler) {
+        const $panel = $toggler.next('div.nav-panel');
+        const isOpen = $panel.is(':visible');
+        // open sidebar on interaction
+        setDefaultContent();
+        // toggle the panel, focus first link after opening
+        $panel.dw_toggle(!isOpen, function () {
+            if (!isOpen) {
+                focusFirstSubLink($panel);
+            }
        });
+    };

-    });
+    /**
+     * Initialize the content navigation
+     *
+     * It mangles the sidebar content and handles inline Icon configuration
+     */
+    const initContentNav = function () {
+        const $main = $nav.find('nav.nav-main');
+        if (!$main.length) return;

+        const ELEMENT = 'h1,h2,h3,h4,h5'; // FIXME move to config
+        const $elements = $main.find(ELEMENT);
+        $elements.each(function () {
+            const $me = jQuery(this);
+
+            // prepare text and the optional icon
+            const data = $me.text().split('@', 2);
+            const text = data[0].trim();
+            const $icon = jQuery('<span>')
+                .text(text.substr(0, 1).toUpperCase() + text.substr(1, 1).toLowerCase())
+                .wrapInner('<strong>');
+            if (data[1]) {
+                const src = data[1].trim();
+                $icon.load(DOKU_BASE + 'lib/tpl/sprintdoc/svg.php?svg=' + src + '&e=1'); // directly embed
+            }
+
+            // make the new toggler
+            const $toggler = jQuery('<h6>')
+                    .attr('role', 'heading')
+                    .attr('aria-level', '2')
+                    .text(text)
+                    .prepend($icon)
+                ;
+
+            // wrap all following siblings til the next element in a wrapper
+            const $wrap = jQuery('<div>')
+                .addClass('nav-panel');
+            const $sibs = $me.nextAll();
+            for (let i = 0; i < $sibs.length; i++) {
+                const $sib = jQuery($sibs[i]);
+                if ($sib.is(ELEMENT)) break;
+                $sib.detach().appendTo($wrap);
+            }
+            $wrap.insertAfter($me);
+
+            // replace element with toggler
+            $me.replaceWith($toggler);
+        });
+    };
+
+    /**
+     * Initialize the open/close toggling of menu entries
+     */
+    const initMenuHandling = function () {
+        $nav.on('click', 'h6', function () {
+            toggleNav(jQuery(this));
+        });
+    };
+
+    /**
+     * Make sure the content area is always as high as the sidebar
+     */
+    const initContentMinHeight = function () {
+        const $sidebar = jQuery('.page-wrapper').find('> .tools').find('.col-xs-12');
+        if ($sidebar.length == 1) {
+            const num = parseFloat($sidebar.height());
+            if (!isNaN(num)) {
+                jQuery('#dokuwiki__content').css('minHeight', num + 100);
+            }
+        }
+    };
+
+    /**
+     * Initialize the sidebar handle behaviour
+     */
+    const initSidebarToggling = function () {
+        const $toggler = jQuery('.togglelink.page_main-content').find('a');
+        $toggler.click(function (e) {
+            e.preventDefault();
+            if (jQuery('body').hasClass('wide-content')) {
+                setDefaultContent();
+            } else {
+                setWideContent();
+            }
+        });
+    };
+
+    // main
+    initContentNav();
+    initSidebarToggling();
+    initMenuHandling();
+    initContentMinHeight();
 });
+
--- a/main.php
+++ b/main.php
@ -168,59 +168,14 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
                            ?>
                        </div><!-- .search -->

-                        <div id="dokuwiki__aside" class="menu main-sidebar">
+                        <div id="dokuwiki__aside">
                            <?php
-
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* main menu */
+/* sidebar */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                include('tpl/nav-main.php');
+                                include('tpl/main-sidebar-nav.php');
                            ?>
-                        </div><!-- .menu -->
-
-                        <div class="side-tools main-sidebar toggle-menu">
-                            <?php
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* site tools */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                include('tpl/nav-sitetools.php');
-                            ?>
-                        </div><!-- .side-tools -->
-                        <div class="side-tools main-sidebar toggle-menu">
-                            <?php
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* user tools */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            include('tpl/nav-usermenu.php');
-                            ?>
-                        </div><!-- .side-tools -->
-
-                        <div class="side-tools main-sidebar toggle-menu">
-                            <?php
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* trace */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            include('tpl/nav-trace.php');
-                            ?>
-                        </div><!-- .side-tools -->
-
-                        <div class="sidebarfooter main-sidebar">
-                            <?php
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* Include Hook: sidebarfooter.html */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                                tpl_includeFile('sidebarfooter.html')
-                            ?>
-                        </div><!-- .sidebarheader -->
+                        </div><!-- .aside -->

                    </div><!-- .col -->
                </div><!-- .row -->
--- a/script.js
+++ b/script.js
@ -3,8 +3,5 @@

 /* DOKUWIKI:include js/plugins/do_tasks.js */

-/* DOKUWIKI:include js/sidebar-menu.js */
 /* DOKUWIKI:include js/meta-box.js */
-
-
 /* DOKUWIKI:include js/sidebar.js */
--- a/tpl/main-sidebar-nav.php
+++ b/tpl/main-sidebar-nav.php
@ -0,0 +1,71 @@
+<nav class="nav-main">
+    <?php /* main navigation, loaded from sidebar, fixed up by javascript */
+    tpl_include_page($conf['sidebar'], 1, 1);
+    ?>
+</nav>
+
+
+<nav class="nav-sitetools">
+    <h6 role="heading" aria-level="2">
+        <span><?php echo inlineSVG(__DIR__ . '/../img/sitemap.svg')?></span>
+        <?php echo $lang['site_tools']; ?>
+    </h6>
+    <div class="nav-panel">
+        <ul>
+            <?php
+            tpl_toolsevent(
+                'sitetools',
+                array(
+                    'recent' => tpl_action('recent', 1, 'li', 1),
+                    'media' => tpl_action('media', 1, 'li', 1),
+                    'index' => tpl_action('index', 1, 'li', 1),
+                )
+            );
+            ?>
+        </ul>
+    </div>
+</nav>
+
+
+<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>
+    <div class="nav-panel">
+        <ul>
+            <?php /* dokuwiki user tools */
+            tpl_toolsevent(
+                'usertools',
+                array(
+                    'login' => tpl_action('login', 1, 'li', 1),
+                    'admin' => tpl_action('admin', 1, 'li', 1),
+                    'register' => tpl_action('register', 1, 'li', 1),
+                )
+            );
+            ?>
+        </ul>
+    </div>
+</nav>
+
+
+<?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>
+        <div class="nav-panel">
+            <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), 'class="breadcrumbs" title="' . $id . '"');
+                    echo '</li>';
+                }
+                ?>
+            </ul>
+        </div>
+    </nav>
+<?php endif ?>
--- a/tpl/nav-main.php
+++ b/tpl/nav-main.php
@ -1,12 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-    if ($showSidebar):
-
-    echo "<nav class=\"nav-main\">";
-    echo "<h6 class=\"sr-only\" role=\"heading\" aria-level=\"2\">".tpl_getLang('head_menu_main')."</h6>";
-    echo PHP_EOL;
-    tpl_include_page($conf['sidebar'], 1, 1);
-    echo PHP_EOL;
-    echo "</nav>";
-
-    endif ?>
--- a/tpl/nav-sitetools.php
+++ b/tpl/nav-sitetools.php
@ -1,14 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-
-    if ($showSidebar): ?>
-
-                                <nav id="dokuwiki__sitetools" class="nav-sitetools">
-                                    <h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['site_tools']; ?></h6>
-                                    <ul><?php tpl_toolsevent('sitetools', array(
-                                                'recent'    => tpl_action('recent', 1, 'li', 1),
-                                                'media'     => tpl_action('media', 1, 'li', 1),
-                                                'index'     => tpl_action('index', 1, 'li', 1),
-                                            )); ?></ul>
-                                </nav>
-    <?php endif ?>
--- a/tpl/nav-trace.php
+++ b/tpl/nav-trace.php
@ -1,11 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-
-    if ($conf['useacl'] && $showTools): ?>
-
-                            <nav class="nav-trace <?php echo $navClass?>">
-                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_trace'); ?></h6>
-                                <div class="trace"><p><?php tpl_breadcrumbs(); ?></p></div>
-                            </nav><!-- #dokuwiki__usertools -->
-    <?php endif ?>
-
--- a/tpl/nav-usermenu.php
+++ b/tpl/nav-usermenu.php
@ -1,23 +0,0 @@
-<?php
-    if (!defined('DOKU_INC')) die();
-
-    if ($conf['useacl'] && $showTools): ?>
-
-                            <nav class="nav-usermenu <?php echo $navClass?>">
-                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['user_tools']; ?></h6>
-                                <ul>
-                                    <li class="log"><?php tpl_actionlink('login'); ?></li>
-                                    <?php if($_SERVER['REMOTE_USER']){
-                                        echo '<a class="profile" href="'.wl(tpl_getConf('user_ns').$_SERVER['REMOTE_USER'].':') . '">'.hsc($USERINFO['name']).'</a>';
-                                    }?>
-
-                                    <?php /* dokuwiki user tools */
-                                    tpl_toolsevent('usertools', array(
-                                        'admin'     => tpl_action('admin', 1, 'li', 1),
-                                        'register'  => tpl_action('register', 1, 'li', 1),
-                                    )); ?>
-
-                                </ul>
-                            </nav><!-- #dokuwiki__usertools -->
-    <?php endif ?>
-
				`@ -0,0 +1 @@`
				`<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14M7,22H9V24H7V22M11,22H13V24H11V22M15,22H17V24H15V22Z" /></svg>`
				`@ -0,0 +1 @@`
				<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,14.09 4.8,16 6.11,17.41L9.88,9.88L17.41,6.11C16,4.8 14.09,4 12,4M12,20A8,8 0 0,0 20,12C20,9.91 19.2,8 17.89,6.59L14.12,14.12L6.59,17.89C8,19.2 9.91,20 12,20M12,12L11.23,11.23L9.7,14.3L12.77,12.77L12,12M12,17.5H13V19H12V17.5M15.88,15.89L16.59,15.18L17.65,16.24L16.94,16.95L15.88,15.89M17.5,12V11H19V12H17.5M12,6.5H11V5H12V6.5M8.12,8.11L7.41,8.82L6.35,7.76L7.06,7.05L8.12,8.11M6.5,12V13H5V12H6.5Z" /></svg>