Fixes to horizontal menu logic. Now supports two levels of menu items.

This commit is contained in:
Jayson Furr
2021-01-23 18:24:07 -06:00
parent 7057f93f13
commit 6fdbbeb8ce
4 changed files with 115 additions and 29 deletions

View File

@ -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>
}

View File

@ -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();
}
}
}

View File

@ -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>
}

View File

@ -0,0 +1,6 @@
namespace Oqtane.Themes.Controls
{
public partial class MenuItemsHorizontal : MenuItemsBase
{
}
}