Fix links in sidebar can't be clicked full length

Author: lcharette

app/assets/css/sidebar.less

@@ -11,15 +11,10 @@
         border-left: @sidebar-item-border-width solid transparent;
     }
 
-    // Numbered list style for sidebar navigation
-    .uf-nav-chaptered {
-        list-style-type: decimal-leading-zero;
-        list-style-position: inside;
-    }
-
-    // Revert link Flex to fix alignment issue with numbers
-    .uk-nav-default li > a {
-        display: inline-block;
+    // Chapter index styles
+    .sidebar-index {
+        color: @sidebar-item-color;
+        padding-right: 5px;
     }
 
     // Move padding from a to li.
@@ -43,6 +38,11 @@
         border-left: @sidebar-item-border-width solid @sidebar-item-border-color;
         background-color: @inverse-sidebar-active-background; // Apply dark mode by default
         color: @inverse-sidebar-item-active-color; // Apply dark mode by default
+
+        // Restore index color on active/hover
+        .sidebar-index {
+            color: inherit;
+        }
     }
     .uk-nav-default > li > a:hover,
     .uk-nav-default > li.uk-open > a,
@@ -54,7 +54,7 @@
 
     // Remove <a> left border and adjust padding
     .uk-nav-default > li > a {
-        padding: 0px @sidebar-item-padding-horizontal 0px 5px;
+        padding: 0px @sidebar-item-padding-horizontal 0px 0px;
         border-left: 0px;
     }
 

app/templates/content/navigation/sidebar.html.twig

@@ -1,3 +1,3 @@
 {% import "macros/sidebar.html.twig" as sidebar %}
 
-{{ sidebar.tree(menu, page) }}
+{{ sidebar.tree(menu, page, false) }}

app/templates/macros/sidebar.html.twig

@@ -1,30 +1,35 @@
-{% macro tree(items, currentPage) %}
+{% macro tree(items, currentPage, isChild = false) %}
     {% for item in items %}
+        {% set indexLabel = isChild ? '' : '%02d.'|format(loop.index) %}
         {% if item.children is not empty %}
-            {{ _self.dropdown(item, currentPage, isChildActive(item.children, currentPage) or currentPage.getSlug() == item.getSlug()) }}
+            {{ _self.dropdown(item, currentPage, isChildActive(item.children, currentPage) or currentPage.getSlug() == item.getSlug(), indexLabel) }}
         {% else %}
-            {{ _self.link(item.getTitle(), item.getRoute(), currentPage.getSlug() == item.getSlug()) }}
+            {{ _self.link(item.getTitle(), item.getRoute(), currentPage.getSlug() == item.getSlug(), indexLabel) }}
         {% endif %}
     {% endfor %}
 {% endmacro %}
 
-{% macro link(label, href = '#', active = false) %}
+{% macro link(label, href = '#', active = false, indexLabel = '') %}
     <li class="{{ active ? 'uk-active' : '' }}">
-        <a href="{{ href }}">{{ label }}</a>
+        <a href="{{ href }}">{{ _self.index(indexLabel) }}{{ label }}</a>
     </li>
 {% endmacro %}
 
-{% macro dropdown(item, currentPage, open = false) %}
+{% macro dropdown(item, currentPage, open = false, indexLabel = '') %}
     <li class="uk-parent {{ open ? 'uk-open' : '' }} {{ currentPage.getSlug() == item.getSlug() ? 'uk-active' : '' }}">
         <a href="{{ item.getRoute() }}">
-            {{ item.getTitle() }}
+            {{ _self.index(indexLabel) }}{{ item.getTitle() }}
         </a>
         <ul class="uk-nav-sub">
-            {{ _self.tree(item.children, currentPage) }}
+            {{ _self.tree(item.children, currentPage, true) }}
         </ul>
     </li>
 {% endmacro %}
 
+{% macro index(indexLabel = '') %}
+    {% if indexLabel %}<span class="sidebar-index" aria-hidden="true">{{ indexLabel }}</span> {% endif %}
+{% endmacro %}
+
 {% macro label(label) %}
     <li class="uk-nav-header">{{ label }}</li>
 {% endmacro %}

app/templates/partials/sidebar.html.twig

@@ -1,5 +1,5 @@
 <aside class="uf-sidebar uk-visible@m">
-    <ul class="uk-nav-default uf-nav-chaptered" uk-nav>
+    <ul class="uk-nav-default" uk-nav>
         <div class="uk-nav-header">Documentation</div>
         <div class="uk-nav-header" id="search-box"></div>
         {% include 'content/navigation/sidebar.html.twig' %}
@@ -14,7 +14,7 @@
         <ul class="uk-nav-default" uk-nav>
             {% include "content/navigation/navbar.html.twig" %}
         </ul>
-        <ul class="uk-nav-default uf-nav-chaptered" uk-nav>
+        <ul class="uk-nav-default" uk-nav>
             <div class="uk-nav-header">Documentation</div>
             <div class="uk-nav-header" id="search-box-mobile"></div>
             {% include 'content/navigation/sidebar.html.twig' %}