From 6fdbbeb8cee032e6a8581f448d5f57147ad041a8 Mon Sep 17 00:00:00 2001
From: Jayson Furr <jayson.furr@outlook.com>
Date: Sat, 23 Jan 2021 18:24:07 -0600
Subject: [PATCH 1/3] Fixes to horizontal menu logic. Now supports two levels
 of menu items.

---
 .../Themes/Controls/MenuHorizontal.razor      | 31 +------
 .../Themes/Controls/MenuItemsBase.cs          | 27 +++++++
 .../Themes/Controls/MenuItemsHorizontal.razor | 80 +++++++++++++++++++
 .../Controls/MenuItemsHorizontal.razor.cs     |  6 ++
 4 files changed, 115 insertions(+), 29 deletions(-)
 create mode 100644 Oqtane.Client/Themes/Controls/MenuItemsBase.cs
 create mode 100644 Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
 create mode 100644 Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor.cs

diff --git a/Oqtane.Client/Themes/Controls/MenuHorizontal.razor b/Oqtane.Client/Themes/Controls/MenuHorizontal.razor
index 575a513b..c4c45f16 100644
--- a/Oqtane.Client/Themes/Controls/MenuHorizontal.razor
+++ b/Oqtane.Client/Themes/Controls/MenuHorizontal.razor
@@ -1,4 +1,5 @@
 @namespace Oqtane.Themes.Controls
+
 @inherits MenuBase
 
 @if (MenuPages.Any())
@@ -10,35 +11,7 @@
     </span>
     <div class="app-menu">
         <div class="collapse navbar-collapse" id="Menu">
-            <ul class="navbar-nav mr-auto">
-                @foreach (var p in MenuPages)
-                {
-                    if (p.PageId == PageState.Page.PageId)
-                    {
-                        <li class="nav-item active">
-                            <a class="nav-link" href="@GetUrl(p)" target="@GetTarget(p)" >
-                                @if (p.Icon != string.Empty)
-                                {
-                                    <span class="@p.Icon" aria-hidden="true"></span>
-                                }
-                                @p.Name<span class="sr-only">(current)</span>
-                            </a>
-                        </li>
-                    }
-                    else
-                    {
-                        <li class="nav-item">
-                            <a class="nav-link" href="@GetUrl(p)"  target="@GetTarget(p)" >
-                                @if (p.Icon != string.Empty)
-                                {
-                                    <span class="@p.Icon" aria-hidden="true"></span>
-                                }
-                                @p.Name
-                            </a>
-                        </li>
-                    }
-                }
-            </ul>
+            <MenuItemsHorizontal ParentPage="null" Pages="MenuPages" />
         </div>
     </div>
 }
diff --git a/Oqtane.Client/Themes/Controls/MenuItemsBase.cs b/Oqtane.Client/Themes/Controls/MenuItemsBase.cs
new file mode 100644
index 00000000..bfdd3cd4
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/MenuItemsBase.cs
@@ -0,0 +1,27 @@
+using System.Collections.Generic;
+using System.Linq;
+
+using Microsoft.AspNetCore.Components;
+
+using Oqtane.Models;
+using Oqtane.UI;
+
+namespace Oqtane.Themes.Controls
+{
+    public abstract class MenuItemsBase : MenuBase
+    {
+        [Parameter()]
+        public Page ParentPage { get; set; }
+
+        [Parameter()]
+        public IEnumerable<Page> Pages { get; set; }
+
+        protected IEnumerable<Page> GetChildPages()
+        {
+            return Pages
+                .Where(e => e.ParentId == ParentPage?.PageId)
+                .OrderBy(e => e.Order)
+                .AsEnumerable();
+        }
+    }
+}
diff --git a/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor b/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
new file mode 100644
index 00000000..3a54c855
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
@@ -0,0 +1,80 @@
+@namespace Oqtane.Themes.Controls
+
+@inherits MenuItemsBase
+
+@if (ParentPage != null)
+{
+    <div class="dropdown-menu" aria-labelledby="@($"navbarDropdown{ParentPage.PageId}")">
+        @foreach (var childPage in GetChildPages())
+        {
+            if (childPage.PageId == PageState.Page.PageId)
+            {
+                <a class="dropdown-item active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                    @childPage.Name<span class="sr-only">(current)</span>
+                </a>
+            }
+            else
+            {
+                <a class="dropdown-item" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                    @childPage.Name
+                </a>
+            }
+        }
+    </div>
+}
+else
+{
+    <ul class="navbar-nav mr-auto">
+        @foreach (var childPage in GetChildPages())
+        {
+            if (!Pages.Any(e => e.ParentId == childPage.PageId))
+            {
+                if (childPage.PageId == PageState.Page.PageId)
+                {
+                    <li class="nav-item active">
+                        <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                            @if (childPage.Icon != string.Empty)
+                            {
+                                <span class="@childPage.Icon" aria-hidden="true"></span>
+                            }
+                            @childPage.Name<span class="sr-only">(current)</span>
+                        </a>
+                    </li>
+                }
+                else
+                {
+                    <li class="nav-item">
+                        <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                            @if (childPage.Icon != string.Empty)
+                            {
+                                <span class="@childPage.Icon" aria-hidden="true"></span>
+                            }
+                            @childPage.Name
+                        </a>
+                    </li>
+                }
+            }
+            else
+            {
+                if (childPage.PageId == PageState.Page.PageId)
+                {
+                    <li class="nav-item dropdown active">
+                        <a class="nav-link dropdown-toggle" href="@GetUrl(childPage)" target="@GetTarget(childPage)" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            @childPage.Name<span class="sr-only">(current)</span>
+                        </a>
+                        <MenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
+                    </li>
+                }
+                else
+                {
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="@GetUrl(childPage)" target="@GetTarget(childPage)" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            @childPage.Name
+                        </a>
+                        <MenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
+                    </li>
+                }
+            }
+        }
+    </ul>
+}
\ No newline at end of file
diff --git a/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor.cs b/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor.cs
new file mode 100644
index 00000000..30226bfb
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor.cs
@@ -0,0 +1,6 @@
+namespace Oqtane.Themes.Controls
+{
+    public partial class MenuItemsHorizontal : MenuItemsBase
+    {
+    }
+}

From f60a4af6d2d2a0a1396d1652909c38dbfa00099b Mon Sep 17 00:00:00 2001
From: Jayson Furr <jayson.furr@outlook.com>
Date: Sat, 23 Jan 2021 21:14:44 -0600
Subject: [PATCH 2/3] Fixes to horizontal menu logic. Now supports multiple
 levels of menu items. Added FontIcon component to reduce duplicate code.

---
 Oqtane.Client/Themes/Controls/FontIcon.razor  |  4 ++
 .../Themes/Controls/FontIcon.razor.cs         | 10 +++
 .../Themes/Controls/MenuItemsHorizontal.razor | 20 +++---
 .../Themes/Controls/MenuItemsVertical.razor   | 62 +++++++++++++++++++
 .../Controls/MenuItemsVertical.razor.cs       |  6 ++
 .../Themes/Controls/MenuVertical.razor        | 20 +-----
 6 files changed, 92 insertions(+), 30 deletions(-)
 create mode 100644 Oqtane.Client/Themes/Controls/FontIcon.razor
 create mode 100644 Oqtane.Client/Themes/Controls/FontIcon.razor.cs
 create mode 100644 Oqtane.Client/Themes/Controls/MenuItemsVertical.razor
 create mode 100644 Oqtane.Client/Themes/Controls/MenuItemsVertical.razor.cs

diff --git a/Oqtane.Client/Themes/Controls/FontIcon.razor b/Oqtane.Client/Themes/Controls/FontIcon.razor
new file mode 100644
index 00000000..04cd682a
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/FontIcon.razor
@@ -0,0 +1,4 @@
+@if (!string.IsNullOrWhiteSpace(Value))
+{
+    <span class="@Value" aria-hidden="true"></span>
+}
\ No newline at end of file
diff --git a/Oqtane.Client/Themes/Controls/FontIcon.razor.cs b/Oqtane.Client/Themes/Controls/FontIcon.razor.cs
new file mode 100644
index 00000000..07ecda89
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/FontIcon.razor.cs
@@ -0,0 +1,10 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Oqtane.Themes.Controls
+{
+    public partial class FontIcon : ComponentBase
+    {
+        [Parameter()]
+        public string Value { get; set; }
+    }
+}
diff --git a/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor b/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
index 3a54c855..1ba03d4f 100644
--- a/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
+++ b/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
@@ -10,12 +10,14 @@
             if (childPage.PageId == PageState.Page.PageId)
             {
                 <a class="dropdown-item active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                    @childPage.Name<span class="sr-only">(current)</span>
+                    <FontIcon Value="@childPage.Icon" />
+                    @childPage.Name <span class="sr-only">(current)</span>
                 </a>
             }
             else
             {
                 <a class="dropdown-item" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                    <FontIcon Value="@childPage.Icon" />
                     @childPage.Name
                 </a>
             }
@@ -33,11 +35,8 @@ else
                 {
                     <li class="nav-item active">
                         <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                            @if (childPage.Icon != string.Empty)
-                            {
-                                <span class="@childPage.Icon" aria-hidden="true"></span>
-                            }
-                            @childPage.Name<span class="sr-only">(current)</span>
+                            <FontIcon Value="@childPage.Icon" />
+                            @childPage.Name <span class="sr-only">(current)</span>
                         </a>
                     </li>
                 }
@@ -45,10 +44,7 @@ else
                 {
                     <li class="nav-item">
                         <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                            @if (childPage.Icon != string.Empty)
-                            {
-                                <span class="@childPage.Icon" aria-hidden="true"></span>
-                            }
+                            <FontIcon Value="@childPage.Icon" />
                             @childPage.Name
                         </a>
                     </li>
@@ -60,7 +56,8 @@ else
                 {
                     <li class="nav-item dropdown active">
                         <a class="nav-link dropdown-toggle" href="@GetUrl(childPage)" target="@GetTarget(childPage)" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            @childPage.Name<span class="sr-only">(current)</span>
+                            <FontIcon Value="@childPage.Icon" />
+                            @childPage.Name <span class="sr-only">(current)</span>
                         </a>
                         <MenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
                     </li>
@@ -69,6 +66,7 @@ else
                 {
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="@GetUrl(childPage)" target="@GetTarget(childPage)" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <FontIcon Value="@childPage.Icon" />
                             @childPage.Name
                         </a>
                         <MenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
diff --git a/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor b/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor
new file mode 100644
index 00000000..ab6c92d8
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor
@@ -0,0 +1,62 @@
+@namespace Oqtane.Themes.Controls
+
+@inherits MenuItemsBase
+
+@if (ParentPage != null)
+{
+    foreach (var childPage in GetChildPages())
+    {
+        if (childPage.PageId == PageState.Page.PageId)
+        {
+            <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                <a class="nav-link active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                    <FontIcon Value="@childPage.Icon" />
+                    @childPage.Name <span class="sr-only">(current)</span>
+                </a>
+            </li>
+        }
+        else
+        {
+            <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                    <FontIcon Value="@childPage.Icon" />
+                    @childPage.Name
+                </a>
+            </li>
+        }
+        if (Pages.Any(e => e.ParentId == childPage.PageId))
+        {
+            <MenuItemsVertical ParentPage="childPage" Pages="Pages" />
+        }
+    }
+}
+else
+{
+    <ul class="nav flex-column">
+        @foreach (var childPage in GetChildPages())
+        {
+            if (childPage.PageId == PageState.Page.PageId)
+            {
+                <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                    <a class="nav-link active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                        <FontIcon Value="@childPage.Icon" />
+                        @childPage.Name <span class="sr-only">(current)</span>
+                    </a>
+                </li>
+            }
+            else
+            {
+                <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                    <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                        <FontIcon Value="@childPage.Icon" />
+                        @childPage.Name
+                    </a>
+                </li>
+            }
+            if (Pages.Any(e => e.ParentId == childPage.PageId))
+            {
+                <MenuItemsVertical ParentPage="childPage" Pages="Pages" />
+            }
+        }
+    </ul>
+}
\ No newline at end of file
diff --git a/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor.cs b/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor.cs
new file mode 100644
index 00000000..85ba00b8
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor.cs
@@ -0,0 +1,6 @@
+namespace Oqtane.Themes.Controls
+{
+    public partial class MenuItemsVertical : MenuItemsBase
+    {
+    }
+}
diff --git a/Oqtane.Client/Themes/Controls/MenuVertical.razor b/Oqtane.Client/Themes/Controls/MenuVertical.razor
index 79b20589..a552ea11 100644
--- a/Oqtane.Client/Themes/Controls/MenuVertical.razor
+++ b/Oqtane.Client/Themes/Controls/MenuVertical.razor
@@ -10,25 +10,7 @@
     </span>
     <div class="app-menu">
         <div class="collapse navbar-collapse" id="Menu">
-            <ul class="nav flex-column">
-                @foreach (var p in MenuPages)
-                {
-                    <li class="nav-item px-3">
-                        <a href="@GetUrl(p)" class="nav-link" style="padding-left:@((p.Level + 1) * 15)px !important;" target="@GetTarget(p)">
-
-                            @if (p.HasChildren)
-                            {
-                                <i class="oi oi-chevron-right"></i>
-                            }
-                            @if (p.Icon != string.Empty)
-                            {
-                                <span class="@p.Icon" aria-hidden="true"></span>
-                            }
-                            @p.Name
-                        </a>
-                    </li>
-                }
-            </ul>
+            <MenuItemsVertical ParentPage="null" Pages="MenuPages" />
         </div>
     </div>
 }

From 5a02ce612481a1bc33fdc9e48ee35e02990fbe5a Mon Sep 17 00:00:00 2001
From: Jayson Furr <jayson.furr@outlook.com>
Date: Sat, 23 Jan 2021 21:14:44 -0600
Subject: [PATCH 3/3] Fixes to vertical menu logic. Now supports multiple
 levels of menu items. Added FontIcon component to reduce duplicate code.

---
 Oqtane.Client/Themes/Controls/FontIcon.razor  |  4 ++
 .../Themes/Controls/FontIcon.razor.cs         | 10 +++
 .../Themes/Controls/MenuItemsHorizontal.razor | 20 +++---
 .../Themes/Controls/MenuItemsVertical.razor   | 62 +++++++++++++++++++
 .../Controls/MenuItemsVertical.razor.cs       |  6 ++
 .../Themes/Controls/MenuVertical.razor        | 20 +-----
 6 files changed, 92 insertions(+), 30 deletions(-)
 create mode 100644 Oqtane.Client/Themes/Controls/FontIcon.razor
 create mode 100644 Oqtane.Client/Themes/Controls/FontIcon.razor.cs
 create mode 100644 Oqtane.Client/Themes/Controls/MenuItemsVertical.razor
 create mode 100644 Oqtane.Client/Themes/Controls/MenuItemsVertical.razor.cs

diff --git a/Oqtane.Client/Themes/Controls/FontIcon.razor b/Oqtane.Client/Themes/Controls/FontIcon.razor
new file mode 100644
index 00000000..04cd682a
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/FontIcon.razor
@@ -0,0 +1,4 @@
+@if (!string.IsNullOrWhiteSpace(Value))
+{
+    <span class="@Value" aria-hidden="true"></span>
+}
\ No newline at end of file
diff --git a/Oqtane.Client/Themes/Controls/FontIcon.razor.cs b/Oqtane.Client/Themes/Controls/FontIcon.razor.cs
new file mode 100644
index 00000000..07ecda89
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/FontIcon.razor.cs
@@ -0,0 +1,10 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Oqtane.Themes.Controls
+{
+    public partial class FontIcon : ComponentBase
+    {
+        [Parameter()]
+        public string Value { get; set; }
+    }
+}
diff --git a/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor b/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
index 3a54c855..1ba03d4f 100644
--- a/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
+++ b/Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
@@ -10,12 +10,14 @@
             if (childPage.PageId == PageState.Page.PageId)
             {
                 <a class="dropdown-item active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                    @childPage.Name<span class="sr-only">(current)</span>
+                    <FontIcon Value="@childPage.Icon" />
+                    @childPage.Name <span class="sr-only">(current)</span>
                 </a>
             }
             else
             {
                 <a class="dropdown-item" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                    <FontIcon Value="@childPage.Icon" />
                     @childPage.Name
                 </a>
             }
@@ -33,11 +35,8 @@ else
                 {
                     <li class="nav-item active">
                         <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                            @if (childPage.Icon != string.Empty)
-                            {
-                                <span class="@childPage.Icon" aria-hidden="true"></span>
-                            }
-                            @childPage.Name<span class="sr-only">(current)</span>
+                            <FontIcon Value="@childPage.Icon" />
+                            @childPage.Name <span class="sr-only">(current)</span>
                         </a>
                     </li>
                 }
@@ -45,10 +44,7 @@ else
                 {
                     <li class="nav-item">
                         <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
-                            @if (childPage.Icon != string.Empty)
-                            {
-                                <span class="@childPage.Icon" aria-hidden="true"></span>
-                            }
+                            <FontIcon Value="@childPage.Icon" />
                             @childPage.Name
                         </a>
                     </li>
@@ -60,7 +56,8 @@ else
                 {
                     <li class="nav-item dropdown active">
                         <a class="nav-link dropdown-toggle" href="@GetUrl(childPage)" target="@GetTarget(childPage)" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            @childPage.Name<span class="sr-only">(current)</span>
+                            <FontIcon Value="@childPage.Icon" />
+                            @childPage.Name <span class="sr-only">(current)</span>
                         </a>
                         <MenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
                     </li>
@@ -69,6 +66,7 @@ else
                 {
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="@GetUrl(childPage)" target="@GetTarget(childPage)" id="@($"navbarDropdown{childPage.PageId}")" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <FontIcon Value="@childPage.Icon" />
                             @childPage.Name
                         </a>
                         <MenuItemsHorizontal ParentPage="childPage" Pages="Pages" />
diff --git a/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor b/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor
new file mode 100644
index 00000000..ab6c92d8
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor
@@ -0,0 +1,62 @@
+@namespace Oqtane.Themes.Controls
+
+@inherits MenuItemsBase
+
+@if (ParentPage != null)
+{
+    foreach (var childPage in GetChildPages())
+    {
+        if (childPage.PageId == PageState.Page.PageId)
+        {
+            <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                <a class="nav-link active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                    <FontIcon Value="@childPage.Icon" />
+                    @childPage.Name <span class="sr-only">(current)</span>
+                </a>
+            </li>
+        }
+        else
+        {
+            <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                    <FontIcon Value="@childPage.Icon" />
+                    @childPage.Name
+                </a>
+            </li>
+        }
+        if (Pages.Any(e => e.ParentId == childPage.PageId))
+        {
+            <MenuItemsVertical ParentPage="childPage" Pages="Pages" />
+        }
+    }
+}
+else
+{
+    <ul class="nav flex-column">
+        @foreach (var childPage in GetChildPages())
+        {
+            if (childPage.PageId == PageState.Page.PageId)
+            {
+                <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                    <a class="nav-link active" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                        <FontIcon Value="@childPage.Icon" />
+                        @childPage.Name <span class="sr-only">(current)</span>
+                    </a>
+                </li>
+            }
+            else
+            {
+                <li class="nav-item px-3" style="margin-left: @(childPage.Level * 15)px;">
+                    <a class="nav-link" href="@GetUrl(childPage)" target="@GetTarget(childPage)">
+                        <FontIcon Value="@childPage.Icon" />
+                        @childPage.Name
+                    </a>
+                </li>
+            }
+            if (Pages.Any(e => e.ParentId == childPage.PageId))
+            {
+                <MenuItemsVertical ParentPage="childPage" Pages="Pages" />
+            }
+        }
+    </ul>
+}
\ No newline at end of file
diff --git a/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor.cs b/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor.cs
new file mode 100644
index 00000000..85ba00b8
--- /dev/null
+++ b/Oqtane.Client/Themes/Controls/MenuItemsVertical.razor.cs
@@ -0,0 +1,6 @@
+namespace Oqtane.Themes.Controls
+{
+    public partial class MenuItemsVertical : MenuItemsBase
+    {
+    }
+}
diff --git a/Oqtane.Client/Themes/Controls/MenuVertical.razor b/Oqtane.Client/Themes/Controls/MenuVertical.razor
index 79b20589..a552ea11 100644
--- a/Oqtane.Client/Themes/Controls/MenuVertical.razor
+++ b/Oqtane.Client/Themes/Controls/MenuVertical.razor
@@ -10,25 +10,7 @@
     </span>
     <div class="app-menu">
         <div class="collapse navbar-collapse" id="Menu">
-            <ul class="nav flex-column">
-                @foreach (var p in MenuPages)
-                {
-                    <li class="nav-item px-3">
-                        <a href="@GetUrl(p)" class="nav-link" style="padding-left:@((p.Level + 1) * 15)px !important;" target="@GetTarget(p)">
-
-                            @if (p.HasChildren)
-                            {
-                                <i class="oi oi-chevron-right"></i>
-                            }
-                            @if (p.Icon != string.Empty)
-                            {
-                                <span class="@p.Icon" aria-hidden="true"></span>
-                            }
-                            @p.Name
-                        </a>
-                    </li>
-                }
-            </ul>
+            <MenuItemsVertical ParentPage="null" Pages="MenuPages" />
         </div>
     </div>
 }