LayoutLib.Layout/Components/NavMenu1.razor

@using Microsoft.Extensions.Localization
@using Microsoft.JSInterop
@using Common
@inject IStringLocalizer<SharedRes> Loc
@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<header class="navbar w-full bg-transparent absolute z-30">
    <nav class="navbar-start bg-transparent">
        <a class="btn btn-ghost text-xl font-bold text-primary" href="/">@Loc["MassTech"]</a>
    </nav>
    <div class="navbar-end lg:flex">
        <!-- Mobile Hamburger Dropdown -->
        <div class="dropdown dropdown-end lg:hidden">
            <div tabindex="0" role="button" class="btn btn-ghost text-primary">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
                </svg>
            </div>
            <ul tabindex="0"
                class="menu menu-sm dropdown-content bg-base-100 rounded-box z-50 mt-3 w-56 p-3 shadow-2xl border border-base-300">
                <li class="my-1">
                    <a class="text-base font-bold text-primary hover:bg-primary/10 rounded-lg" href="/" data-close-dropdown>@Loc["Home"]</a>
                </li>
                <li class="my-1">
                    <a class="text-base font-bold text-primary hover:bg-primary/10 rounded-lg" href="/categories" data-close-dropdown>@Loc["Categories"]</a>
                </li>
                <li class="my-1">
                    <a class="text-base font-bold text-primary hover:bg-primary/10 rounded-lg" href="/shop?IsBundle=true" data-close-dropdown>@Loc["Bundles"]</a>
                </li>
                <li class="my-1">
                    <a class="text-base font-bold text-primary hover:bg-primary/10 rounded-lg" href="/shop?IsBundle=false" data-close-dropdown>@Loc["Products"]</a>
                </li>
                <li class="my-1">
                    <a class="text-base font-bold text-primary hover:bg-primary/10 rounded-lg" href="/about" data-close-dropdown>@Loc["About"]</a>
                </li>
                <li class="my-1">
                    <a class="text-base font-bold text-primary hover:bg-primary/10 rounded-lg" href="/contact" data-close-dropdown>@Loc["Contact"]</a>
                </li>
                <li class="my-1">
                    <LanguageSwitcher SupportedCultures='["en", "ar", "de", "es", "fr"]'></LanguageSwitcher>
                </li>
            </ul>
        </div>

        <!-- Desktop Menu -->
        <ul class="menu menu-horizontal hidden lg:flex px-1 items-center">
            <li>
                <a class="nav-link" href="/">@Loc["Home"]</a>
            </li>

            <!-- Search Dropdown using DaisyUI's native CSS focus behavior -->
            <li class="search-item">
                <details @ref="searchDetails">
                    <summary class="nav-link flex items-center gap-1 list-none cursor-pointer">
                        @Loc["Search"]
                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="h-3 w-3 transition-transform duration-200 details-chevron"
                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7" />
                        </svg>
                    </summary>
                    <ul class="search-dropdown-menu" data-search-menu>
                        <li>
                            <a class="nav-link block w-full" href="/categories" data-close-dropdown>@Loc["Categories"]</a>
                        </li>
                        <li>
                            <a class="nav-link block w-full" href="/shop?IsBundle=true" data-close-dropdown>@Loc["Bundles"]</a>
                        </li>
                        <li>
                            <a class="nav-link block w-full" href="/shop?IsBundle=false" data-close-dropdown>@Loc["Products"]</a>
                        </li>
                    </ul>
                </details>
            </li>

            <li>
                <a class="nav-link" href="/about">@Loc["About"]</a>
            </li>

            <li>
                <a class="nav-link" href="/contact">@Loc["Contact"]</a>
            </li>

            <li>
                <LanguageSwitcher SupportedCultures='["en", "ar", "de", "es", "fr"]'></LanguageSwitcher>
            </li>
        </ul>
    </div>
</header>

<style>
    .nav-link {
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 1rem;
        color: #fb923c;
        text-decoration: none;
        transition: all 0.2s ease;
        display: inline-block;
        cursor: pointer;
    }
    .nav-link:hover {
        background-color: rgba(251, 146, 60, 0.1);
    }
    .nav-link:focus {
        outline: none;
    }
    .nav-link:visited {
        color: #fb923c;
    }
    .nav-link:active {
        color: #fb923c;
    }

    /* Custom Search Dropdown */
    .search-item {
        position: relative;
        display: inline-flex;
        align-items: center;
    }
    .search-item details {
        position: relative;
        display: inline-block;
    }
    .search-item details > summary {
        display: inline-flex;
        align-items: center;
        list-style: none;
    }
    .search-item details > summary::-webkit-details-marker {
        display: none;
    }
    .search-item details[open] > summary .details-chevron {
        transform: rotate(180deg);
    }
    /* Hide the content when not open */
    .search-item details:not([open]) > ul {
        display: none;
    }
    .search-dropdown-menu {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 0;
        background-color: #ffffff;
        border-radius: 1rem;
        z-index: 50;
        width: 14rem;
        padding: 0.75rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        border: 1px solid #e5e7eb;
        list-style: none;
        margin: 0;
    }
    .search-dropdown-menu li {
        list-style: none;
        margin: 0.25rem 0;
    }
</style>

@code {
    private ElementReference searchDetails;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Attach click handler to all [data-close-dropdown] elements
            // When clicked, remove the 'open' attribute from parent <details>
            await JSRuntime.InvokeVoidAsync("eval", @"
                document.addEventListener('click', function(e) {
                    var target = e.target.closest('[data-close-dropdown]');
                    if (target) {
                        var details = target.closest('details');
                        if (details) {
                            details.removeAttribute('open');
                        }
                    }
                });
            ");
        }
    }

    public async ValueTask DisposeAsync()
    {
        // Cleanup if needed
        await Task.CompletedTask;
    }
}