Fixes to horizontal menu logic. Now supports two levels of menu items.
This commit is contained in:
@ -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>
|
||||
}
|
||||
|
27
Oqtane.Client/Themes/Controls/MenuItemsBase.cs
Normal file
27
Oqtane.Client/Themes/Controls/MenuItemsBase.cs
Normal 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();
|
||||
}
|
||||
}
|
||||
}
|
80
Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
Normal file
80
Oqtane.Client/Themes/Controls/MenuItemsHorizontal.razor
Normal 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>
|
||||
}
|
@ -0,0 +1,6 @@
|
||||
namespace Oqtane.Themes.Controls
|
||||
{
|
||||
public partial class MenuItemsHorizontal : MenuItemsBase
|
||||
{
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user