...

ET/Web/Layout/MainLayout.razor

@@ -2,6 +2,7 @@
 <div class="page">
     <div class="sidebar">
         <NavMenu/>
+        
     </div>
 
     <main>

ET/Web/Layout/NavMenu.razor

@@ -1,4 +1,6 @@
-<div class="top-row ps-3 navbar navbar-dark">
+@inject Web.Services.DocsService DocsService
+
+<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
         <a class="navbar-brand" href="">Web</a>
         <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
@@ -24,16 +26,30 @@
                 <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
             </NavLink>
         </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="docs">
-                <span class="bi bi-file-text-nav-menu" aria-hidden="true"></span> Docs
-            </NavLink>
-        </div>
+
+        <div class="nav-item px-3 nav-section-header">Documentation</div>
+
+        @if (notes == null)
+        {
+            <div class="nav-item px-3"><span class="nav-link text-secondary">Loading...</span></div>
+        }
+        else
+        {
+            @foreach (var note in notes)
+            {
+                <div class="nav-item px-3 nav-item-doc">
+                    <NavLink class="nav-link" href="@($"docs/{note.Slug}")">
+                        @note.Title
+                    </NavLink>
+                </div>
+            }
+        }
     </nav>
 </div>
 
 @code {
     private bool collapseNavMenu = true;
+    private List<Web.Models.NoteInfo>? notes;
 
     private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
 
@@ -42,4 +58,9 @@
         collapseNavMenu = !collapseNavMenu;
     }
 
-}
+    protected override async Task OnInitializedAsync()
+    {
+        var index = await DocsService.GetIndexAsync();
+        notes = index.Notes.OrderBy(n => n.Title).ToList();
+    }
+}

ET/Web/Layout/NavMenu.razor.css

@@ -65,6 +65,23 @@
     color: white;
 }
 
+.nav-item-doc ::deep a {
+    padding-left: 1.5rem !important;
+    font-size: 0.8rem;
+    height: 2rem !important;
+    line-height: 2rem !important;
+}
+
+.nav-section-header {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: rgba(255,255,255,0.5);
+    padding-top: 1rem;
+    padding-bottom: 0.25rem;
+}
+
 @media (min-width: 641px) {
     .navbar-toggler {
         display: none;