fix(navbar-menu): menu element cannot be found in the DOM after navigation

docs/LumexUI.Docs.Client/Components/Header.razor

@@ -35,7 +35,7 @@
         <LumexNavbarMenuToggle Class="sm:hidden" />
     </LumexNavbarContent>
 
-    <LumexNavbarMenu>
+    <LumexNavbarMenu Class="pt-0 pb-10">
         <NavMenu />
     </LumexNavbarMenu>
 </LumexNavbar>

src/LumexUI/Components/Navbar/LumexNavbarMenu.razor

@@ -4,8 +4,7 @@
 <LumexCollapse As="@As"
                Class="@RootClass"
                Style="@RootStyle"
-               Expanded="@Context.IsMenuExpanded"
-               @attributes="@AdditionalAttributes"
-               @ref="@_collapse">
+               Expanded="@Expanded"
+               @attributes="@AdditionalAttributes">
     @ChildContent
 </LumexCollapse>

src/LumexUI/Components/Navbar/LumexNavbarMenu.razor.cs

@@ -3,20 +3,19 @@
 // See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
 
 using LumexUI.Common;
-using LumexUI.Extensions;
 using LumexUI.Styles;
 using LumexUI.Utilities;
 
 using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
+using Microsoft.AspNetCore.Components.Routing;
 
 namespace LumexUI;
 
 /// <summary>
 /// A component representing a collapsible menu for the <see cref="LumexNavbar"/>.
 /// </summary>
 [CompositionComponent( typeof( LumexNavbar ) )]
-public partial class LumexNavbarMenu : LumexComponentBase
+public partial class LumexNavbarMenu : LumexComponentBase, IDisposable
 {
     /// <summary>
     /// Gets or sets content to be rendered inside the navbar menu.
@@ -25,7 +24,9 @@ public partial class LumexNavbarMenu : LumexComponentBase
 
     [CascadingParameter] internal NavbarContext Context { get; set; } = default!;
 
-    [Inject] private IJSRuntime JS { get; set; } = default!;
+    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
+
+    internal bool Expanded { get; private set; }
 
     private protected override string? RootClass =>
         TwMerge.Merge( Navbar.GetMenuStyles( this ) );
@@ -36,8 +37,6 @@ public partial class LumexNavbarMenu : LumexComponentBase
             .Add( base.RootStyle )
             .ToString();
 
-    private LumexCollapse? _collapse;
-
     /// <summary>
     /// Initializes a new instance of the <see cref="LumexNavbarMenu"/>.
     /// </summary>
@@ -51,16 +50,22 @@ protected override void OnInitialized()
     {
         ContextNullException.ThrowIfNull( Context, nameof( LumexNavbarMenu ) );
 
-        Context.Register( this );
-        Context.OnMenuToggle += StateHasChanged;
+        Context.RegisterMenu( this );
+        NavigationManager.LocationChanged += HandleLocationChanged;
+    }
+
+    internal void Toggle()
+    {
+        Expanded = !Expanded;
+        StateHasChanged();
     }
 
+    private void HandleLocationChanged( object? sender, LocationChangedEventArgs e ) 
+        => Toggle();
+
     /// <inheritdoc />
-    protected override async Task OnAfterRenderAsync( bool firstRender )
+    public void Dispose()
     {
-        if( firstRender )
-        {
-            await _collapse!.ElementReference.PortalToAsync();
-        }
+        NavigationManager.LocationChanged -= HandleLocationChanged;
     }
 }

src/LumexUI/Components/Navbar/LumexNavbarMenuToggle.razor

@@ -5,8 +5,8 @@
                 Class="@RootClass"
                 Style="@RootStyle"
                 type="button"
-                data-expanded="@Context.IsMenuExpanded"
+                data-expanded="@Context.Menu?.Expanded"
                 @attributes="@AdditionalAttributes"
-                @onclick="@Context.ToggleMenu">
+                @onclick="@Toggle">
     <span class="@ToggleIconClass" />
 </LumexComponent>

src/LumexUI/Components/Navbar/LumexNavbarMenuToggle.razor.cs

@@ -6,17 +6,20 @@
 using LumexUI.Styles;
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
 
 namespace LumexUI;
 
 /// <summary>
 /// A component representing a button that toggles the <see cref="LumexNavbarMenu"/>.
 /// </summary>
 [CompositionComponent( typeof( LumexNavbar ) )]
-public partial class LumexNavbarMenuToggle : LumexComponentBase
+public partial class LumexNavbarMenuToggle : LumexComponentBase, IDisposable
 {
     [CascadingParameter] internal NavbarContext Context { get; set; } = default!;
 
+    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
+
     private protected override string? RootClass =>
         TwMerge.Merge( Navbar.GetToggleStyles( this ) );
 
@@ -35,5 +38,21 @@ public LumexNavbarMenuToggle()
     protected override void OnInitialized()
     {
         ContextNullException.ThrowIfNull( Context, nameof( LumexNavbarMenuToggle ) );
+
+        NavigationManager.LocationChanged += HandleLocationChanged;
+    }
+
+    private void HandleLocationChanged( object? sender, LocationChangedEventArgs e ) 
+        => StateHasChanged();
+
+    private void Toggle()
+    {
+        Context.Menu?.Toggle();
+    }
+
+    /// <inheritdoc />
+    public void Dispose()
+    {
+        NavigationManager.LocationChanged -= HandleLocationChanged;
     }
 }

src/LumexUI/Components/Navbar/NavbarContext.cs

@@ -6,20 +6,9 @@ internal class NavbarContext( LumexNavbar owner ) : IComponentContext<LumexNavba
 {
     public LumexNavbar Owner { get; } = owner;
     public LumexNavbarMenu? Menu { get; private set; }
-    public bool IsMenuExpanded { get; private set; }
 
-    public event Action OnMenuToggle = default!;
-
-    public void Register( LumexNavbarMenu menu )
+    public void RegisterMenu( LumexNavbarMenu menu )
     {
         Menu = menu;
     }
-
-    public void ToggleMenu()
-    {
-        IsMenuExpanded = !IsMenuExpanded;
-        NotifyStateChanged();
-    }
-
-    private void NotifyStateChanged() => OnMenuToggle.Invoke();
 }

src/LumexUI/Styles/Navbar.cs

@@ -18,7 +18,6 @@ internal readonly record struct Navbar
         .Add( "w-full" )
         .Add( "items-center" )
         .Add( "justify-center" )
-        .Add( "bg-background" )
         .ToString();
 
     private readonly static string _wrapper = ElementClass.Empty()
@@ -108,7 +107,6 @@ internal readonly record struct Navbar
         .Add( "bottom-0" )
         .Add( "inset-x-0" )
         .Add( "overflow-y-auto" )
-        .Add( "bg-background" )
         .ToString();
 
     private readonly static string _menuItem = ElementClass.Empty()
@@ -126,12 +124,6 @@ internal readonly record struct Navbar
         .Add( "border-divider" )
         .ToString();
 
-    private readonly static string _blurred = ElementClass.Empty()
-        .Add( "backdrop-blur-lg" )
-        .Add( "backdrop-saturate-150" )
-        .Add( "bg-background/70" )
-        .ToString();
-
     private static ElementClass GetMaxWidthStyles( MaxWidth maxWidth )
     {
         return ElementClass.Empty()
@@ -149,13 +141,37 @@ private static ElementClass GetAlignStyles( Align? align )
             .Add( "ms-auto", when: align is Align.End );
     }
 
+    private static ElementClass GetBlurredStyles( bool blurred, string slot )
+    {
+        return blurred switch
+        {
+            false => ElementClass.Empty()
+                .Add( "bg-background", when: slot is nameof( _base ) )
+                .Add( "bg-background", when: slot is nameof( _menu ) ),
+
+            true => ElementClass.Empty()
+                // https://stackoverflow.com/questions/60997948/backdrop-filter-not-working-for-nested-elements-in-chrome
+                .Add( ElementClass.Empty()
+                    .Add( "before:-z-10" )
+                    .Add( "before:absolute" )
+                    .Add( "before:inset-0" )
+                    .Add( "before:backdrop-blur-lg" )
+                    .Add( "before:backdrop-saturate-150" )
+                    .Add( "before:bg-background/70" ), when: slot is nameof( _base ) )
+                .Add( ElementClass.Empty()
+                    .Add( "backdrop-blur-lg" )
+                    .Add( "backdrop-saturate-150" )
+                    .Add( "bg-background/70" ), when: slot is nameof( _menu ) )
+        };
+    }
+
     public static string GetStyles( LumexNavbar navbar )
     {
         return ElementClass.Empty()
             .Add( _base )
             .Add( _sticky, when: navbar.Sticky )
             .Add( _bordered, when: navbar.Bordered )
-            .Add( _blurred, when: navbar.Blurred )
+            .Add( GetBlurredStyles( navbar.Blurred, slot: nameof( _base ) ) )
             .Add( navbar.Classes?.Root )
             .Add( navbar.Class )
             .ToString();
@@ -210,7 +226,7 @@ public static string GetMenuStyles( LumexNavbarMenu navbarMenu )
 
         return ElementClass.Empty()
             .Add( _menu )
-            .Add( _blurred, when: navbar.Blurred )
+            .Add( GetBlurredStyles( navbar.Blurred, slot: nameof( _menu ) ) )
             .Add( navbar.Classes?.Menu )
             .Add( navbarMenu.Class )
             .ToString();