Merge pull request #839 from abpframework/Basic-theme-multi-level-menu

Basic theme multi level menu

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/AbpAspNetCoreMvcUIBasicThemeModule.cs

@@ -52,7 +52,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic
                     .ScriptBundles
                     .Add(BasicThemeBundles.Scripts.Global, bundle =>
                     {
-                        bundle.AddBaseBundles(StandardBundles.Scripts.Global);
+                        bundle
+                            .AddBaseBundles(StandardBundles.Scripts.Global)
+                            .AddContributors(typeof(BasicThemeGlobalScriptContributor));
                     });
             });
         }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Bundling/BasicThemeGlobalScriptContributor.cs

@@ -0,0 +1,12 @@
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Bundling
+{
+    public class BasicThemeGlobalScriptContributor : BundleContributor
+    {
+        public override void ConfigureBundle(BundleConfigurationContext context)
+        {
+            context.Files.Add("/themes/basic/layout.js");
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Components/Menu/Default.cshtml

@@ -5,39 +5,36 @@
     var elementId = string.IsNullOrEmpty(menuItem.ElementId) ? string.Empty : $"id=\"{menuItem.ElementId}\"";
     var cssClass = string.IsNullOrEmpty(menuItem.CssClass) ? string.Empty : menuItem.CssClass;
     var disabled = menuItem.IsDisabled ? "disabled" : string.Empty;
-
     if (menuItem.IsLeaf)
     {
-        if (menuItem.Url == null)
+        @if (menuItem.Url != null)
         {
-            continue;
-        }
-
-        <li class="nav-item @cssClass @disabled" @elementId>
-            <a class="nav-link" href="@(menuItem.Url ?? "#")">
-                @if (menuItem.Icon != null)
-                {
-                    if (menuItem.Icon.StartsWith("fa"))
+            <li class="nav-item @cssClass @disabled" @elementId>
+                <a class="nav-link" href="@(menuItem.Url ?? "#")">
+                    @if (menuItem.Icon != null)
                     {
-                        <i class="@menuItem.Icon"></i>
+                        if (menuItem.Icon.StartsWith("fa"))
+                        {
+                            <i class="@menuItem.Icon"></i>
+                        }
                     }
-                }
-                @menuItem.DisplayName
-            </a> @*<span class="sr-only">(current)</span>*@
-        </li>
+                    @menuItem.DisplayName
+                </a>
+            </li>
+        }
     }
     else
     {
-        <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="Menu_@(menuItem.Name)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@menuItem.DisplayName</a>
-            <div class="dropdown-menu" aria-labelledby="Menu_@(menuItem.Name)">
-                @foreach (var childMenuItem in menuItem.Items)
-                {
-                    <a class="dropdown-item @cssClass @disabled" href="@(childMenuItem.Url ?? "#")" @Html.Raw(elementId)>
-                        @childMenuItem.DisplayName
-                    </a>
-                }
+        <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">@menuItem.DisplayName</a>
+                <div class="dropdown-menu" aria-labelledby="Menu_@(menuItem.Name)">
+                    @foreach (var childMenuItem in menuItem.Items)
+                    {
+                        @await Html.PartialAsync("~/Themes/Basic/Components/Menu/_MenuItem.cshtml", childMenuItem)
+                    }
+                </div>
             </div>
         </li>
     }
-}
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Components/Menu/_MenuItem.cshtml

@@ -0,0 +1,36 @@
+@using Volo.Abp.UI.Navigation
+@model ApplicationMenuItem
+@{
+    var elementId = string.IsNullOrEmpty(Model.ElementId) ? string.Empty : $"id=\"{Model.ElementId}\"";
+    var cssClass = string.IsNullOrEmpty(Model.CssClass) ? string.Empty : Model.CssClass;
+    var disabled = Model.IsDisabled ? "disabled" : string.Empty;
+}
+@if (Model.IsLeaf)
+{
+    @if (Model.Url != null)
+    {
+        <a class="dropdown-item @cssClass @disabled" href="@(Model.Url ?? "#")" @Html.Raw(elementId)>
+            @Model.DisplayName
+        </a>
+    }
+}
+else
+{
+    <div class="dropdown-submenu">
+        <a role="button" class="btn dropdown-toggle" data-toggle="dropdown"
+                aria-haspopup="true" aria-expanded="false">
+            <span class="lp-icon">
+                <i class="@(Model.Icon ?? "")"></i>
+            </span>
+            <span class="lp-text">
+                @Model.DisplayName
+            </span>
+        </a>
+        <div class="dropdown-menu">
+            @foreach (var childMenuItem in Model.Items)
+            {
+                @await Html.PartialAsync("~/Themes/Basic/Components/Menu/_MenuItem.cshtml", childMenuItem)
+            }
+        </div>
+    </div> 
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/wwwroot/themes/basic/layout.css

@@ -10,3 +10,27 @@ body {
     text-decoration: none;
     color: #fff;
 }
+
+/* Main Menu */
+
+.navbar .dropdown-submenu {
+    position: relative;
+}
+
+    .navbar .dropdown-submenu a {
+        padding: 0.25rem 1.4rem;
+    }
+
+        .navbar .dropdown-submenu a::after {
+            transform: rotate(-90deg);
+            position: absolute;
+            right: 16px;
+            top: 18px;
+        }
+
+    .navbar .dropdown-submenu .dropdown-menu {
+        top: 0;
+        left: 100%;
+        margin-left: .1rem;
+        margin-right: .1rem;
+    }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/wwwroot/themes/basic/layout.js

@@ -0,0 +1,16 @@
+$(function () {
+    $('.dropdown-menu a.dropdown-toggle').on('click', function (e) {
+        if (!$(this).next().hasClass('show')) {
+            $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
+        }
+
+        var $subMenu = $(this).next(".dropdown-menu");
+        $subMenu.toggleClass('show');
+
+        $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
+            $('.dropdown-submenu .show').removeClass("show");
+        });
+
+        return false;
+    });
+});