From 359f2f9260f1bb89fa0f92feba9e48a73c2328ed Mon Sep 17 00:00:00 2001
From: Franz Steininger <narrenfrei@gmail.com>
Date: Thu, 8 Apr 2021 22:54:55 +0200
Subject: [PATCH 1/4] Icons for sidebar menu

---
 assets/scss/_sidebar-tree.scss     | 20 ++++++++++++++++++--
 layouts/partials/sidebar-tree.html |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/assets/scss/_sidebar-tree.scss b/assets/scss/_sidebar-tree.scss
index 4df0d32f8e..d76b79f3d1 100644
--- a/assets/scss/_sidebar-tree.scss
+++ b/assets/scss/_sidebar-tree.scss
@@ -30,8 +30,8 @@
         }
 
         @include media-breakpoint-up(md) {
-            & > ul {
-                padding-left: .5rem;
+            & .ul-1 ul {
+                padding-left: 1.5em;
             }
         }
 
@@ -87,6 +87,22 @@
         padding-top: .5rem;
         padding-left: 1.5rem;
     }
+
+    li i { // Layout of icons
+        padding-right: 0.5em;
+        &:before{
+            display: inline-block;
+            text-align: center;
+            min-width: 1em;
+        }
+    }
+
+    .td-sidebar-link.tree-root{
+        font-weight: $font-weight-bold;
+        color: $primary;
+        border-bottom: 1px $primary solid;
+        margin-bottom: 1rem;
+    }
 }
 
 .td-sidebar {
diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
index 008467c866..af34f3d674 100644
--- a/layouts/partials/sidebar-tree.html
+++ b/layouts/partials/sidebar-tree.html
@@ -49,7 +49,7 @@
   {{ $pages := $pages_tmp | first $sidebarMenuTruncate }}
   {{ $withChild := gt (len $pages) 0 }}
   <li class="td-sidebar-nav__section-title td-sidebar-nav__section{{ if $withChild }} with-child{{ else }} without-child{{ end }}{{ if $activePath }} active-path{{ end }}{{ if not $show }} collapse{{ end }}" id="{{ $mid }}-li">
-    <a href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}{{ if $treeRoot }} tree-root{{ end }}" id="{{ $mid }}"><span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $s.LinkTitle }}</span></a>
+    <a href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}{{ if $treeRoot }} tree-root{{ end }}" id="{{ $mid }}">{{ with $s.Params.Icon}}<i class="{{$s.Params.Icon}}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $s.LinkTitle }}</span></a>
     {{if $withChild }}
       {{ $ulNr := add $ulNr 1 }}
       <ul class="pr-md-3 ul-{{ $ulNr }}">

From 31e8e1563bfdf97fc132547d0ee94b9272cc8123 Mon Sep 17 00:00:00 2001
From: Franz Steininger <narrenfrei@gmail.com>
Date: Thu, 8 Apr 2021 23:02:00 +0200
Subject: [PATCH 2/4] Docs: Icons for sidebar menu

---
 userguide/content/en/docs/Adding content/navigation.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/userguide/content/en/docs/Adding content/navigation.md b/userguide/content/en/docs/Adding content/navigation.md
index 60622d37ce..cd94a3b6ab 100644
--- a/userguide/content/en/docs/Adding content/navigation.md	
+++ b/userguide/content/en/docs/Adding content/navigation.md	
@@ -86,6 +86,12 @@ With the compact menu (`.ui.sidebar_menu_compact = true`), only the current page
 
 On large sites (default: > 2000 pages) the section menu is not generated for each page, but cached for the whole section. The HTML classes for marking the active menu item (and menu path) are then set using JS. You can adjust the limit for activating the cached section menu with the optional parameter `.ui.sidebar_cache_limit`.
 
+### Adding icons to section menu
+
+It's also possible to add icons to the section menu in the sidebar by setting the `icon` parameter in the page front matter (e.g. `icon: fas fa-tools`). 
+
+You can find a complete list of icons to use in the [FontAwesome documentation](https://fontawesome.com/icons?d=gallery&p=2). Docsy includes the free FontAwesome icons by default.
+
 ## Breadcrumb navigation
 
 Breadcrumb navigation is enabled by default. To disable breadcrumb navigation, set site param `ui.breadcrumb_disable = true` in `config.toml`.

From e9c02d791ac389cc5b09324d7c544ef26d13b09d Mon Sep 17 00:00:00 2001
From: Franz Steininger <narrenfrei@gmail.com>
Date: Sat, 10 Apr 2021 08:45:16 +0200
Subject: [PATCH 3/4] small update for icons in sidebar tree

---
 layouts/partials/sidebar-tree.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
index af34f3d674..d530f0773d 100644
--- a/layouts/partials/sidebar-tree.html
+++ b/layouts/partials/sidebar-tree.html
@@ -49,7 +49,7 @@
   {{ $pages := $pages_tmp | first $sidebarMenuTruncate }}
   {{ $withChild := gt (len $pages) 0 }}
   <li class="td-sidebar-nav__section-title td-sidebar-nav__section{{ if $withChild }} with-child{{ else }} without-child{{ end }}{{ if $activePath }} active-path{{ end }}{{ if not $show }} collapse{{ end }}" id="{{ $mid }}-li">
-    <a href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}{{ if $treeRoot }} tree-root{{ end }}" id="{{ $mid }}">{{ with $s.Params.Icon}}<i class="{{$s.Params.Icon}}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $s.LinkTitle }}</span></a>
+    <a href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}{{ if $treeRoot }} tree-root{{ end }}" id="{{ $mid }}">{{ with $s.Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $s.LinkTitle }}</span></a>
     {{if $withChild }}
       {{ $ulNr := add $ulNr 1 }}
       <ul class="pr-md-3 ul-{{ $ulNr }}">

From 0ebb11830135fd20497c8fd4eb96de17e0cab4ee Mon Sep 17 00:00:00 2001
From: Franz Steininger <narrenfrei@gmail.com>
Date: Sat, 10 Apr 2021 09:21:39 +0200
Subject: [PATCH 4/4] updated how to use icons in sidebar menu

---
 userguide/content/en/docs/Adding content/navigation.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/userguide/content/en/docs/Adding content/navigation.md b/userguide/content/en/docs/Adding content/navigation.md
index cd94a3b6ab..263a46c1b5 100644
--- a/userguide/content/en/docs/Adding content/navigation.md	
+++ b/userguide/content/en/docs/Adding content/navigation.md	
@@ -92,6 +92,8 @@ It's also possible to add icons to the section menu in the sidebar by setting th
 
 You can find a complete list of icons to use in the [FontAwesome documentation](https://fontawesome.com/icons?d=gallery&p=2). Docsy includes the free FontAwesome icons by default.
 
+Out of the box, if you want to use icons, you should define icons for all items on the same menu level in order to ensure an appropriate look. If the icons are used in a different way, individual CSS adjustments are likely necessary.
+
 ## Breadcrumb navigation
 
 Breadcrumb navigation is enabled by default. To disable breadcrumb navigation, set site param `ui.breadcrumb_disable = true` in `config.toml`.