Improved nested submenu support (#28)

Blazored · Oct 22, 2021 · fbb55ab · fbb55ab
1 parent fcb9a37
commit fbb55ab
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 40 deletions.
diff --git a/samples/BlazorServerSide/Pages/Index.razor b/samples/BlazorServerSide/Pages/Index.razor
@@ -2,4 +2,56 @@
 
 <h1>Hello, world!</h1>
 
-Welcome to your new app.
+Samples of a multi-level submenu below:
+
+<hr />
+
+<BlazoredMenu MenuBuilder="@MenuBuilder1" />
+
+<hr />
+
+@*<BlazoredMenu MenuBuilder="@MenuBuilder2" />*@
+
+<hr />
+
+@code {
+    MenuBuilder MenuBuilder1 = new MenuBuilder();
+    MenuBuilder MenuBuilder2 = new MenuBuilder();
+
+    protected override void OnInitialized()
+    {
+        MenuBuilder1
+            .AddIconCssToClose("oi oi-chevron-top pt-3")
+            .AddIconCssToOpen("oi oi-chevron-bottom pt-3")
+            .AddItem(1, "Home", "/", match: NavLinkMatch.All)
+            .AddItem(2, "Counter", "counter", isEnabled: false)
+            .AddSubMenu(3, "Sub Menu sotto", new MenuBuilder()
+                .AddItem(1, "Counter", "counter")
+                .AddItem(2, "Fetch Data", "fetchdata", isEnabled: false)
+                .AddItem(3, "You Can't See Me", "invisible", isVisible: false))
+            .AddSubMenu(4, "another sub menu", new MenuBuilder()
+                .AddItem(1, "Counter", "counter")
+                .AddItem(2, "Fetch Data", "fetchdata")
+                .AddItem(3, "Paperino", "paperino")
+                .AddSubMenu(4, "another subsubmenu", new MenuBuilder()
+                    .AddItem(1, "Counter", "counter")))
+            .AddItem(5, "FetchData", "fetchdata");
+
+        MenuBuilder2
+            .AddIconCssToClose("oi oi-chevron-top pt-3")
+            .AddIconCssToOpen("oi oi-chevron-bottom pt-3")
+            .AddItem(1, "Home", "/", match: NavLinkMatch.All)
+            .AddItem(2, "Counter", "counter", isEnabled: false)
+            .AddSubMenu(3, "1st level submenu", new MenuBuilder()
+                .AddItem(1, "Counter", "counter")
+                .AddItem(2, "Fetch Data", "fetchdata", isEnabled: false)
+                .AddItem(3, "You Can't See Me", "invisible", isVisible: false)
+                .AddSubMenu(4, "2nd level submenu", new MenuBuilder()
+                    .AddItem(1, "Counter", "counter"))
+                    .AddSubMenu(2, "3rd level submenu", new MenuBuilder()
+                        .AddItem(1, "Counter", "counter")
+                        .AddSubMenu(2, "4th level submenu", new MenuBuilder()
+                            .AddItem(1, "Counter", "counter"))))
+            .AddItem(4, "FetchData", "fetchdata");
+    }
+}
diff --git a/samples/BlazorServerSide/Shared/NavMenu.razor b/samples/BlazorServerSide/Shared/NavMenu.razor
@@ -16,7 +16,7 @@
         </HeaderTemplate>
         <MenuTemplate>
             <BlazoredMenuItem>
-                <NavLink href="counter"><i class="oi oi-microphone position-sticky"/> Counter</NavLink>
+                <NavLink href="counter"><i class="oi oi-microphone position-sticky" /> Counter</NavLink>
             </BlazoredMenuItem>
             <BlazoredMenuItem>
                 <NavLink href="fetchdata">Fetch data</NavLink>
@@ -40,22 +40,27 @@
     </BlazoredMenuItem>
 </BlazoredMenu>
 
+<hr />
+
 <BlazoredMenu MenuBuilder="@MenuBuilder" />
 
+<hr />
+
 
 @code {
     MenuBuilder MenuBuilder = new MenuBuilder();
 
     protected override void OnInitialized()
     {
-        MenuBuilder.AddItem(1, "Home", "/", match: NavLinkMatch.All)
-                   .AddItem(2, "Counter", "counter", isEnabled: false)
-                   .AddSubMenu(3, "Sub Menu", new MenuBuilder().AddItem(1, "Counter", "counter")
-                                                               .AddItem(2, "Fetch Data", "fetchdata", isEnabled: false)
-                                                               .AddItem(3, "You Can't See Me", "invisible", isVisible: false))
-                   .AddItem(4, "FetchData", "fetchdata")
-                   .AddIconCssToClose("oi oi-chevron-top pt-3")
-                   .AddIconCssToOpen("oi oi-chevron-bottom pt-3")  
-                   ;
+        MenuBuilder
+            .AddIconCssToClose("oi oi-chevron-top pt-3")
+            .AddIconCssToOpen("oi oi-chevron-bottom pt-3")
+            .AddItem(1, "Home", "/", match: NavLinkMatch.All)
+            .AddItem(2, "Counter", "counter", isEnabled: false)
+            .AddSubMenu(3, "Sub Menu", new MenuBuilder()
+                .AddItem(1, "Counter", "counter")
+                .AddItem(2, "Fetch Data", "fetchdata", isEnabled: false)
+                .AddItem(3, "You Can't See Me", "invisible", isVisible: false))
+            .AddItem(4, "FetchData", "fetchdata");
     }
-}
+}
diff --git a/samples/BlazorWebAssembly/Pages/Index.razor b/samples/BlazorWebAssembly/Pages/Index.razor
@@ -3,3 +3,33 @@
 <h1>Hello, world!</h1>
 
 Welcome to your new app.
+
+<hr />
+
+<h2>Multi-sublevel menu sample:</h2>
+
+<BlazoredMenu MenuBuilder="@MenuBuilder" />
+
+@code {
+    MenuBuilder MenuBuilder = new MenuBuilder();
+
+    protected override void OnInitialized()
+    {
+        MenuBuilder
+            .AddItem(1, "Home", "/", match: NavLinkMatch.All)
+            .AddItem(2, "Counter", "counter", isEnabled: false)
+            .AddSubMenu(3, "1st level submenu", new MenuBuilder()
+                .AddItem(1, "Counter", "counter")
+                .AddItem(2, "Fetch Data", "fetchdata", isEnabled: false)
+                .AddItem(3, "You Can't See Me", "invisible", isVisible: false)
+                .AddSubMenu(4, "2nd level submenu", new MenuBuilder()
+                    .AddItem(1, "Counter", "counter")
+                    .AddSubMenu(2, "3rd level submenu", new MenuBuilder()
+                        .AddItem(1, "Counter", "counter")
+                        .AddSubMenu(2, "4th level submenu", new MenuBuilder()
+                            .AddItem(1, "Counter", "counter")))))
+            .AddItem(4, "FetchData", "fetchdata")
+            .AddIconCssToClose("oi oi-chevron-top pt-3")
+            .AddIconCssToOpen("oi oi-chevron-bottom pt-3");
+    }
+}
diff --git a/src/Blazored.Menu/BlazoredSubMenu.razor b/src/Blazored.Menu/BlazoredSubMenu.razor
@@ -1,30 +1,38 @@
 @inherits BlazoredSubMenuBase
 @using Microsoft.AspNetCore.Components.Web
 
-    <li class="@CssString" disabled="@(!IsEnabled)">
-        @if (HeaderTemplate != null)
+<li class="@CssString" disabled="@(!IsEnabled)">
+    @if (HeaderTemplate != null)
+    {
+        <span role="button" tabindex="0" @onclick="ToggleSubMenu" @onkeydown="KeyDownHandler">@HeaderTemplate <i class="@IconCss">@Icon</i></span>
+    }
+    else
+    {
+        <span role="button" tabindex="0" @onclick="ToggleSubMenu" @onkeydown="KeyDownHandler">@Header <i class="@IconCss">@Icon</i></span>
+    }
+
+    <ul class="blazored-sub-menu">
+        @if (MenuTemplate != null)
         {
-            <span role="button" tabindex="0" @onclick="ToggleSubMenu" @onkeydown="KeyDownHandler">@HeaderTemplate <i class="@IconCss">@Icon</i></span>
+            @MenuTemplate
         }
         else
         {
-            <span role="button" tabindex="0" @onclick="ToggleSubMenu" @onkeydown="KeyDownHandler">@Header <i class="@IconCss">@Icon</i></span>
-        }
-
-        <ul class="blazored-sub-menu">
-            @if (MenuTemplate != null)
-            {
-                @MenuTemplate
-            }
-            else
+            foreach (var item in MenuItems)
             {
-                foreach (var item in MenuItems)
+                @if (item.IsSubMenu && item.IsVisible)
+                {
+                    <BlazoredSubMenu Header="@item.Title"
+                                     IsEnabled="@item.IsEnabled"
+                                     IconClassToClose="@this.IconClassToClose"
+                                     IconClassToOpen="@this.IconClassToOpen"
+                                     MenuItems="@item.MenuItems.Build(x => x.Position)" />
+                }
+                else if (!item.IsSubMenu && item.IsVisible)
                 {
-                    if (item.IsVisible)
-                    {
-                        <BlazoredMenuItem MenuItem="@item" IsEnabled="@item.IsEnabled" />
-                    }
+                    <BlazoredMenuItem MenuItem="@item" IsEnabled="@item.IsEnabled" />
                 }
             }
-        </ul>
-    </li>
+        }
+    </ul>
+</li>
diff --git a/src/Blazored.Menu/wwwroot/blazored-menu.css b/src/Blazored.Menu/wwwroot/blazored-menu.css
@@ -54,13 +54,13 @@
         padding-bottom: .75rem;
     }
 
-.blazored-sub-menu {
-    display: none;
-    padding: 0;
-    margin-left: 1rem;
-    list-style: none;
-}
+    .blazored-sub-menu-header > .blazored-sub-menu {
+        display: none;
+        padding: 0;
+        margin-left: 1rem;
+        list-style: none;
+    }
 
-.blazored-sub-menu-header.open .blazored-sub-menu {
-    display: block;
-}
+    .blazored-sub-menu-header.open > .blazored-sub-menu {
+        display: block;
+    }