DocsSection.razor

@namespace LumexUI.Docs.Client.Components
@inject NavigationManager NavigationManager

@using LumexUI.Shared.Icons

<CascadingValue TValue="DocsSection" Value="@this" IsFixed="@true">
    <LumexComponent As="@(IsSubsection ? "h3" : "h2")"
                    id="@_id">
        <LumexLink Href="@($"{RelativePath}#{_id}")"
                   Color="@ThemeColor.None">
            @Title
            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-default-900/10 hover:ring-orange-300 hover:bg-orange-400/10 hover:text-orange-500 dark:text-foreground-500 dark:hover:ring-orange-300/60 dark:hover:text-orange-200">
                <Link2Icon Size="16" />
            </span>
        </LumexLink>
    </LumexComponent>
    @ChildContent
</CascadingValue>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public string? Title { get; set; }

    [CascadingParameter] private DocsSection? Parent { get; set; }

    private bool IsSubsection => Parent is not null;
    private string RelativePath => NavigationManager.ToBaseRelativePath( NavigationManager.Uri );

    private string? _id;

    protected override void OnInitialized()
    {
        _id = Title?.ToKebabCase();
    }
}