Revisit the basic theme top menu after removing Bootstrap JavaScript

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/FirstLevelNavMenuItem.razor

@@ -0,0 +1,48 @@
+@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 = string.IsNullOrEmpty(MenuItem.Url) ? "#" : MenuItem.Url;
+}
+@if (MenuItem.IsLeaf)
+{
+    if (MenuItem.Url != null)
+    {
+        <li class="nav-item @cssClass @disabled" id="@elementId">
+            <a class="nav-link" href="@url">
+                @if (MenuItem.Icon != null)
+                {
+                    if (MenuItem.Icon.StartsWith("fa"))
+                    {
+                        <i class="@MenuItem.Icon"></i>
+                    }
+                }
+                @MenuItem.DisplayName
+            </a>
+        </li>
+    }
+}
+else
+{
+    <li class="nav-item">
+        <div class="dropdown">
+            <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"))
+                    {
+                        <i class="@MenuItem.Icon"></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)
+                {
+                    <SecondLevelNavMenuItem MenuItem="childMenuItem"/>
+                }
+            </div>
+        </div>
+    </li>
+}

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/FirstLevelNavMenuItem.razor.cs

@@ -0,0 +1,38 @@
+using System;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
+using Volo.Abp.UI.Navigation;
+
+namespace Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
+{
+    public partial class FirstLevelNavMenuItem : IDisposable
+    {
+        [Inject] private NavigationManager NavigationManager { get; set; }
+
+        [Parameter]
+        public ApplicationMenuItem MenuItem { get; set; }
+
+        public bool IsSubMenuOpen { get; set; }
+
+        protected override void OnInitialized()
+        {
+            NavigationManager.LocationChanged += OnLocationChanged;
+        }
+
+        private void ToggleSubMenu()
+        {
+            IsSubMenuOpen = !IsSubMenuOpen;
+        }
+
+        public void Dispose()
+        {
+            NavigationManager.LocationChanged -= OnLocationChanged;
+        }
+
+        private void OnLocationChanged(object sender, LocationChangedEventArgs e)
+        {
+            IsSubMenuOpen = false;
+            StateHasChanged();
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/MainLayout.razor.cs

@@ -1,12 +1,34 @@
-namespace Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
+using System;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
+
+namespace Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
 {
-    public partial class MainLayout
+    public partial class MainLayout : IDisposable
     {
+        [Inject] private NavigationManager NavigationManager { get; set; }
+
         private bool IsCollapseShown { get; set; }
 
+        protected override void OnInitialized()
+        {
+            NavigationManager.LocationChanged += OnLocationChanged;
+        }
+
         private void ToggleCollapse()
         {
             IsCollapseShown = !IsCollapseShown;
         }
+
+        public void Dispose()
+        {
+            NavigationManager.LocationChanged -= OnLocationChanged;
+        }
+
+        private void OnLocationChanged(object sender, LocationChangedEventArgs e)
+        {
+            IsCollapseShown = false;
+            StateHasChanged();
+        }
     }
 }

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/NavMenu.razor

@@ -2,50 +2,6 @@
 {
     foreach (var menuItem in Menu.Items)
     {
-        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 = string.IsNullOrEmpty(menuItem.Url) ? "#" : menuItem.Url;
-        if (menuItem.IsLeaf)
-        {
-            if (menuItem.Url != null)
-            {
-                <li class="nav-item @cssClass @disabled" id="@elementId">
-                    <a class="nav-link" href="@url">
-                        @if (menuItem.Icon != null)
-                        {
-                            if (menuItem.Icon.StartsWith("fa"))
-                            {
-                                <i class="@menuItem.Icon"></i>
-                            }
-                        }
-                        @menuItem.DisplayName
-                    </a>
-                </li>
-            }
-        }
-        else
-        {
-            <li class="nav-item">
-                <div class="dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" id="Menu_@(menuItem.Name)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        @if (menuItem.Icon != null)
-                        {
-                            if (menuItem.Icon.StartsWith("fa"))
-                            {
-                                <i class="@menuItem.Icon"></i>
-                            }
-                        }
-                        @menuItem.DisplayName
-                    </a>
-                    <div class="dropdown-menu border-0 shadow-sm" aria-labelledby="Menu_@(menuItem.Name)">
-                        @foreach (var childMenuItem in menuItem.Items)
-                        {
-                            <NavMenuItem MenuItem="childMenuItem"/>
-                        }
-                    </div>
-                </div>
-            </li>
-        }
+        <FirstLevelNavMenuItem MenuItem="menuItem" />
     }
 }

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/NavMenu.razor.cs

@@ -6,22 +6,14 @@ namespace Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
 {
     public partial class NavMenu
     {
-        [Inject] protected IMenuManager MenuManager { get; set; }
+        [Inject]
+        protected IMenuManager MenuManager { get; set; }
 
         protected ApplicationMenu Menu { get; set; }
 
-        private bool collapseNavMenu = true;
-
-        private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
-
-        protected override async Task OnInitializedAsync()
+        protected async override Task OnInitializedAsync()
         {
             Menu = await MenuManager.GetAsync(StandardMenus.Main);
         }
-
-        private void ToggleNavMenu()
-        {
-            collapseNavMenu = !collapseNavMenu;
-        }
     }
 }

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/NavMenuItem.razor → framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/SecondLevelNavMenuItem.razor

@@ -24,7 +24,7 @@
 else
 {
     <div class="dropdown-submenu">
-        <a role="button" class="btn dropdown-toggle" data-toggle="dropdown"
+        <a role="button" @onclick="ToggleSubMenu" class="btn dropdown-toggle" data-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="false">
             <span class="lp-icon">
                 <i class="@(MenuItem.Icon ?? "")"></i>
@@ -33,15 +33,13 @@ else
                 @MenuItem.DisplayName
             </span>
         </a>
-        <div class="dropdown-menu border-0 shadow-sm">
+        <div class="dropdown-menu border-0 shadow-sm @(IsSubMenuOpen ? "show" : "")">
             @foreach (var childMenuItem in MenuItem.Items)
             {
-                <NavMenuItem MenuItem="@childMenuItem"/>
+                <SecondLevelNavMenuItem MenuItem="@childMenuItem"/>
             }
         </div>
     </div>
 }
 @code {
-    [Parameter]
-    public ApplicationMenuItem MenuItem { get; set; }
-}
+}

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/SecondLevelNavMenuItem.razor.cs

@@ -0,0 +1,38 @@
+using System;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
+using Volo.Abp.UI.Navigation;
+
+namespace Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
+{
+    public partial class SecondLevelNavMenuItem : IDisposable
+    {
+        [Inject] private NavigationManager NavigationManager { get; set; }
+
+        [Parameter]
+        public ApplicationMenuItem MenuItem { get; set; }
+
+        public bool IsSubMenuOpen { get; set; }
+
+        protected override void OnInitialized()
+        {
+            NavigationManager.LocationChanged += OnLocationChanged;
+        }
+
+        private void ToggleSubMenu()
+        {
+            IsSubMenuOpen = !IsSubMenuOpen;
+        }
+
+        public void Dispose()
+        {
+            NavigationManager.LocationChanged -= OnLocationChanged;
+        }
+
+        private void OnLocationChanged(object sender, LocationChangedEventArgs e)
+        {
+            IsSubMenuOpen = false;
+            StateHasChanged();
+        }
+    }
+}