LayoutLib.Layout/Components/NavMenu1.razor

@using Microsoft.Extensions.Localization
@using Common
@inject IStringLocalizer<SharedRes> Loc
@inject NavigationManager Navigation

<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">
                <button type="button" class="nav-link flex items-center gap-1"
                    @onclick="ToggleSearchMenu"
                    @onblur="HandleBlur">
                    @Loc["Search"]
                    <svg xmlns="http://www.w3.org/2000/svg"
                        class="h-3 w-3 transition-transform duration-200 @(IsSearchOpen ? "rotate-180" : "")"
                        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>
                </button>
                @if (IsSearchOpen)
                {
                    <ul class="search-dropdown-menu" data-search-menu @onmousedown:preventDefault>
                        <li>
                            <a class="nav-link block w-full" href="/categories" @onclick="CloseSearchMenu">@Loc["Categories"]</a>
                        </li>
                        <li>
                            <a class="nav-link block w-full" href="/shop?IsBundle=true" @onclick="CloseSearchMenu">@Loc["Bundles"]</a>
                        </li>
                        <li>
                            <a class="nav-link block w-full" href="/shop?IsBundle=false" @onclick="CloseSearchMenu">@Loc["Products"]</a>
                        </li>
                    </ul>
                }
            </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;
    }
    .search-item > button {
        display: inline-flex;
        align-items: center;
    }
    .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 bool IsSearchOpen = false;

    private void ToggleSearchMenu()
    {
        IsSearchOpen = !IsSearchOpen;
    }

    private void CloseSearchMenu()
    {
        IsSearchOpen = false;
    }

    private async Task HandleBlur(FocusEventArgs e)
    {
        // Wait a tick - if user clicked a link, the click handler runs first
        // If they clicked outside, this closes the menu
        await Task.Delay(150);
        IsSearchOpen = false;
        StateHasChanged();
    }
}