Navigation components

@if (TableOfContents != null)
{
    <nav>
        <ul class="flex flex-col @ListGapClass">
            @foreach (var tableOfContentEntry in TableOfContents.OrderBy(i => i.Order))
            {
                @TocEntry(tableOfContentEntry)
            }
        </ul>
    </nav>
}
  
@code {
    /// <summary>Navigation tree to render; when null the component renders nothing, and entries are sorted by <see cref="NavigationTreeItem.Order"/> at each level.</summary>
    [Parameter] public ImmutableList<NavigationTreeItem>? TableOfContents { get; set; }
  
    /// <summary>Optional label forwarded from the caller's <c>NavigationInfo.SectionName</c>; not rendered by the default template.</summary>
    [Parameter] public string? SectionLabel { get; set; }
  
    /// <summary>CSS classes applied to the outer <c>&lt;ul&gt;</c> that holds the top-level navigation entries.</summary>
    [Parameter] public string ListGapClass { get; set; } = "gap-4";
  
    /// <summary>CSS classes applied to the nested <c>&lt;ul&gt;</c> that holds a section's child entries.</summary>
    [Parameter] public string ChildListClass { get; set; } = "mt-4";
  
    /// <summary>Layout and typography classes applied to the section-header element.</summary>
    [Parameter] public string SectionHeaderStructureClass { get; set; } = "font-display font-medium first:pt-0";
  
    /// <summary>CSS classes applied to section-header text — both the plain <c>&lt;div&gt;</c> for empty-route entries and the <c>&lt;a&gt;</c> when a top-level entry has children.</summary>
    [Parameter] public string SectionHeaderColorClass { get; set; } = "text-base-900 dark:text-base-50";
  
    /// <summary>Layout and typography classes applied to each child-level <c>&lt;a&gt;</c> element under a section.</summary>
    [Parameter] public string LinkStructureClass { get; set; } = "block text-sm w-full border-l pl-3.5 py-1.5";
  
    /// <summary>CSS classes applied to each child-level <c>&lt;a&gt;</c> for color and <c>data-current=true</c> state, composed after <see cref="LinkStructureClass"/>.</summary>
    [Parameter] public string LinkColorClass { get; set; } = "transition-colors transition-300 border-base-300 dark:border-base-800 data-[current=true]:border-primary-400 text-base-500 dark:text-base-400 data-[current=true]:text-primary-800 dark:data-[current=true]:text-primary-500 hover:text-accent-400 dark:hover:text-base-50";
  
    /// <summary>Layout classes applied to a leaf root-level <c>&lt;a&gt;</c> when a top-level entry has no children.</summary>
    [Parameter] public string RootLinkStructureClass { get; set; } = "block w-full py-1";
  
    /// <summary>CSS classes applied to a leaf root-level <c>&lt;a&gt;</c> (a top-level entry with no children), composed after <see cref="RootLinkStructureClass"/>.</summary>
    [Parameter] public string RootLinkColorClass { get; set; } = "transition-colors transition-300 text-base-700 dark:text-base-400 data-[current=true]:text-primary-800 dark:data-[current=true]:text-primary-500 hover:text-accent-400 dark:hover:text-base-50";
  
  
    private RenderFragment TocEntry(NavigationTreeItem tocEntry) =>
        @<li class="block">
            @if (tocEntry.Route.CanonicalPath.Value == "")
            {
                <div class="@SectionHeaderStructureClass @SectionHeaderColorClass">@tocEntry.Title</div>
            }
            else
            {
                <a data-current="@tocEntry.IsSelected.ToString().ToLowerInvariant()" href="@tocEntry.Route.CanonicalPath.Value" class="@(tocEntry.Children.Count == 0 ? RootLinkStructureClass + " " + RootLinkColorClass : SectionHeaderStructureClass + " " + SectionHeaderColorClass)">@tocEntry.Title</a>
            }
            @if (tocEntry.Children.Count > 0)
            {
                <ul class="@ChildListClass">
                    @foreach (var childEntry in tocEntry.Children.OrderBy(i => i.Order).Where(i => i.Route.CanonicalPath.Value != ""))
                    {
                        <li class="block">
                            <a data-current="@childEntry.IsSelected.ToString().ToLowerInvariant()" href="@childEntry.Route.CanonicalPath.Value" class="@LinkStructureClass @LinkColorClass">@childEntry.Title</a>
                        </li>
                    }
                </ul>
            }
        </li>;
}

<div data-role="page-outline" data-content-selector="@ContentSelector" class="relative @ContainerStructureClass @ContainerColorClass">
    <div data-role="page-outline-highlighter" class="absolute transition-all duration-500 opacity-0 left-[-1px] w-[1px] bg-primary-400"></div>
    <div>
        <ul class="@ListStructureClass @ListColorClass"
            data-outline-link-structure-class="@OutlineLinkStructureClass"
            data-outline-link-color-class="@OutlineLinkColorClass">
            @* Outline links will be dynamically generated by JavaScript *@
        </ul>
    </div>
</div>
  
@code {
    /// <summary>CSS selector the client-side outline script queries to discover heading elements; must be non-empty for the outline to populate.</summary>
    [Parameter, EditorRequired] public string ContentSelector { get; set; } = "";
  
    /// <summary>Textual label accepted for parity with other outline skins; not rendered by the default template.</summary>
    [Parameter] public string Title { get; set; } = "On This Page";
  
    /// <summary>Layout and border classes applied to the outer <c>data-role="page-outline"</c> container.</summary>
    [Parameter] public string ContainerStructureClass { get; set; } = "border-l border-base-200 dark:border-base-800";
  
    /// <summary>CSS classes applied to the outer container for color treatment, composed after <see cref="ContainerStructureClass"/>.</summary>
    [Parameter] public string ContainerColorClass { get; set; } = "";
  
    /// <summary>Layout classes applied to the outline <c>&lt;ul&gt;</c>.</summary>
    [Parameter] public string ListStructureClass { get; set; } = "list-none pl-4" ;
  
    /// <summary>CSS classes applied to the <c>&lt;ul&gt;</c> that holds outline links, composed after <see cref="ListStructureClass"/>.</summary>
    [Parameter] public string ListColorClass { get; set; } = "text-neutral-500 dark:text-neutral-400";
  
    /// <summary>CSS classes emitted on the container as <c>data-outline-link-color-class</c> and applied by the client-side script to each generated <c>&lt;li&gt;&lt;a&gt;</c> for color and <c>data-selected=true</c> state.</summary>
    [Parameter] public string OutlineLinkColorClass { get; set; } = "transition-colors duration-250 hover:text-base-900 dark:hover:text-base-50/90 data-[selected=true]:text-base-800 dark:data-[selected=true]:text-base-50";
  
    /// <summary>Layout classes emitted on the container as <c>data-outline-link-structure-class</c> and applied by the client-side script to each generated <c>&lt;li&gt;&lt;a&gt;</c>.</summary>
    [Parameter] public string OutlineLinkStructureClass { get; set; } = "py-1 ml-[calc(-1*(4em-1px))] pl-[calc(4em+1px)] ";
}

/// <summary>Page-scoped navigation context exposed to layouts and components.</summary>
/// <param name="SectionName">Label of the containing top-level section, or null if none.</param>
/// <param name="SectionRoute">Route of the containing top-level section, or null if none.</param>
/// <param name="Breadcrumbs">Breadcrumb trail from the site root to the current page.</param>
/// <param name="PageTitle">Title of the current page.</param>
/// <param name="PreviousPage">Previous page in reading order, or null at the start.</param>
/// <param name="NextPage">Next page in reading order, or null at the end.</param>
public record NavigationInfo(
    string? SectionName,
    ContentRoute? SectionRoute,
    ImmutableList<BreadcrumbItem> Breadcrumbs,
    string PageTitle,
    NavigationTreeItem? PreviousPage,
    NavigationTreeItem? NextPage
);