Add support for icons in sidebar

Fixes #3830

Author: dragonstyle

src/project/types/website/website-navigation-md.ts

@@ -219,26 +219,32 @@ const sidebarContentsHandler = (context: NavigationPipelineContext) => {
         ".sidebar-item:not(.sidebar-item-section) .sidebar-item-text",
       );
       for (let i = 0; i < sidebarItemEls.length; i++) {
-        const link = sidebarItemEls[i] as Element;
-        const href = link.getAttribute("href");
+        const sidebarEl = sidebarItemEls[i] as Element;
+        const href = sidebarEl.getAttribute("href");
         const sidebarText = rendered[`${kSidebarIdPrefix}${href}`];
         if (sidebarText) {
-          link.innerHTML = sidebarText.innerHTML;
+          const link = sidebarEl.querySelector(".menu-text");
+          if (link) {
+            link.innerHTML = sidebarText.innerHTML;
+          }
         }
       }
 
       const sidebarSectionEls = doc.querySelectorAll(
         ".sidebar-item.sidebar-item-section .sidebar-item-text",
       );
       for (let i = 0; i < sidebarSectionEls.length; i++) {
-        const link = sidebarSectionEls[i] as Element;
-        const target = link.getAttribute("data-bs-target");
+        const sectionEl = sidebarSectionEls[i] as Element;
+        const target = sectionEl.getAttribute("data-bs-target");
 
         if (target) {
           const id = target.slice(1);
           const sectionText = rendered[`${kSidebarIdPrefix}${id}`];
           if (sectionText) {
-            link.innerHTML = sectionText.innerHTML;
+            const link = sectionEl.querySelector(".menu-text");
+            if (link) {
+              link.innerHTML = sectionText.innerHTML;
+            }
           }
         }
       }

src/project/types/website/website-navigation.ts

@@ -58,7 +58,6 @@ import {
 import { projectOffset, projectOutputDir } from "../../project-shared.ts";
 import { resolveInputTarget } from "../../project-index.ts";
 import {
-  kAriaLabel,
   kCollapseBelow,
   kCollapseLevel,
   kSidebarMenus,

src/resources/projects/website/templates/navicon.ejs

@@ -1,7 +1,7 @@
 
 <% if(item.icon) { %> 
 <i 
-  class="bi <%- item.icon %>" 
+  class="bi <%- item.icon.startsWith('bi-') ? item.icon : 'bi-' + item.icon %>" 
   role="img" 
 <% if(item["aria-label"]){ %> 
   aria-label="<%- item["aria-label"] %>" 

src/resources/projects/website/templates/sidebaritem.ejs

@@ -1,7 +1,7 @@
 <% if (item.href && item.text && !item.contents) { %>
 <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="<%- item.href %>" class="sidebar-item-text sidebar-link<%- item.active ? " active" : "" %>"<%- item.target ? ` target="${item.target}"` : "" %>><%= item.text %></a>
+  <a href="<%- item.href %>" class="sidebar-item-text sidebar-link<%- item.active ? " active" : "" %>"<%- item.target ? ` target="${item.target}"` : "" %>><% partial('navicon.ejs', { item }) %> <span class="menu-text"><%- item.text %></span></a>
   </div>
 </li>
 <% } else if (item.contents && item.text) { %>  
@@ -17,9 +17,9 @@
     <% if (item.contents.length > 0) { %>
       <div class="sidebar-item-container"> 
           <% if (item.href) { %>
-            <a href="<%- item.href %>" class="sidebar-item-text sidebar-link<%- item.active ? " active" : "" %>"<%- item.target ? ` target="${item.target}"` : "" %>><%= item.text %></a>
+            <a href="<%- item.href %>" class="sidebar-item-text sidebar-link<%- item.active ? " active" : "" %>"<%- item.target ? ` target="${item.target}"` : "" %>><% partial('navicon.ejs', { item }) %> <span class="menu-text"><%- item.text %></span></a>
           <% } else { %> 
-            <a class="sidebar-item-text sidebar-link text-start<%- isCollapsed ? " collapsed" : "" %>" data-bs-toggle="collapse" data-bs-target="#<%- sectionId %>" aria-expanded="<%- isCollapsed ? "false" : "true" %>"><%= item.text %></a>
+            <a class="sidebar-item-text sidebar-link text-start<%- isCollapsed ? " collapsed" : "" %>" data-bs-toggle="collapse" data-bs-target="#<%- sectionId %>" aria-expanded="<%- isCollapsed ? "false" : "true" %>"><% partial('navicon.ejs', { item }) %> <span class="menu-text"><%- item.text %></span></a>
           <% }  %>      
           <a class="sidebar-item-toggle text-start<%- isCollapsed ?  " collapsed" : "" %>" data-bs-toggle="collapse" data-bs-target="#<%- sectionId %>" aria-expanded="<%- isCollapsed ? "false" : "true" %>">
             <i class="bi bi-chevron-right ms-2"></i>
@@ -31,14 +31,14 @@
         <% }) %>
       </ul>
     <% } else { %>
-      <span class="sidebar-item-text sidebar-link text-start"><%= item.text %></span>
+      <span class="sidebar-item-text sidebar-link text-start"><% partial('navicon.ejs', { item }) %> <span class="menu-text"><%- item.text %></span></span>
     <% } %>
 
   </li>
 <% } else if (item.text && item.text.match(/^\-+$/)) { %>
 <li class="px-0"><hr class="sidebar-divider hi <%- borderColor %>"></li>
 <% } else if (item.text) { %>
   <li class="sidebar-item">
-  <%= item.text %>
+    <% partial('navicon.ejs', { item }) %> <span class="menu-text"><%- item.text %></span>
   </li>
 <% } %>