aliasvault/apps/server/AliasVault.Admin/Main/Layout/TopMenu.razor

@inherits MainBase
@implements IDisposable

<header>
    <nav class="fixed z-30 w-full border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 py-3 px-4 bg-white">
        <div class="flex justify-between items-center max-w-screen-2xl mx-auto relative">
            <div class="flex justify-start items-center">
                <a href="@NavigationService.BaseUri" class="flex mr-14 flex-shrink-0">
                    <img src="/img/logo.svg" class="mr-3 h-8" alt="AliasVault Logo">
                    <span class="self-center flex text-2xl font-semibold whitespace-nowrap dark:text-white">AliasVault</span>
                    <span class="ps-2 self-center flex text-sm font-bold whitespace-nowrap text-white bg-red-600 rounded-full px-2 py-1 ml-2">Admin</span>
                </a>

                <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1">
                    <ul class="flex flex-col mt-4 space-x-6 text-sm font-medium lg:flex-row xl:space-x-8 lg:mt-0">
                        <NavLink href="users" class="block text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-white" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                            Users
                        </NavLink>
                        <NavLink href="emails" class="block text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-white" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                            Emails
                        </NavLink>
                        <NavLink href="logging/general" class="block text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-white" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                            General logs
                        </NavLink>
                        <NavLink href="logging/auth" class="block text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-white" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                            Auth logs
                        </NavLink>
                        <NavLink href="settings/server" class="block text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-white" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                            Server settings
                        </NavLink>
                    </ul>
                </div>
            </div>
            <div class="flex justify-end items-center lg:order-2">
                    <div class="hidden md:block">
                        <ServiceControl ServiceNames="@(new List<string> { "AliasVault.SmtpService", "AliasVault.TaskRunner" })"
                                ServiceDisplayNames="@(new Dictionary<string, string>
                                {
                                    { "AliasVault.SmtpService", "Smtp" },
                                    { "AliasVault.TaskRunner", "Tasks" }
                                })" />
                    </div>
                    <button id="theme-toggle" data-tooltip-target="tooltip-toggle" type="button" class="hidden md:block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
                    <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
                    <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                </button>
                <div id="tooltip-toggle" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(1377px, 60px, 0px);">
                    Toggle dark mode
                    <div class="tooltip-arrow" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(68.5px, 0px, 0px);"></div>
                </div>

                <button @onclick="ToggleMenu" type="button" class="flex mx-3 text-sm rounded-full md:mr-0 flex-shrink-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="userMenuDropdownButton" aria-expanded="false" data-dropdown-toggle="userMenuDropdown">
                    <span class="sr-only">Open user menu</span>
                      <div class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
                             <span class="text-primary-600 dark:text-primary-300 text-lg font-medium">A</span>
                    </div>
                </button>

                @if (isMenuOpen)
                {
                    <div class="absolute top-[38px] right-0 z-50 my-4 w-56 text-base list-none bg-white rounded-b-lg divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600" id="userMenuDropdown" data-popper-placement="bottom">
                        <div class="py-3 px-4">
                            <span class="block text-sm font-semibold text-gray-900 dark:text-white">@_username</span>
                        </div>
                        <ul class="py-1 font-light text-gray-500 dark:text-gray-400" aria-labelledby="userMenuDropdownButton">
                            <li>
                                <a href="account/manage/change-password" class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Account settings</a>
                            </li>
                        </ul>
                        <ul class="py-1 font-light text-gray-500 dark:text-gray-400" aria-labelledby="dropdown">
                            <li>
                                <a href="user/logout" class="block py-2 px-4 font-bold text-sm text-primary-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-primary-200 dark:hover:text-white">Sign out</a>
                            </li>
                        </ul>
                    </div>
                }

                <button @onclick="ToggleMobileMenu" type="button" id="toggleMobileMenuButton" class="flex items-center p-2 text-gray-500 rounded-lg ml-1 lg:hidden hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
                    <span class="sr-only">Open menu</span>
                    <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                </button>
            </div>
        </div>
    </nav>
    @if (isMobileMenuOpen)
    {
        <nav class="bg-white dark:bg-gray-900">
            <ul id="mobileMenu" class="flex-col mt-0 pt-16 w-full text-sm font-medium lg:hidden">
                <li class="block border-b dark:border-gray-700">
                    <NavLink href="./" class="block py-3 px-4 text-gray-900 lg:py-0 dark:text-white lg:hover:underline lg:px-0" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                        Home
                    </NavLink>
                </li>
                <li class="block border-b dark:border-gray-700">
                    <NavLink href="users" class="block py-3 px-4 text-gray-900 lg:py-0 dark:text-white lg:hover:underline lg:px-0" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                        Users
                    </NavLink>
                </li>
                <li class="block border-b dark:border-gray-700">
                    <NavLink href="emails" class="block py-3 px-4 text-gray-900 lg:py-0 dark:text-white lg:hover:underline lg:px-0" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                        Emails
                    </NavLink>
                </li>
                <li class="block border-b dark:border-gray-700">
                    <NavLink href="logging/general" class="block py-3 px-4 text-gray-900 lg:py-0 dark:text-white lg:hover:underline lg:px-0" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                        General logs
                    </NavLink>
                </li>
                <li class="block border-b dark:border-gray-700">
                    <NavLink href="logging/auth" class="block py-3 px-4 text-gray-900 lg:py-0 dark:text-white lg:hover:underline lg:px-0" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                        Auth logs
                    </NavLink>
                </li>
                <li class="block border-b dark:border-gray-700">
                    <NavLink href="settings/server" class="block py-3 px-4 text-gray-900 lg:py-0 dark:text-white lg:hover:underline lg:px-0" ActiveClass="text-primary-700 dark:text-primary-500" Match="NavLinkMatch.All">
                        Server settings
                    </NavLink>
                </li>
            </ul>
        </nav>
    }
</header>

@code {
    private bool isMenuOpen = false;
    private bool isMobileMenuOpen = false;
    private string _username { get; set; } = "";

    /// <summary>
    /// Close the menu.
    /// </summary>
    [JSInvokable]
    public void CloseMenu()
    {
        isMenuOpen = false;
        isMobileMenuOpen = false;
        StateHasChanged();
    }

    /// <summary>
    /// Dispose method.
    /// </summary>
    public void Dispose()
    {
        NavigationService.LocationChanged -= LocationChanged;
    }

    /// <inheritdoc />
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        _username = GetUsername();
        NavigationService.LocationChanged += LocationChanged;
    }

    /// <inheritdoc />
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            await Js.InvokeVoidAsync("window.initTopMenu");
            DotNetObjectReference<TopMenu> objRef = DotNetObjectReference.Create(this);
            await Js.InvokeVoidAsync("window.registerClickOutsideHandler", objRef);
        }
    }

    private void LocationChanged(object? sender, LocationChangedEventArgs e)
    {
        isMenuOpen = false;
        isMobileMenuOpen = false;
        StateHasChanged();
    }

    private void ToggleMenu()
    {
        isMenuOpen = !isMenuOpen;
    }

    private void ToggleMobileMenu()
    {
        isMobileMenuOpen = !isMobileMenuOpen;
    }
}