Fixed the basic theme main menu

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

@@ -2,6 +2,50 @@
 {
     foreach (var menuItem in Menu.Items)
     {
-        <NavMenuItem MenuItem="@menuItem" />
+        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>
+        }
     }
 }

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

@@ -2,51 +2,46 @@
 @{
     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="@MenuItem.IsDisabled">
+        <a class="dropdown-item @cssClass @disabled" href="@url" id="@elementId">
-            <NavLink class="nav-link" href="@url" id="@elementId">
+            @if (MenuItem.Icon != null)
-                @if (MenuItem.Icon != null)
+            {
+                if (MenuItem.Icon.StartsWith("fa"))
                 {
-                    if (MenuItem.Icon.StartsWith("fa"))
+                    <i class="@MenuItem.Icon"></i>
-                    {
-                        <i class="@MenuItem.Icon"></i>
-                    }
                 }
-                @MenuItem.DisplayName
+            }
-            </NavLink>
+            @MenuItem.DisplayName
-        </li>
+        </a>
     }
 }
 else
 {
-    <li class="nav-item">
+    <div class="dropdown-submenu">
-        <div class="dropdown">
+        <a role="button" class="btn dropdown-toggle" data-toggle="dropdown"
-            <a class="nav-link dropdown-toggle" href="#" id="@elementId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+           aria-haspopup="true" aria-expanded="false">
-                @if (MenuItem.Icon != null)
+            <span class="lp-icon">
-                {
+                <i class="@(MenuItem.Icon ?? "")"></i>
-                    if (MenuItem.Icon.StartsWith("fa"))
+            </span>
-                    {
+            <span class="lp-text">
-                        <i class="@MenuItem.Icon"></i>
-                    }
-                }
                 @MenuItem.DisplayName
-            </a>
+            </span>
-            <div class="dropdown-menu border-0 shadow-sm" aria-labelledby="@elementId">
+        </a>
-                @foreach (var childMenuItem in MenuItem.Items)
+        <div class="dropdown-menu border-0 shadow-sm">
-                {
+            @foreach (var childMenuItem in MenuItem.Items)
-                    <NavMenuItem MenuItem="@childMenuItem" />
+            {
-                }
+                <NavMenuItem MenuItem="@childMenuItem"/>
-            </div>
+            }
         </div>
-    </li>
+    </div>
-
 }
 @code {
     [Parameter]
     public ApplicationMenuItem MenuItem { get; set; }
-}
+}

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html

@@ -16,7 +16,7 @@
     <link href="main.css" rel="stylesheet" />
 </head>
 
-<body>
+<body class="abp-application-layout bg-light">
     <app>Loading...</app>
 
     <div id="blazor-error-ui">