Skip to content

Commit

Permalink
#448 - Refactor main menu. Separate implementation for top menu and b…
Browse files Browse the repository at this point in the history
…ottom menu.
  • Loading branch information
maraf committed Jun 14, 2024
1 parent a449937 commit 2a9e8f6
Show file tree
Hide file tree
Showing 18 changed files with 425 additions and 276 deletions.
12 changes: 12 additions & 0 deletions .config/dotnet-tools.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"version": 1,
"isRoot": true,
"tools": {
"excubo.webcompiler": {
"version": "3.8.15",
"commands": [
"webcompiler"
]
}
}
}
2 changes: 1 addition & 1 deletion src/Money.Blazor.Host/Bootstrap/BootstrapTask.cs
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ public void Initialize()
.AddTransient<CreateExpenseStorage>()
.AddTransient<OfflineCommandDispatcher>()
.AddSingleton<LocalCommandDispatcher>()
.AddSingleton<MenuItemService>()
.AddTransient<MenuItemService>()
.AddSingleton<ICommandHandlerCollection, LocalCommandHandlerCollection>()
.AddTransient<ICommandDispatcher, LocalCommandDispatcher>()
.AddTransient<IQueryDispatcher, HttpQueryDispatcher>()
Expand Down
75 changes: 75 additions & 0 deletions src/Money.Blazor.Host/Layouts/BottomMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,15 @@
</a>
</Match>
}
else if (item.Text == "Main menu")
{
<button data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" class="btn btn-light">
<Icon Identifier="@item.Icon" />
<span class="text">
@item.Text
</span>
</button>
}
else
{
<button @onclick="@item.OnClick" class="btn btn-light">
Expand All @@ -31,4 +40,70 @@
</div>
</div>
</nav>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" style="--bs-offcanvas-height: 42vh;">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Money by Neptuo</h5>
@if (MainMenu != null)
{
var about = MainMenu.More.FirstOrDefault(i => i.Text == "About");
if (about != null)
{
<a href="@about.Url" class="btn btn-light btn-sm ms-3">
<Icon Identifier="@about.Icon" />
@about.Text
</a>
}
}
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body small">
@if (MainMenu != null)
{
<div class="row g-3">
@foreach (var item in MainMenu.Views)
@MainMenuItem(item)
@foreach (var item in MainMenu.More.Where(i => i.Text != "About"))
@MainMenuItem(item)
</div>
<hr />
<div class="row g-3">
@foreach (var item in MainMenu.User)
@MainMenuItem(item)
</div>
}
</div>
</div>
}

@code
{
RenderFragment MainMenuItem(MenuItemModel item)
{
var isLogout = item.Text == "Logout";
return
@<div class="col-3 d-grid">
@if (item.Url != null)
{
<Match Url="@item.Url" PageType="@item.PageType" Context="IsActive">
<a href="@item.Url" class="btn @(IsActive ? "btn-primary" : "btn-light")" @onclick="(() => OnLinkClick(item.IsBlurMenuAfterClick))">
<Icon Identifier="@item.Icon" />
<span class="text d-block">
@item.Text
</span>
</a>
</Match>
}
else
{
<button @onclick="@item.OnClick" class="btn btn-light @(isLogout ? "text-danger" : string.Empty)">
<Icon Identifier="@item.Icon" />
<span class="text d-block">
@item.Text
</span>
</button>
}
</div>
;
}
}
2 changes: 2 additions & 0 deletions src/Money.Blazor.Host/Layouts/BottomMenu.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,15 @@ public partial class BottomMenu : IDisposable,
protected Interop Interop { get; set; }

protected List<IActionMenuItemModel> Items { get; set; }
protected MainMenuItems MainMenu { get; set; }

protected async override Task OnInitializedAsync()
{
EventHandlers.Add<UserPropertyChanged>(this);

await base.OnInitializedAsync();
await LoadAsync();
MainMenu = await Queries.QueryAsync(new ListMainMenuItem());
}

public void Dispose()
Expand Down
2 changes: 1 addition & 1 deletion src/Money.Blazor.Host/Layouts/Layout.razor
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@inject Navigator Navigator

<div class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<nav class="navbar navbar-expand-sm navbar-dark">
<div class="container">
<MainMenu />
</div>
Expand Down
120 changes: 60 additions & 60 deletions src/Money.Blazor.Host/Layouts/MainMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -10,69 +10,69 @@
</Authorized>
</AuthorizeView>
</NavLink>
<HamburgerButton CssClass="navbar-toggler" Click="@OnMainMenuToggleClick" />
<div class="navbar-collapse @(IsMainMenuVisible ? "" : "collapse")">
<div class="collapse navbar-collapse">
<ServerConnection>
<Online>

<ul class="nav navbar-nav me-auto mt-3 mt-lg-0 @MenuLeftMarginCssClass">
<MainMenuLink href="@Navigator.UrlSummary()" PageType="typeof(Pages.SummaryMonth)">
<Icon Identifier="chart-pie" />
Monthly
</MainMenuLink>
<MainMenuLink Href="@Navigator.UrlSummary(ThisYear)" PageType="typeof(Pages.SummaryYear)">
<Icon Identifier="circle" />
Yearly
</MainMenuLink>
<MainMenuLink Href="@Navigator.UrlTrends()">
<Icon Prefix="fas" Identifier="chart-line" />
Trends
</MainMenuLink>
<MainMenuLink Href="@Navigator.UrlBalances(ThisYear)" PageType="typeof(Pages.BalancesMonth)">
<Icon Prefix="fas" Identifier="chart-bar" />
Balances
</MainMenuLink>
<MainMenuLink Href="@Navigator.UrlSearch()">
<Icon Identifier="search" />
Search
</MainMenuLink>
<MainMenuSeparator />
<MainMenuLink Href="@Navigator.UrlCategories()">
<Icon Identifier="tag" />
<span class="d-lg-none d-xl-inline">
Categories
</span>
</MainMenuLink>
<MainMenuLink Href="@Navigator.UrlCurrencies()">
<Icon Identifier="pound-sign" />
<span class="d-lg-none d-xl-inline">
Currencies
</span>
</MainMenuLink>
<MainMenuLink Href="@Navigator.UrlExpenseTemplates()">
<Icon Identifier="redo" />
<span class="d-lg-none d-xl-inline">
Templates
</span>
</MainMenuLink>
<MainMenuSeparator />
<PwaInstall />
<MainMenuLink Href="@Navigator.UrlAbout()" Title="About Money app">
<Icon Identifier="info-circle" />
<span class="d-lg-none">
About
</span>
</MainMenuLink>
</ul>
<AuthorizeView>
<Authorized>
<ul class="nav navbar-nav @MenuLeftMarginCssClass">
<MainMenuSeparator IsVisibleOnDesktop="false" />
<ul class="nav navbar-nav me-auto">
<li class="nav-item dropdown d-md-none">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<Icon Identifier="eye" />
Views
</a>
<ul class="dropdown-menu">
@foreach (var item in ViewsItems)
{
<li>
<a class="dropdown-item" href="@item.Url">
<Icon Identifier="@item.Icon" />
@item.Text
</a>
</li>
}
</ul>
</Authorized>
</AuthorizeView>
<UserInfo ListCssClass="@MenuLeftMarginCssClass" />

</li>
@foreach (var item in ViewsItems)
{
<MainMenuLink CssClass="d-none d-md-inline-block" href="@item.Url" PageType="@item.PageType">
<Icon Identifier="@item.Icon" />
<span class="d-none d-md-inline">@item.Text</span>
</MainMenuLink>
}
<li class="nav-item dropdown d-xl-none">
<a class="nav-link dropdown-toggle dropdown-nocaret d-none d-md-inline-block" href="#" data-bs-toggle="dropdown">
<Icon Identifier="ellipsis-h" />
</a>
<a class="nav-link dropdown-toggle d-md-none" href="#" data-bs-toggle="dropdown">
<Icon Identifier="cogs" />
More
</a>
<ul class="dropdown-menu">
@foreach (var item in MoreItems)
{
@if (item.Text == "About")
{
<li><hr class="dropdown-divider"></li>
}
<li>
<a class="dropdown-item" href="@item.Url">
<Icon Identifier="@item.Icon" />
@item.Text
</a>
</li>
}
</ul>
</li>
@foreach (var item in MoreItems)
{
<MainMenuLink CssClass="d-none d-xl-inline" Href="@item.Url">
<Icon Identifier="@item.Icon" />
<span class="d-none d-lg-inline">
@item.Text
</span>
</MainMenuLink>
}
</ul>
<UserInfo />
</Online>
</ServerConnection>
</div>
24 changes: 18 additions & 6 deletions src/Money.Blazor.Host/Layouts/MainMenu.razor.cs
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
using Microsoft.AspNetCore.Components;
using Money.Events;
using Money.Models;
using Money.Models.Queries;
using Money.Services;
using Neptuo.Events;
using Neptuo.Events.Handlers;
using Neptuo.Logging;
using Neptuo.Queries;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices;
using System.Text;
using System.Threading.Tasks;
using static Money.Services.Navigator;
Expand All @@ -17,11 +20,11 @@ namespace Money.Components
public class MainMenuBase : ComponentBase, IDisposable,
IEventHandler<UserSignedOut>
{
protected const string MenuLeftMarginCssClass = "ms-2 ms-lg-0";
protected static readonly YearModel ThisYear = new YearModel(DateTime.Today.Year);
[Inject]
internal Navigator Navigator { get; set; }

[Inject]
internal Navigator Navigator {get;set;}
internal IQueryDispatcher Queries { get; set; }

[Inject]
internal ILog<MainMenuBase> Log { get; set; }
Expand All @@ -34,6 +37,9 @@ public class MainMenuBase : ComponentBase, IDisposable,

public bool IsMainMenuVisible { get; protected set; } = false;

protected List<MenuItemModel> ViewsItems { get; set; }
protected List<MenuItemModel> MoreItems { get; set; }

protected override void OnInitialized()
{
base.OnInitialized();
Expand All @@ -43,6 +49,15 @@ protected override void OnInitialized()
EventHandlers.Add<UserSignedOut>(this);
}

protected async override Task OnInitializedAsync()
{
await base.OnInitializedAsync();

var items = await Queries.QueryAsync(new ListMainMenuItem());
ViewsItems = items.Views;
MoreItems = items.More;
}

public void Dispose()
{
Navigator.LocationChanged -= OnLocationChanged;
Expand All @@ -67,8 +82,5 @@ Task IEventHandler<UserSignedOut>.HandleAsync(UserSignedOut payload)

private void OnLocationChanged(string url)
=> UpdateMainMenuVisible(false);

protected void OnMainMenuToggleClick()
=> UpdateMainMenuVisible(!IsMainMenuVisible);
}
}
5 changes: 4 additions & 1 deletion src/Money.Blazor.Host/Layouts/MainMenuLink.razor
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<Match Url="@Href" Mode="@HrefMatch" PageType="@PageType" Context="IsActive">
<li class="nav-item">
<li class="nav-item @CssClass">
<a href="@Href" class="nav-link @(IsActive ? "active" : "")" title="@Title">
@ChildContent
</a>
Expand All @@ -14,6 +14,9 @@
[Parameter]
public string Title { get; set; }

[Parameter]
public string CssClass { get; set; }

[Parameter]
public MatchMode HrefMatch { get; set; } = MatchMode.Exact;

Expand Down
Loading

0 comments on commit 2a9e8f6

Please sign in to comment.