#289 - Bottom menu with fixed items.

maraf · May 25, 2021 · b64a500 · b64a500
1 parent dd40b7e
commit b64a500
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 16 deletions.
diff --git a/src/Money.Blazor.Host/Layouts/BottomMenu.razor b/src/Money.Blazor.Host/Layouts/BottomMenu.razor
@@ -0,0 +1,27 @@
+<div class="row my-2 [email protected]">
+    @foreach (var item in Items)
+    {
+        <div class="col">
+            @if (item.Url != null)
+            {
+                <Match Url="@item.Url" PageType="@item.PageType" Context="IsActive">
+                    <a href="@item.Url" class="btn btn-block @(IsActive ? "btn-primary" : "btn-light")">
+                        <Icon Identifier="@item.Icon" />
+                        <span class="text">
+                            @item.Text
+                        </span>
+                    </a>
+                </Match>
+            }
+            else
+            {
+                <button @onclick="@item.OnClick" class="btn btn-block btn-light">
+                    <Icon Identifier="@item.Icon" />
+                    <span class="text">
+                        @item.Text
+                    </span>
+                </button>
+            }
+        </div>
+    }
+</div>
diff --git a/src/Money.Blazor.Host/Layouts/BottomMenu.razor.cs b/src/Money.Blazor.Host/Layouts/BottomMenu.razor.cs
@@ -0,0 +1,63 @@
+using Microsoft.AspNetCore.Components;
+using Money.Pages;
+using Money.Services;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Money.Layouts
+{
+    public partial class BottomMenu
+    {
+        [Inject]
+        protected Navigator Navigator { get; set; }
+
+        protected List<MenuItemModel> Items { get; set; }
+
+        protected async override Task OnInitializedAsync()
+        {
+            await base.OnInitializedAsync();
+
+            Items = new List<MenuItemModel>()
+            {
+                new MenuItemModel()
+                {
+                    Icon = "chart-pie",
+                    Text = "Monthly",
+                    Url = Navigator.UrlSummary(),
+                    PageType = typeof(SummaryMonth)
+                },
+                new MenuItemModel()
+                {
+                    Icon = "search",
+                    Text = "Search",
+                    Url = Navigator.UrlSearch()
+                },
+                new MenuItemModel()
+                {
+                    Icon = "tag",
+                    Text = "Categories",
+                    Url = Navigator.UrlCategories()
+                },
+                new MenuItemModel()
+                {
+                    Icon = "minus-circle",
+                    Text = "New Expense",
+                    OnClick = Navigator.OpenExpenseCreate
+                }
+            };
+        }
+    }
+
+    public class MenuItemModel
+    {
+        public string Icon { get; set; }
+        public string Text { get; set; }
+        public string Url { get; set; }
+        public Type PageType { get; set; }
+        public Action OnClick { get; set; }
+    }
+}
diff --git a/src/Money.Blazor.Host/Layouts/Layout.razor b/src/Money.Blazor.Host/Layouts/Layout.razor
@@ -1,5 +1,4 @@
-@using Neptuo.Exceptions.Handlers
-@inherits LayoutComponentBase
+@inherits LayoutComponentBase
 
 <nav class="navbar fixed-top navbar-expand-lg navbar-dark">
     <div class="container">
@@ -9,7 +8,12 @@
 <div class="container body-content">
     @Body
 </div>
-<footer>
+<nav class="fixed-bottom d-block d-sm-none bottom-bar">
+    <div class="container">
+        <BottomMenu />
+    </div>
+</nav>
+<footer class="d-none d-sm-block">
     <div class="container">
         <hr />
 

diff --git a/src/Money.Blazor.Host/Layouts/MainMenuLink.razor b/src/Money.Blazor.Host/Layouts/MainMenuLink.razor
@@ -1,5 +1,22 @@
-<li class="nav-item">
-    <a href="@Href" class="nav-link @(IsActive() ? "active" : "")">
-        @ChildContent
-    </a>
-</li>
+<Match Url="@Href" Mode="@HrefMatch" PageType="@PageType" Context="IsActive">
+    <li class="nav-item">
+        <a href="@Href" class="nav-link @(IsActive ? "active" : "")">
+            @ChildContent
+        </a>
+    </li>
+</Match>
+
+@code
+{
+    [Parameter]
+    public string Href { get; set; }
+
+    [Parameter]
+    public MatchMode HrefMatch { get; set; } = MatchMode.Exact;
+
+    [Parameter]
+    public Type PageType { get; set; }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+}
diff --git a/src/Money.Blazor.Host/Layouts/Match.razor b/src/Money.Blazor.Host/Layouts/Match.razor
@@ -0,0 +1 @@
+@ChildContent(IsActive())
diff --git a/...Blazor.Host/Layouts/MainMenuLink.razor.cs → src/Money.Blazor.Host/Layouts/Match.razor.cs b/...Blazor.Host/Layouts/MainMenuLink.razor.cs → src/Money.Blazor.Host/Layouts/Match.razor.cs
@@ -9,22 +9,22 @@
 
 namespace Money.Layouts
 {
-    public partial class MainMenuLink : IDisposable
+    public partial class Match : IDisposable
     {
         [Inject]
         protected NavigationManager NavigationManager { get; set; }
 
         [Parameter]
-        public string Href { get; set; }
+        public string Url { get; set; }
 
         [Parameter]
-        public MainMenuLinkMatch HrefMatch { get; set; } = MainMenuLinkMatch.Exact;
+        public MatchMode Mode { get; set; } = MatchMode.Exact;
 
         [Parameter]
         public Type PageType { get; set; }
 
         [Parameter]
-        public RenderFragment ChildContent { get; set; }
+        public RenderFragment<bool> ChildContent { get; set; }
 
         [CascadingParameter]
         public RouteData RouteData { get; set; }
@@ -49,7 +49,7 @@ protected bool IsActive()
                 return PageType == RouteData.PageType;
 
             string currentUrl = "/" + NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
-            if ((HrefMatch == MainMenuLinkMatch.Exact && Href == currentUrl) || currentUrl.StartsWith(Href))
+            if ((Mode == MatchMode.Exact && Url == currentUrl) || currentUrl.StartsWith(Url))
                 return true;
 
             return false;

diff --git a/....Blazor.Host/Layouts/MainMenuLinkMatch.cs → src/Money.Blazor.Host/Layouts/MatchMode.cs b/....Blazor.Host/Layouts/MainMenuLinkMatch.cs → src/Money.Blazor.Host/Layouts/MatchMode.cs
@@ -7,7 +7,7 @@
 
 namespace Money.Layouts
 {
-    public enum MainMenuLinkMatch
+    public enum MatchMode
     {
         Exact,
         StartsWith

diff --git a/src/Money.Blazor.Host/Layouts/UserInfo.razor b/src/Money.Blazor.Host/Layouts/UserInfo.razor
@@ -13,7 +13,7 @@
                 <ChildContent>
                     @if (Profile != null)
                     {
-                        <MainMenuLink Href="@Navigator.UrlUserManage()" HrefMatch="@MainMenuLinkMatch.StartsWith">
+                        <MainMenuLink Href="@Navigator.UrlUserManage()" HrefMatch="@MatchMode.StartsWith">
                             <Icon Identifier="user" />
                             <span class="d-lg-none d-xl-inline">
                                 @Profile.UserName

diff --git a/src/Money.Blazor.Host/Money.Blazor.Host.csproj b/src/Money.Blazor.Host/Money.Blazor.Host.csproj
@@ -38,9 +38,17 @@
   <PropertyGroup>
     <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
   </PropertyGroup>
+  <ItemGroup>
+    <Watch Remove="Layouts\Match.razor" />
+  </ItemGroup>
   <ItemGroup>
     <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
   </ItemGroup>
+  <ItemGroup>
+    <Compile Update="Layouts\Match.razor.cs">
+      <DependentUpon>Match.razor</DependentUpon>
+    </Compile>
+  </ItemGroup>
 
   <!-- GitHubPages publish -->
   <Target Name="PublishGitHubFiles" AfterTargets="ComputeFilesToPublish">