Moonlight/Moonlight.Client/UI/Partials/AppSidebar.razor

@using Moonlight.Client.Interfaces
@using Moonlight.Client.Models
@using Moonlight.Client.UI.Layouts

@inject NavigationManager Navigation
@inject IEnumerable<ISidebarItemProvider> SidebarItemProviders

@{
    var url = new Uri(Navigation.Uri);
}

<div class="relative z-50 lg:hidden transition-opacity ease-linear duration-300 @(Layout.ShowMobileNavigation ? "opacity-100" : "opacity-0 pointer-events-none")" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-gray-900/80"></div>

    <div class="fixed inset-0 flex">
        <div class="relative mr-16 flex w-full max-w-xs flex-1 transition ease-in-out duration-300 transform @(Layout.ShowMobileNavigation ? "translate-x-0" : "-translate-x-full")">
            <div class="absolute left-full top-0 flex w-16 justify-center pt-5 ease-in-out duration-300 @(Layout.ShowMobileNavigation ? "opacity-100" : "opacity-0")">
                <button @onclick="Layout.ToggleMobileNavigation" type="button" class="-m-2.5 p-2.5">
                    <span class="sr-only">Close sidebar</span>
                    <i class="icon-x text-lg"></i>
                </button>
            </div>

            <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
                <div class="flex h-16 shrink-0 items-center">
                    <img class="h-8 w-auto" src="/logo.svg"
                         alt="Your Company">
                </div>
                
                <nav class="flex flex-1 flex-col">
                    <ul role="list" class="flex flex-1 flex-col gap-y-7">
                        @foreach (var group in Items)
                        {
                            <li>
                                @if (!string.IsNullOrEmpty(group.Key))
                                {
                                    <div class="text-xs font-semibold leading-6 text-gray-400">
                                        @group.Key
                                    </div>
                                }

                                <ul role="list" class="-mx-2 space-y-1">
                                    @foreach (var item in group.Value)
                                    {
                                        var isMatch = item.RequiresExactMatch
                                            ? url.LocalPath == item.Path
                                            : url.LocalPath.StartsWith(item.Path);

                                        <li>
                                            @if (isMatch)
                                            {
                                                <a href="@item.Path"
                                                   class="bg-gray-800 text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 items-center">
                                                    <i class="ms-1 text-lg shrink-0 @item.Icon"></i>
                                                    @item.Name
                                                </a>
                                            }
                                            else
                                            {
                                                <a href="@item.Path"
                                                   class="text-gray-300 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 items-center">
                                                    <i class="ms-1 text-lg shrink-0 @item.Icon"></i>
                                                    @item.Name
                                                </a>
                                            }
                                        </li>
                                    }
                                </ul>
                            </li>
                        }
                    </ul>
                </nav>
                
            </div>
        </div>
    </div>
</div>

<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
    <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-800/60 px-6 pb-4">
        <div class="flex h-16 shrink-0 items-center">
            <img class="h-8 w-auto" src="/svg/logo.svg"
                 alt="Your Company">
        </div>
        <nav class="flex flex-1 flex-col">
            <ul role="list" class="flex flex-1 flex-col gap-y-7">
                @foreach (var group in Items)
                {
                    <li>
                        @if (!string.IsNullOrEmpty(group.Key))
                        {
                            <div class="text-xs font-semibold leading-6 text-gray-400 my-2">
                                @group.Key
                            </div>
                        }

                        <ul role="list" class="-mx-2 space-y-1">
                            @foreach (var item in group.Value)
                            {
                                var isMatch = item.RequiresExactMatch
                                    ? url.LocalPath == item.Path
                                    : url.LocalPath.StartsWith(item.Path);

                                <li>
                                    @if (isMatch)
                                    {
                                        <a href="@item.Path"
                                           class="bg-gray-800 text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 items-center">
                                            <i class="ms-1 text-lg shrink-0 @item.Icon"></i>
                                            @item.Name
                                        </a>
                                    }
                                    else
                                    {
                                        <a href="@item.Path"
                                           class="text-gray-300 hover:text-white hover:bg-gray-800 group flex gap-x-3 rounded-md p-2 text-sm leading-6 items-center">
                                            <i class="ms-1 text-lg shrink-0 @item.Icon"></i>
                                            @item.Name
                                        </a>
                                    }
                                </li>
                            }
                        </ul>
                    </li>
                }
            </ul>
        </nav>
    </div>
</div>

@code
{
    [Parameter] public MainLayout Layout { get; set; }

    private Dictionary<string, SidebarItem[]> Items = new();

    protected override void OnInitialized()
    {
        var sidebarItems = new List<SidebarItem>();

        foreach (var provider in SidebarItemProviders)
            provider.ModifySidebar(sidebarItems);

        Items = sidebarItems
            //.Where(x => x.Permission == null || (x.Permission != null && IdentityService.HasPermission(x.Permission)))
            .GroupBy(x => x.Group ?? "")
            .OrderByDescending(x => string.IsNullOrEmpty(x.Key))
            .ToDictionary(x => x.Key, x => x.OrderBy(y => y.Priority).ToArray());
    }

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender)
            return Task.CompletedTask;

        Layout.OnStateChanged += () => InvokeAsync(StateHasChanged);

        Navigation.LocationChanged += async (_, _) =>
        {
            if (!Layout.ShowMobileNavigation)
                return;

            await Layout.ToggleMobileNavigation();
        };

        return Task.CompletedTask;
    }
}