NavMenu.razor

@namespace LumexUI.Docs.Client.Components

<nav class="lg:text-sm lg:leading-6">
    <div class="sticky top-0 pointer-events-none">
        <div class="h-10 bg-gradient-to-b from-background"></div>
    </div>
    <ul class="space-y-8">
        @foreach( var category in NavigationStore.GetNavigation().Categories )
        {
            RenderCategory( __builder, category );
        }
    </ul>
</nav>

@code {
    private void RenderCategory( RenderTreeBuilder __builder, NavigationCategory category )
    {
        <li>
            <div class="flex items-center gap-2 mb-3 text-foreground">
                <h5 class="text-foreground-900 font-semibold">
                    @category.Name
                </h5>
            </div>
            <ul class="space-y-2 border-l border-divider">
                @foreach( var item in category.Items )
                {
                    RenderItem( __builder, item, category.Name );
                }
            </ul>
        </li>
    }

    private void RenderItem( RenderTreeBuilder __builder, NavigationItem item, string categoryName )
    {
        var formattedName = item.Name.Replace( "Lumex", "" ).SplitPascalCase();

        if( categoryName is "Components API" )
        {
            <li>
                <LumexLink Href="@($"docs/api/{formattedName.ToKebabCase()}")"
                           Match="@NavLinkMatch.Prefix"
                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current">
                    @item.Name.Replace( "Lumex", "" )
                </LumexLink>
            </li>
        }
        else
        {
            var styles = ElementClass.Default( "flex items-center gap-2" )
                .Add( ElementClass.Empty()
                    .Add( "opacity-disabled" )
                    .Add( "pointer-events-none" ), when: item.Status.HasValue && item.Status.Value is PageStatus.Soon )
                .ToString();

            <li class="@styles">
                <LumexLink Href="@($"docs/{categoryName.ToKebabCase()}/{formattedName.ToKebabCase()}")"
                           Match="@NavLinkMatch.Prefix"
                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current">
                    @formattedName
                </LumexLink>
                <NavItemBadge Status="@item.Status" />
            </li>
        }
    }
}