...

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">
+        <div class="nav-item px-3 nav-section-header">Documentation</div>
-                <span class="bi bi-file-text-nav-menu" aria-hidden="true"></span> Docs
+
-            </NavLink>
+        @if (notes == null)
-        </div>
+        {
+            <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;

ET/Web/Pages/Docs.razor

@@ -1,38 +1,7 @@
 @page "/docs"
-@inject Web.Services.DocsService DocsService
 
 <PageTitle>Docs</PageTitle>
 
 <h1>Documentation</h1>
 
-@if (notes == null)
+<p>Select a note from the sidebar to view its contents.</p>
-{
-    <p>Loading...</p>
-}
-else
-{
-    <div class="docs-grid">
-        @foreach (var note in notes.OrderBy(n => n.Title))
-        {
-            <a href="/docs/@note.Slug" class="docs-card">
-                <h3>
-                    @note.Title
-                    @if (!string.IsNullOrEmpty(note.Category))
-                    {
-                        <span class="category-badge">@note.Category</span>
-                    }
-                </h3>
-            </a>
-        }
-    </div>
-}
-
-@code {
-    private List<Web.Models.NoteInfo>? notes;
-
-    protected override async Task OnInitializedAsync()
-    {
-        var index = await DocsService.GetIndexAsync();
-        notes = index.Notes;
-    }
-}