Merge pull request #21841 from abpframework/Basic-Menu

Fix basic theme blazor menu remain open problem.

modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/Themes/Basic/FirstLevelNavMenuItem.razor

@@ -1,61 +1,67 @@
-@using Volo.Abp.UI.Navigation
+@using Volo.Abp.UI.Navigation
 @{
-    var elementId = MenuItem.ElementId ?? "MenuItem_" + MenuItem.Name.Replace(".", "_");
-    var cssClass = string.IsNullOrEmpty(MenuItem.CssClass) ? string.Empty : MenuItem.CssClass;
-    var disabled = MenuItem.IsDisabled ? "disabled" : string.Empty;
-    var url = MenuItem.Url == null ? "#" : MenuItem.Url.TrimStart('/', '~');
     var customComponentType = MenuItem.GetComponentTypeOrDefault();
 }
-@if (MenuItem.IsLeaf)
+
+@if (customComponentType != null && typeof(ComponentBase).IsAssignableFrom(customComponentType))
 {
-    if (customComponentType != null && typeof(ComponentBase).IsAssignableFrom(customComponentType))
-    {
-        <DynamicComponent Type="@customComponentType" />
-    }
-    else if (MenuItem.Url != null)
-    {
-        <li class="nav-item @cssClass @disabled" id="@elementId">
-            <a class="nav-link" href="@url" target="@MenuItem.Target">
-                @if (MenuItem.Icon != null)
-                {
-                    if (MenuItem.Icon.StartsWith("fa"))
-                    {
-                        <i class="@MenuItem.Icon me-1"></i>
-                    }
-                }
-                @MenuItem.DisplayName
-            </a>
-        </li>
-    }
+    <DynamicComponent Type="@customComponentType" />
 }
 else
 {
-    <li class="nav-item">
-        <div class="dropdown">
-            @if (customComponentType != null && typeof(ComponentBase).IsAssignableFrom(customComponentType))
-            {
-                <DynamicComponent Type="@customComponentType" />
-            }
-            else
-            {
-                <a class="nav-link dropdown-toggle" @onclick="ToggleSubMenu" id="Menu_@(MenuItem.Name)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    @if (MenuItem.Icon != null)
-                    {
-                        if (MenuItem.Icon.StartsWith("fa"))
+    <Dropdown @ref="_dropdown"
+              Class="@(string.IsNullOrEmpty(MenuItem.CssClass) ? string.Empty : MenuItem.CssClass)"
+              ElementId="@(MenuItem.ElementId ?? "MenuItem_" + MenuItem.Name.Replace(".", "_"))"
+              Disabled="MenuItem.IsDisabled">
+        <DropdownToggle ToggleIconVisible="false">
+            <ChildContent>
+                @if (MenuItem.Url != null)
+                {
+                    var url = MenuItem.Url == null ? "#" : MenuItem.Url.TrimStart('/', '~');
+                    <a class="text-white text-decoration-none" href="@url" target="@MenuItem.Target">
+                        @if (MenuItem.Icon != null && MenuItem.Icon.StartsWith("fa"))
                         {
                             <i class="@MenuItem.Icon me-1"></i>
                         }
-                    }
-                    @MenuItem.DisplayName
-                </a>
-            }
-
-            <div class="dropdown-menu border-0 shadow-sm @(IsSubMenuOpen ? "show" : "")" aria-labelledby="Menu_@(MenuItem.Name)">
-                @foreach (var childMenuItem in MenuItem.Items)
+                        @MenuItem.DisplayName
+                    </a>
+                }
+                else
                 {
-                    <SecondLevelNavMenuItem MenuItem="childMenuItem" />
+                    <a class="text-white text-decoration-none dropdown-toggle">
+                        @if (MenuItem.Icon != null)
+                        {
+                            if (MenuItem.Icon.StartsWith("fa"))
+                            {
+                                <i class="@MenuItem.Icon me-1"></i>
+                            }
+                        }
+                        @MenuItem.DisplayName
+                    </a>
+                }
+            </ChildContent>
+        </DropdownToggle>
+        <DropdownMenu>
+            @foreach (var item in MenuItem.Items)
+            {
+                if (item.Items.Any())
+                {
+                    <SecondLevelNavMenuItem MenuItem="item" ParentDropdown="_dropdown" />
                 }
-            </div>
-        </div>
-    </li>
+                else
+                {
+                    var itemUrl = item.Url == null ? "#" : item.Url.TrimStart('/', '~');
+                    <a class="text-black text-decoration-none" href="@itemUrl">
+                        @if (item.Icon != null)
+                        {
+                            <i class="@item.Icon me-1"></i>
+                        }
+                        <span>
+                            @item.DisplayName
+                        </span>
+                    </a>
+                }
+            }
+        </DropdownMenu>
+    </Dropdown>
 }

modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/Themes/Basic/FirstLevelNavMenuItem.razor.cs

@@ -1,4 +1,5 @@
 using System;
+using Blazorise;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Routing;
 using Volo.Abp.UI.Navigation;
@@ -7,31 +8,26 @@ namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic;
 
 public partial class FirstLevelNavMenuItem : IDisposable
 {
-    [Inject] private NavigationManager NavigationManager { get; set; }
-
     [Parameter]
-    public ApplicationMenuItem MenuItem { get; set; }
+    public ApplicationMenuItem MenuItem { get; set; } = default!;
+
+    private Dropdown _dropdown;
 
-    public bool IsSubMenuOpen { get; set; }
+    [Inject]
+    private NavigationManager NavigationManager { get; set; }
 
     protected override void OnInitialized()
     {
         NavigationManager.LocationChanged += OnLocationChanged;
     }
 
-    private void ToggleSubMenu()
+    protected virtual void OnLocationChanged(object sender, LocationChangedEventArgs e)
     {
-        IsSubMenuOpen = !IsSubMenuOpen;
+        _dropdown?.Hide();
     }
 
-    public void Dispose()
+    public virtual void Dispose()
     {
         NavigationManager.LocationChanged -= OnLocationChanged;
     }
-
-    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
-    {
-        IsSubMenuOpen = false;
-        InvokeAsync(StateHasChanged);
-    }
 }

modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/Themes/Basic/SecondLevelNavMenuItem.razor

@@ -1,55 +1,48 @@
-@using Volo.Abp.UI.Navigation
+@using Volo.Abp.UI.Navigation
 @{
-    var elementId = MenuItem.ElementId ?? "MenuItem_" + MenuItem.Name.Replace(".", "_");
-    var cssClass = string.IsNullOrEmpty(MenuItem.CssClass) ? string.Empty : MenuItem.CssClass;
-    var disabled = MenuItem.IsDisabled ? "disabled" : string.Empty;
-    var url = MenuItem.Url == null ? "#" : MenuItem.Url.TrimStart('/', '~');
     var customComponentType = MenuItem.GetComponentTypeOrDefault();
 }
-@if (MenuItem.IsLeaf)
+
+@if (customComponentType != null && typeof(ComponentBase).IsAssignableFrom(customComponentType))
 {
-    if (customComponentType != null && typeof(ComponentBase).IsAssignableFrom(customComponentType))
-    {
-        <DynamicComponent Type="@customComponentType" />
-    }
-    else if (MenuItem.Url != null)
-    {
-        <a class="dropdown-item @cssClass @disabled" href="@url" target="@MenuItem.Target" id="@elementId">
-            @if (MenuItem.Icon != null)
-            {
-                <i class="@MenuItem.Icon me-1"></i>
-            }
-            <span>
-                @MenuItem.DisplayName
-            </span>
-        </a>
-    }
+    <DynamicComponent Type="@customComponentType" />
 }
 else
 {
-    <div class="dropdown-submenu">
-        @if (customComponentType != null && typeof(ComponentBase).IsAssignableFrom(customComponentType))
-        {
-            <DynamicComponent Type="@customComponentType" />
-        }
-        else
-        {
-            <a role="button" @onclick="ToggleSubMenu" class="btn dropdown-toggle" data-toggle="dropdown"
-                    aria-haspopup="true" aria-expanded="false">
-                @if (MenuItem.Icon != null)
+    <Dropdown @ref="_dropdown"
+              Class="@(string.IsNullOrEmpty(MenuItem.CssClass) ? string.Empty : MenuItem.CssClass)"
+              ElementId="@(MenuItem.ElementId ?? "MenuItem_" + MenuItem.Name.Replace(".", "_"))"
+              Disabled="MenuItem.IsDisabled">
+        <DropdownToggle Class="me-3">
+            <ChildContent>
+                @if (MenuItem.Icon != null && MenuItem.Icon.StartsWith("fa"))
                 {
                     <i class="@MenuItem.Icon me-1"></i>
                 }
-                <span>
-                    @MenuItem.DisplayName
-                </span>
-            </a>
-        }
-        <div class="dropdown-menu border-0 shadow-sm @(IsSubMenuOpen ? "show" : "")">
-            @foreach (var childMenuItem in MenuItem.Items)
+                @MenuItem.DisplayName
+            </ChildContent>
+        </DropdownToggle>
+        <DropdownMenu>
+            @foreach (var item in MenuItem.Items)
             {
-                <SecondLevelNavMenuItem MenuItem="@childMenuItem"/>
+                if (item.Items.Any())
+                {
+                    <SecondLevelNavMenuItem MenuItem="item" ParentDropdown="_dropdown"/>
+                }
+                else
+                {
+                    var itemUrl = item.Url == null ? "#" : item.Url.TrimStart('/', '~');
+                    <a class="text-black text-decoration-none" href="@itemUrl">
+                        @if (item.Icon != null)
+                        {
+                            <i class="@item.Icon me-1"></i>
+                        }
+                        <span>
+                            @item.DisplayName
+                        </span>
+                    </a>
+                }
             }
-        </div>
-    </div>
-}
+        </DropdownMenu>
+    </Dropdown>
+}

modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/Themes/Basic/SecondLevelNavMenuItem.razor.cs

@@ -1,4 +1,5 @@
 using System;
+using Blazorise;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Routing;
 using Volo.Abp.UI.Navigation;
@@ -7,31 +8,30 @@ namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic;
 
 public partial class SecondLevelNavMenuItem : IDisposable
 {
-    [Inject] private NavigationManager NavigationManager { get; set; }
+    [Parameter]
+    public ApplicationMenuItem MenuItem { get; set; } = default!;
 
     [Parameter]
-    public ApplicationMenuItem MenuItem { get; set; }
+    public  Dropdown ParentDropdown { get; set; } = default!;
+
+    private Dropdown _dropdown;
 
-    public bool IsSubMenuOpen { get; set; }
+    [Inject]
+    private NavigationManager NavigationManager { get; set; }
 
     protected override void OnInitialized()
     {
         NavigationManager.LocationChanged += OnLocationChanged;
     }
 
-    private void ToggleSubMenu()
+    protected virtual void OnLocationChanged(object sender, LocationChangedEventArgs e)
     {
-        IsSubMenuOpen = !IsSubMenuOpen;
+        ParentDropdown?.Hide();
+        _dropdown?.Hide();
     }
 
-    public void Dispose()
+    public virtual void Dispose()
     {
         NavigationManager.LocationChanged -= OnLocationChanged;
     }
-
-    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
-    {
-        IsSubMenuOpen = false;
-        InvokeAsync(StateHasChanged);
-    }
 }