...

ET/Web/Layout/NavMenu.razor

@@ -27,15 +27,16 @@
             </NavLink>
         </div>
 
-        <div class="nav-item px-3 nav-section-header">Documentation</div>
-
-        @if (notes == null)
+        @if (groupedNotes == null)
         {
             <div class="nav-item px-3"><span class="nav-link text-secondary">Loading...</span></div>
         }
         else
         {
-            @foreach (var note in notes)
+            @foreach (var group in groupedNotes)
+            {
+                <div class="nav-item px-3 nav-section-header">@group.Category</div>
+                @foreach (var note in group.Notes)
                 {
                     <div class="nav-item px-3 nav-item-doc">
                         <NavLink class="nav-link" href="@($"docs/{note.Slug}")">
@@ -44,12 +45,13 @@
                     </div>
                 }
             }
+        }
     </nav>
 </div>
 
 @code {
     private bool collapseNavMenu = true;
-    private List<Web.Models.NoteInfo>? notes;
+    private List<NoteGroup>? groupedNotes;
 
     private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
 
@@ -61,6 +63,16 @@
     protected override async Task OnInitializedAsync()
     {
         var index = await DocsService.GetIndexAsync();
-        notes = index.Notes.OrderBy(n => n.Title).ToList();
+        groupedNotes = (index.Notes ?? new())
+            .GroupBy(n => string.IsNullOrEmpty(n.Category) ? "Uncategorized" : n.Category)
+            .OrderBy(g => g.Key)
+            .Select(g => new NoteGroup { Category = g.Key, Notes = g.OrderBy(n => n.Title).ToList() })
+            .ToList();
+    }
+
+    private class NoteGroup
+    {
+        public string Category { get; set; } = "";
+        public List<Web.Models.NoteInfo> Notes { get; set; } = new();
     }
 }