Refactor navigation menu components and remove unused view models

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

@@ -1,62 +1,67 @@
-@using Volo.Abp.UI.Navigation
+@using Volo.Abp.UI.Navigation
 @{
-    var elementId = MenuItem.MenuItem.ElementId ?? "MenuItem_" + MenuItem.MenuItem.Name.Replace(".", "_");
+    var customComponentType = MenuItem.GetComponentTypeOrDefault();
-    var cssClass = string.IsNullOrEmpty(MenuItem.MenuItem.CssClass) ? string.Empty : MenuItem.MenuItem.CssClass;
-    var disabled = MenuItem.MenuItem.IsDisabled ? "disabled" : string.Empty;
-    var url = MenuItem.MenuItem.Url == null ? "#" : MenuItem.MenuItem.Url.TrimStart('/', '~');
-    var customComponentType = MenuItem.MenuItem.GetComponentTypeOrDefault();
 }
-@if (MenuItem.MenuItem.IsLeaf)
+
+@if (customComponentType != null && typeof(ComponentBase).IsAssignableFrom(customComponentType))
 {
-    if (customComponentType != null && typeof(ComponentBase).IsAssignableFrom(customComponentType))
+    <DynamicComponent Type="@customComponentType" />
-    {
-        <DynamicComponent Type="@customComponentType" />
-    }
-    else if (MenuItem.MenuItem.Url != null)
-    {
-        <li class="nav-item @cssClass @disabled" id="@elementId">
-            <a class="nav-link" href="@url" target="@MenuItem.MenuItem.Target">
-                @if (MenuItem.MenuItem.Icon != null)
-                {
-                    if (MenuItem.MenuItem.Icon.StartsWith("fa"))
-                    {
-                        <i class="@MenuItem.MenuItem.Icon me-1"></i>
-                    }
-                }
-                @MenuItem.MenuItem.DisplayName
-            </a>
-        </li>
-    }
 }
 else
 {
-    <li class="nav-item">
+    <Dropdown @ref="_dropdown"
-        <div class="dropdown">
+              Class="@(string.IsNullOrEmpty(MenuItem.CssClass) ? string.Empty : MenuItem.CssClass)"
-            @if (customComponentType != null && typeof(ComponentBase).IsAssignableFrom(customComponentType))
+              ElementId="@(MenuItem.ElementId ?? "MenuItem_" + MenuItem.Name.Replace(".", "_"))"
-            {
+              Disabled="MenuItem.IsDisabled">
-                <DynamicComponent Type="@customComponentType" />
+        <DropdownToggle ToggleIconVisible="false">
-            }
+            <ChildContent>
-            else
+                @if (MenuItem.Url != null)
-            {
+                {
-                <a class="nav-link dropdown-toggle" @onclick="ToggleMenu" id="Menu_@(MenuItem.MenuItem.Name)"
+                    var url = MenuItem.Url == null ? "#" : MenuItem.Url.TrimStart('/', '~');
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <a class="text-white text-decoration-none" href="@url" target="@MenuItem.Target">
-                    @if (MenuItem.MenuItem.Icon != null)
+                        @if (MenuItem.Icon != null && MenuItem.Icon.StartsWith("fa"))
-                    {
-                        if (MenuItem.MenuItem.Icon.StartsWith("fa"))
                         {
-                            <i class="@MenuItem.MenuItem.Icon me-1"></i>
+                            <i class="@MenuItem.Icon me-1"></i>
                         }
-                    }
+                        @MenuItem.DisplayName
-                    @MenuItem.MenuItem.DisplayName
+                    </a>
-                </a>
+                }
-            }
+                else
-
-            <div class="dropdown-menu border-0 shadow-sm @(MenuItem.IsOpen ? "show" : "")" aria-labelledby="Menu_@(MenuItem.MenuItem.Name)">
-                @foreach (var childMenuItem in MenuItem.Items)
                 {
-                    <SecondLevelNavMenuItem Menu="Menu" 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>
+                else
-        </div>
+                {
-    </li>
+                    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,23 +1,20 @@
 using System;
+using Blazorise;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Routing;
-using Volo.Abp.AspNetCore.Components.Web.Theming.Layout;
+using Volo.Abp.UI.Navigation;
 
 namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic;
 
 public partial class FirstLevelNavMenuItem : IDisposable
 {
-    [Inject]
-    private NavigationManager NavigationManager { get; set; }
-
-    [Inject]
-    protected PageLayout PageLayout { get; set; }
-
     [Parameter]
-    public MenuViewModel Menu { get; set; }
+    public ApplicationMenuItem MenuItem { get; set; } = default!;
 
-    [Parameter]
+    private Dropdown _dropdown;
-    public MenuItemViewModel MenuItem { get; set; }
+
+    [Inject]
+    private NavigationManager NavigationManager { get; set; }
 
     protected override void OnInitialized()
     {
@@ -26,13 +23,7 @@ public partial class FirstLevelNavMenuItem : IDisposable
 
     protected virtual void OnLocationChanged(object sender, LocationChangedEventArgs e)
     {
-        Menu.CloseAll();
+        _dropdown?.Hide();
-        Menu.InvokeStateChanged();
-    }
-
-    protected virtual void ToggleMenu()
-    {
-        Menu.ToggleOpen(MenuItem);
     }
 
     public virtual void Dispose()

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

@@ -1,46 +0,0 @@
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using Volo.Abp.DependencyInjection;
-using Volo.Abp.UI.Navigation;
-
-namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic;
-
-public class MainMenuProvider : IScopedDependency
-{
-    private readonly IMenuManager _menuManager;
-
-    public MainMenuProvider(IMenuManager menuManager)
-    {
-        _menuManager = menuManager;
-    }
-
-    public virtual async Task<MenuViewModel> GetMenuAsync()
-    {
-        var menu = await _menuManager.GetMainMenuAsync();
-        var result = new MenuViewModel
-        {
-            Menu = menu,
-            Items = menu.Items.Select(CreateMenuItemViewModel).ToList()
-        };
-        result.SetParents();
-        return result;
-    }
-
-    private MenuItemViewModel CreateMenuItemViewModel(ApplicationMenuItem applicationMenuItem)
-    {
-        var viewModel = new MenuItemViewModel
-        {
-            MenuItem = applicationMenuItem,
-        };
-
-        viewModel.Items = new List<MenuItemViewModel>();
-
-        foreach (var item in applicationMenuItem.Items)
-        {
-            viewModel.Items.Add(CreateMenuItemViewModel(item));
-        }
-
-        return viewModel;
-    }
-}

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

@@ -1,43 +0,0 @@
-using System.Collections.Generic;
-using JetBrains.Annotations;
-using Volo.Abp.UI.Navigation;
-
-namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic;
-
-public class MenuItemViewModel
-{
-    public ApplicationMenuItem MenuItem { get; set; }
-
-    public IList<MenuItemViewModel> Items { get; set; }
-
-    public bool IsOpen { get; set; }
-
-    [CanBeNull]
-    public MenuItemViewModel Parent { get; set; }
-
-    public void Open()
-    {
-        Parent?.Open();
-        IsOpen = true;
-    }
-
-    public void Close()
-    {
-        foreach (var childItem in Items)
-        {
-            childItem.Close();
-        }
-
-        IsOpen = false;
-    }
-
-    public void SetParents([CanBeNull] MenuItemViewModel parent)
-    {
-        Parent = parent;
-
-        foreach (var childItem in Items)
-        {
-            childItem.SetParents(this);
-        }
-    }
-}

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

@@ -1,50 +0,0 @@
-using System;
-using System.Collections.Generic;
-using Volo.Abp.UI.Navigation;
-
-namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic;
-
-public class MenuViewModel
-{
-    public ApplicationMenu Menu { get; set; }
-
-    public List<MenuItemViewModel> Items { get; set; }
-
-    public EventHandler StateChanged;
-
-    public void SetParents()
-    {
-        foreach (var item in Items)
-        {
-            item.SetParents(null);
-        }
-    }
-
-    public void ToggleOpen(MenuItemViewModel menuItem)
-    {
-        if (menuItem.IsOpen)
-        {
-            menuItem.Close();
-        }
-        else
-        {
-            CloseAll();
-            menuItem.Open();
-        }
-
-        StateChanged.InvokeSafely(this);
-    }
-
-    public void CloseAll()
-    {
-        foreach (var item in Items)
-        {
-            item.Close();
-        }
-    }
-
-    public void InvokeStateChanged()
-    {
-        StateChanged.InvokeSafely(this);
-    }
-}

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

@@ -2,6 +2,6 @@
 {
     foreach (var menuItem in Menu.Items)
     {
-        <FirstLevelNavMenuItem Menu="@Menu" MenuItem="@menuItem" />
+        <FirstLevelNavMenuItem MenuItem="menuItem" />
     }
 }

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

@@ -11,39 +11,27 @@ namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic;
 public partial class NavMenu : IDisposable
 {
     [Inject]
-    protected MainMenuProvider MainMenuProvider { get; set; }
+    protected IMenuManager MenuManager { get; set; }
 
     [Inject]
     protected ApplicationConfigurationChangedService ApplicationConfigurationChangedService { get; set; }
 
-    protected MenuViewModel Menu { get; set; }
+    protected ApplicationMenu Menu { get; set; }
 
     protected async override Task OnInitializedAsync()
     {
-        Menu = await MainMenuProvider.GetMenuAsync();
+        Menu = await MenuManager.GetMainMenuAsync();
-        Menu.StateChanged += Menu_StateChanged;
         ApplicationConfigurationChangedService.Changed += ApplicationConfigurationChanged;
     }
 
-    private void Menu_StateChanged(object sender, EventArgs e)
-    {
-        InvokeAsync(StateHasChanged);
-    }
-
     private async void ApplicationConfigurationChanged()
     {
-        Menu.StateChanged -= Menu_StateChanged;
+        Menu = await MenuManager.GetMainMenuAsync();
-        Menu = await MainMenuProvider.GetMenuAsync();
-        Menu.StateChanged += Menu_StateChanged;
         await InvokeAsync(StateHasChanged);
     }
 
     public void Dispose()
     {
-        if (Menu != null)
-        {
-            Menu.StateChanged -= Menu_StateChanged;
-        }
         ApplicationConfigurationChangedService.Changed -= ApplicationConfigurationChanged;
     }
 }

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

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

@@ -1,23 +1,23 @@
 using System;
+using Blazorise;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Routing;
-using Volo.Abp.AspNetCore.Components.Web.Theming.Layout;
+using Volo.Abp.UI.Navigation;
 
 namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic;
 
 public partial class SecondLevelNavMenuItem : IDisposable
 {
-    [Inject]
-    private NavigationManager NavigationManager { get; set; }
-
-    [Inject]
-    protected PageLayout PageLayout { get; set; }
-
     [Parameter]
-    public MenuViewModel Menu { get; set; }
+    public ApplicationMenuItem MenuItem { get; set; } = default!;
 
     [Parameter]
-    public MenuItemViewModel MenuItem { get; set; }
+    public  Dropdown ParentDropdown { get; set; } = default!;
+
+    private Dropdown _dropdown;
+
+    [Inject]
+    private NavigationManager NavigationManager { get; set; }
 
     protected override void OnInitialized()
     {
@@ -26,13 +26,8 @@ public partial class SecondLevelNavMenuItem : IDisposable
 
     protected virtual void OnLocationChanged(object sender, LocationChangedEventArgs e)
     {
-        Menu.CloseAll();
+        ParentDropdown?.Hide();
-        Menu.InvokeStateChanged();
+        _dropdown?.Hide();
-    }
-
-    protected virtual void ToggleMenu()
-    {
-        Menu.ToggleOpen(MenuItem);
     }
 
     public virtual void Dispose()