Fix search dropdown: make details inline-block so summary appears as button beside other nav items

Components/NavMenu1.razor

@@ -1,7 +1,10 @@
 @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">
@@ -19,22 +22,22 @@
             <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="/">@Loc["Home"]</a>
+                    <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">@Loc["Categories"]</a>
+                    <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">@Loc["Bundles"]</a>
+                    <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">@Loc["Products"]</a>
+                    <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">@Loc["About"]</a>
+                    <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">@Loc["Contact"]</a>
+                    <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>
@@ -45,32 +48,32 @@
         <!-- Desktop Menu -->
         <ul class="menu menu-horizontal hidden lg:flex px-1 items-center">
             <li>
-                <a class="nav-link" href="/" data-nav="home">@Loc["Home"]</a>
+                <a class="nav-link" href="/">@Loc["Home"]</a>
             </li>
 
-            <li class="relative" @onmouseleave="CloseSearchMenu">
+            <!-- Search Dropdown using DaisyUI's native CSS focus behavior -->
-                <button type="button" @onclick="ToggleSearchMenu" @onfocus="OpenSearchMenu"
+            <li class="search-item">
-                    class="nav-link flex items-center gap-1">
+                <details @ref="searchDetails">
-                    @Loc["Search"]
+                    <summary class="nav-link flex items-center gap-1 list-none cursor-pointer">
-                    <svg xmlns="http://www.w3.org/2000/svg"
+                        @Loc["Search"]
-                        class="h-3 w-3 transition-transform duration-200 @(_searchOpen ? "rotate-180" : "")" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg"
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7" />
+                            class="h-3 w-3 transition-transform duration-200 details-chevron"
-                    </svg>
+                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                </button>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7" />
-                @if (_searchOpen)
+                        </svg>
-                {
+                    </summary>
-                    <ul class="absolute top-full right-0 mt-2 menu menu-sm bg-base-100 rounded-2xl z-50 w-56 p-3 shadow-2xl border border-base-300">
+                    <ul class="search-dropdown-menu" data-search-menu>
-                        <li class="my-1">
+                        <li>
-                            <a class="text-base font-bold text-primary hover:bg-primary/10 rounded-lg px-3 py-2 block" href="/categories" @onclick="CloseSearchMenu">@Loc["Categories"]</a>
+                            <a class="nav-link block w-full" href="/categories" data-close-dropdown>@Loc["Categories"]</a>
                         </li>
-                        <li class="my-1">
+                        <li>
-                            <a class="text-base font-bold text-primary hover:bg-primary/10 rounded-lg px-3 py-2 block" href="/shop?IsBundle=true" @onclick="CloseSearchMenu">@Loc["Bundles"]</a>
+                            <a class="nav-link block w-full" href="/shop?IsBundle=true" data-close-dropdown>@Loc["Bundles"]</a>
                         </li>
-                        <li class="my-1">
+                        <li>
-                            <a class="text-base font-bold text-primary hover:bg-primary/10 rounded-lg px-3 py-2 block" href="/shop?IsBundle=false" @onclick="CloseSearchMenu">@Loc["Products"]</a>
+                            <a class="nav-link block w-full" href="/shop?IsBundle=false" data-close-dropdown>@Loc["Products"]</a>
                         </li>
                     </ul>
-                }
+                </details>
             </li>
 
             <li>
@@ -98,6 +101,7 @@
         text-decoration: none;
         transition: all 0.2s ease;
         display: inline-block;
+        cursor: pointer;
     }
     .nav-link:hover {
         background-color: rgba(251, 146, 60, 0.1);
@@ -111,23 +115,78 @@
     .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 bool _searchOpen = false;
+    private ElementReference searchDetails;
 
-    private void ToggleSearchMenu()
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        _searchOpen = !_searchOpen;
+        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');
+                        }
+                    }
+                });
+            ");
+        }
     }
 
-    private void OpenSearchMenu()
+    public async ValueTask DisposeAsync()
     {
-        _searchOpen = true;
+        // Cleanup if needed
-    }
+        await Task.CompletedTask;
-
-    private void CloseSearchMenu()
-    {
-        _searchOpen = false;
     }
 }

obj/Debug/net10.0/LayoutLib.Layout.AssemblyInfo.cs

@@ -13,7 +13,7 @@ using System.Reflection;
 [assembly: System.Reflection.AssemblyCompanyAttribute("LayoutLib.Layout")]
 [assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")]
 [assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")]
-[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+9897e576f9ed6385b8ad195151fbac85d60fcd40")]
+[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+f60a818bfb0166641551296a497028c6df42c321")]
 [assembly: System.Reflection.AssemblyProductAttribute("LayoutLib.Layout")]
 [assembly: System.Reflection.AssemblyTitleAttribute("LayoutLib.Layout")]
 [assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")]

obj/Debug/net10.0/LayoutLib.Layout.AssemblyInfoInputs.cache

@@ -1 +1 @@
-ed6b21c978fffdfdba8705fa6e3c1b442f2d1eb1c52a63ad39a5e982352a628e
+1abdae089eab332962428ae4afadad4205bcedd1614519f57a8795ba197c6e51

obj/Debug/net10.0/rjsmcshtml.dswa.cache.json

@@ -1 +1 @@
-{"GlobalPropertiesHash":"sPqc4Sg6QmuYzPcoi06ylJfNLqqU6BZ36g8HacPs4NQ=","FingerprintPatternsHash":"gq3WsqcKBUGTSNle7RKKyXRIwh7M8ccEqOqYvIzoM04=","PropertyOverridesHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","InputHashes":["QxoAEi32sV90j1gOewnGlq68ZmINHD3g4IrVYLMcDGU=","cYRQaZ0Ky5MA4GLjUiViTE//NFXlRkH0DkdNEuFPD1s=","2FlIYAueYgO9MktfmLizXJ65RTr/rFinjMf2LHHud9A=","Le\u002BCN12a9Jbmis2zmQIovtxW1CuzMq/3750f8xxJVy0=","w9tDaDUnIhU5zj73g2saRixeTDhOK02Vo8bX3b0DpUg=","B1FHfq6JXWEoiqTnP9QBnybI4MQI5yj3q2\u002BWjcCO3zI=","T5H7JXFKwqAY2N\u002BJpeEci\u002BW\u002Be8BGpXfVSmgEIzdlRWY=","fRm1FniQu/w7kKDGs2gDOEieToe8U\u002BIvfd3fNayoIK4=","WrwJu7DXL\u002BPuNc1GKfi\u002B\u002BdCInAD3ja6T7VcsM6fdM2M=","\u002BWURRLeaTnrPmMEsYaNMDjD1RNdAjMeewUE4E8wwBMs=","NDVcq/sXlwzrWgCosvfQW7ZN3QxeknuD4lNDJVT4js8=","aEyPjuyDGmes7Rlp5CTOfqHNHMX\u002BYoCu0kOPwa\u002BWP/o=","S1wXokP6LBK7k4q1Rdmz7A49GqtNe/YNN5LK8EjWV\u002BY=","psimpoporwXVbXvmndjDuxXA7\u002Bp7cqHKB4u22N4cpYc=","A61mqj82uId\u002BMQffyG8jRs97ff90ZTfWqnkbqRwxbOc=","wdvZbQwEEjNZZTXYlxRk4IKvcFfC95QR2Lp7hf4V0Ew=","cL5YzfS0T8mPElQAee4xHUrnfHtMTacbuNjiaswt540="],"CachedAssets":{},"CachedCopyCandidates":{}}
+{"GlobalPropertiesHash":"sPqc4Sg6QmuYzPcoi06ylJfNLqqU6BZ36g8HacPs4NQ=","FingerprintPatternsHash":"gq3WsqcKBUGTSNle7RKKyXRIwh7M8ccEqOqYvIzoM04=","PropertyOverridesHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","InputHashes":["QxoAEi32sV90j1gOewnGlq68ZmINHD3g4IrVYLMcDGU=","cYRQaZ0Ky5MA4GLjUiViTE//NFXlRkH0DkdNEuFPD1s=","2FlIYAueYgO9MktfmLizXJ65RTr/rFinjMf2LHHud9A=","Le\u002BCN12a9Jbmis2zmQIovtxW1CuzMq/3750f8xxJVy0=","w9tDaDUnIhU5zj73g2saRixeTDhOK02Vo8bX3b0DpUg=","B1FHfq6JXWEoiqTnP9QBnybI4MQI5yj3q2\u002BWjcCO3zI=","T5H7JXFKwqAY2N\u002BJpeEci\u002BW\u002Be8BGpXfVSmgEIzdlRWY=","fRm1FniQu/w7kKDGs2gDOEieToe8U\u002BIvfd3fNayoIK4=","WrwJu7DXL\u002BPuNc1GKfi\u002B\u002BdCInAD3ja6T7VcsM6fdM2M=","\u002BWURRLeaTnrPmMEsYaNMDjD1RNdAjMeewUE4E8wwBMs=","NDVcq/sXlwzrWgCosvfQW7ZN3QxeknuD4lNDJVT4js8=","aEyPjuyDGmes7Rlp5CTOfqHNHMX\u002BYoCu0kOPwa\u002BWP/o=","S1wXokP6LBK7k4q1Rdmz7A49GqtNe/YNN5LK8EjWV\u002BY=","psimpoporwXVbXvmndjDuxXA7\u002Bp7cqHKB4u22N4cpYc=","MzsPbiUNcTwpdfJjIUwcb\u002B6PTkONRHzti7W1PFSlVX0=","wdvZbQwEEjNZZTXYlxRk4IKvcFfC95QR2Lp7hf4V0Ew=","cL5YzfS0T8mPElQAee4xHUrnfHtMTacbuNjiaswt540="],"CachedAssets":{},"CachedCopyCandidates":{}}

obj/Debug/net10.0/rjsmrazor.dswa.cache.json

@@ -1 +1 @@
-{"GlobalPropertiesHash":"aZS2WwHIge+vJQBMZUoYsR3fpM8ZhaFvLVITjJjH6TM=","FingerprintPatternsHash":"gq3WsqcKBUGTSNle7RKKyXRIwh7M8ccEqOqYvIzoM04=","PropertyOverridesHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","InputHashes":["QxoAEi32sV90j1gOewnGlq68ZmINHD3g4IrVYLMcDGU=","cYRQaZ0Ky5MA4GLjUiViTE//NFXlRkH0DkdNEuFPD1s=","2FlIYAueYgO9MktfmLizXJ65RTr/rFinjMf2LHHud9A=","Le\u002BCN12a9Jbmis2zmQIovtxW1CuzMq/3750f8xxJVy0=","w9tDaDUnIhU5zj73g2saRixeTDhOK02Vo8bX3b0DpUg=","B1FHfq6JXWEoiqTnP9QBnybI4MQI5yj3q2\u002BWjcCO3zI=","T5H7JXFKwqAY2N\u002BJpeEci\u002BW\u002Be8BGpXfVSmgEIzdlRWY=","fRm1FniQu/w7kKDGs2gDOEieToe8U\u002BIvfd3fNayoIK4=","WrwJu7DXL\u002BPuNc1GKfi\u002B\u002BdCInAD3ja6T7VcsM6fdM2M=","\u002BWURRLeaTnrPmMEsYaNMDjD1RNdAjMeewUE4E8wwBMs=","NDVcq/sXlwzrWgCosvfQW7ZN3QxeknuD4lNDJVT4js8=","aEyPjuyDGmes7Rlp5CTOfqHNHMX\u002BYoCu0kOPwa\u002BWP/o=","S1wXokP6LBK7k4q1Rdmz7A49GqtNe/YNN5LK8EjWV\u002BY=","psimpoporwXVbXvmndjDuxXA7\u002Bp7cqHKB4u22N4cpYc=","A61mqj82uId\u002BMQffyG8jRs97ff90ZTfWqnkbqRwxbOc=","wdvZbQwEEjNZZTXYlxRk4IKvcFfC95QR2Lp7hf4V0Ew=","cL5YzfS0T8mPElQAee4xHUrnfHtMTacbuNjiaswt540="],"CachedAssets":{},"CachedCopyCandidates":{}}
+{"GlobalPropertiesHash":"aZS2WwHIge+vJQBMZUoYsR3fpM8ZhaFvLVITjJjH6TM=","FingerprintPatternsHash":"gq3WsqcKBUGTSNle7RKKyXRIwh7M8ccEqOqYvIzoM04=","PropertyOverridesHash":"8ZRc1sGeVrPBx4lD717BgRaQekyh78QKV9SKsdt638U=","InputHashes":["QxoAEi32sV90j1gOewnGlq68ZmINHD3g4IrVYLMcDGU=","cYRQaZ0Ky5MA4GLjUiViTE//NFXlRkH0DkdNEuFPD1s=","2FlIYAueYgO9MktfmLizXJ65RTr/rFinjMf2LHHud9A=","Le\u002BCN12a9Jbmis2zmQIovtxW1CuzMq/3750f8xxJVy0=","w9tDaDUnIhU5zj73g2saRixeTDhOK02Vo8bX3b0DpUg=","B1FHfq6JXWEoiqTnP9QBnybI4MQI5yj3q2\u002BWjcCO3zI=","T5H7JXFKwqAY2N\u002BJpeEci\u002BW\u002Be8BGpXfVSmgEIzdlRWY=","fRm1FniQu/w7kKDGs2gDOEieToe8U\u002BIvfd3fNayoIK4=","WrwJu7DXL\u002BPuNc1GKfi\u002B\u002BdCInAD3ja6T7VcsM6fdM2M=","\u002BWURRLeaTnrPmMEsYaNMDjD1RNdAjMeewUE4E8wwBMs=","NDVcq/sXlwzrWgCosvfQW7ZN3QxeknuD4lNDJVT4js8=","aEyPjuyDGmes7Rlp5CTOfqHNHMX\u002BYoCu0kOPwa\u002BWP/o=","S1wXokP6LBK7k4q1Rdmz7A49GqtNe/YNN5LK8EjWV\u002BY=","psimpoporwXVbXvmndjDuxXA7\u002Bp7cqHKB4u22N4cpYc=","MzsPbiUNcTwpdfJjIUwcb\u002B6PTkONRHzti7W1PFSlVX0=","wdvZbQwEEjNZZTXYlxRk4IKvcFfC95QR2Lp7hf4V0Ew=","cL5YzfS0T8mPElQAee4xHUrnfHtMTacbuNjiaswt540="],"CachedAssets":{},"CachedCopyCandidates":{}}