Skip to content

Commit

Permalink
Up: adding title presentation for menu sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@mouadcherkaoui
mouadcherkaoui committed Mar 23, 2020
1 parent a907b1e commit 85cdf9d
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 49 deletions.
105 changes: 56 additions & 49 deletions src/BxBlazor/Components/UIShell/BxNavigationMenu.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,66 +8,73 @@
@using Microsoft.AspNetCore.Components.Routing

<div class="@(prefix)--navigation" id="navigation-menu-@NavMenuIdSuffix" @attributes="@(!IsExpanded ? new Dictionary<string, object>{{"hidden", "hidden" }} : new Dictionary<string, object>())" data-navigation-menu>
@if(NavMenuSections != null){
@foreach(var section in NavMenuSections) {
@if (NavMenuSections != null)
{
@foreach (var section in NavMenuSections)
{
<div class="@(prefix)--navigation-section">
<span><h4><strong>@(section.Title)</strong></h4></span>
<ul class="@(prefix)--navigation-items">
@if(section.NavMenuItems != null)
@if (section.NavMenuItems != null)
{
@foreach (var item in section.NavMenuItems) {
var classToApply = item.IsActive
? $" {prefix}--navigation-item--active"
@foreach (var item in section.NavMenuItems)
{
var classToApply = item.IsActive
? $" {prefix}--navigation-item--active"
: (item.HasIcon ? $" {prefix}--navigation-item--icon" : "");

<li class="@(prefix)--navigation-item @(item.HasIcon ? $" {prefix}--navigation-item--icon" : "")">
@if(item.Type == "link"){
<NavLink ActiveClass="@($"{prefix}--navigation__category-item--active")" @attributes="@(getAttributesDict("class", $"{prefix}--navigation-link"))" href="@(item.Uri)">
@if (item.HasIcon) {
@if (item.Type == "link")
{
<NavLink ActiveClass="@($"{prefix}--navigation__category-item--active")" @attributes="@(getAttributesDict("class", $"{prefix}--navigation-link"))" href="@(item.Uri)">
@if (item.HasIcon)
{
<div class="@(prefix)--navigation-icon">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
}
@item.Title
</NavLink>
}
else if (item.Type == "category")
{
var isExpandedClass = item.IsExpanded ? $" {prefix}--navigation__category--expanded" : "";
<div class="@(prefix)--navigation__category@(isExpandedClass)">
<button class="@(prefix)--navigation__category-toggle" aria-haspopup="true" aria-expanded="@(item.IsExpanded.ToString().ToLower())"
aria-controls="category-1-menu">
@if (item.HasIcon)
{
<div class="@(prefix)--navigation-icon">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
}
@item.Title
</NavLink>
}
else if(item.Type == "category") {
var isExpandedClass = item.IsExpanded ? $" {prefix}--navigation__category--expanded" : "";
<div class="@(prefix)--navigation__category@(isExpandedClass)">
<button class="@(prefix)--navigation__category-toggle" aria-haspopup="true" aria-expanded="@(item.IsExpanded.ToString().ToLower())"
aria-controls="category-1-menu">
@if (item.HasIcon)
{
<div class="@(prefix)--navigation-icon">

<svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
}
<div class="@(prefix)--navigation__category-title">
@(item.Title)
<svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
<path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
</button>
<ul id="category-1-menu" class="@(prefix)--navigation__category-items">
@foreach (var link in item.SubMenuItems)
{
<li class="@(prefix)--navigation__category-item">
@*@(link.IsActive ? $"{prefix}--navigation__category-item--active" : "")">*@
<NavLink ActiveClass="@($"{prefix}--navigation__category-item--active")" @attributes="@(getAttributesDict("class", $"{prefix}--navigation-link"))" href="@(link.Uri)">
@(link.Title)
</NavLink>
</li>
}
</ul>
</div>
}
}
<div class="@(prefix)--navigation__category-title">
@(item.Title)
<svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
</svg>
</div>
</button>
<ul id="category-1-menu" class="@(prefix)--navigation__category-items">
@foreach (var link in item.SubMenuItems)
{
<li class="@(prefix)--navigation__category-item">
@*@(link.IsActive ? $"{prefix}--navigation__category-item--active" : "")">*@
<NavLink ActiveClass="@($"{prefix}--navigation__category-item--active")" @attributes="@(getAttributesDict("class", $"{prefix}--navigation-link"))" href="@(link.Uri)">
@(link.Title)
</NavLink>
</li>
}
</ul>
</div>
}
</li>
}
}
}
</ul>
</div>
Expand All @@ -89,7 +96,7 @@
public IEnumerable<NavMenuSection> NavMenuSections { get; set; }

public Dictionary<string, object> getAttributesDict(string key, string value)
=> new Dictionary<string, object>() { { key, value} };
=> new Dictionary<string, object>() { { key, value } };

protected override async Task OnAfterRenderAsync(bool firstRender)
{
Expand Down
1 change: 1 addition & 0 deletions src/BxBlazor/Models/NavMenuSection.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ namespace BxBlazor.Models
{
public class NavMenuSection
{
public string Title { get; set; }
public IEnumerable<NavMenuItem> NavMenuItems { get; set; }
}
}

0 comments on commit 85cdf9d

Please sign in to comment.