From 2a9e8f66d4ff0ee9e92d85b0ebd895656d7b8e16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Fi=C5=A1era?= <mara@neptuo.com>
Date: Fri, 14 Jun 2024 21:48:28 +0200
Subject: [PATCH] #448 - Refactor main menu. Separate implementation for top
 menu and bottom menu.

---
 .config/dotnet-tools.json                     |  12 ++
 .../Bootstrap/BootstrapTask.cs                |   2 +-
 .../Layouts/BottomMenu.razor                  |  75 +++++++++
 .../Layouts/BottomMenu.razor.cs               |   2 +
 src/Money.Blazor.Host/Layouts/Layout.razor    |   2 +-
 src/Money.Blazor.Host/Layouts/MainMenu.razor  | 120 +++++++-------
 .../Layouts/MainMenu.razor.cs                 |  24 ++-
 .../Layouts/MainMenuLink.razor                |   5 +-
 src/Money.Blazor.Host/Layouts/UserInfo.razor  |  72 +++-----
 .../Layouts/UserInfo.razor.cs                 |   7 +-
 .../MenuItems/MenuItemService.cs              |  86 +++++++++-
 .../MenuItems/Models/MenuItemModel.cs         |  21 ++-
 .../Models/Queries/ListMainMenuItem.cs        |  19 +++
 .../Money.Blazor.Host.csproj                  |   8 +
 .../webcompilerconfiguration.json             |  22 +++
 src/Money.Blazor.Host/wwwroot/css/site.css    | 154 +++++++++---------
 .../wwwroot/css/site.min.css                  |   2 +-
 src/Money.Blazor.Host/wwwroot/css/site.scss   |  68 +-------
 18 files changed, 425 insertions(+), 276 deletions(-)
 create mode 100644 .config/dotnet-tools.json
 create mode 100644 src/Money.Blazor.Host/MenuItems/Models/Queries/ListMainMenuItem.cs
 create mode 100644 src/Money.Blazor.Host/webcompilerconfiguration.json

diff --git a/.config/dotnet-tools.json b/.config/dotnet-tools.json
new file mode 100644
index 00000000..66623acc
--- /dev/null
+++ b/.config/dotnet-tools.json
@@ -0,0 +1,12 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "excubo.webcompiler": {
+      "version": "3.8.15",
+      "commands": [
+        "webcompiler"
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Money.Blazor.Host/Bootstrap/BootstrapTask.cs b/src/Money.Blazor.Host/Bootstrap/BootstrapTask.cs
index fbd6f554..4f7f5d4f 100644
--- a/src/Money.Blazor.Host/Bootstrap/BootstrapTask.cs
+++ b/src/Money.Blazor.Host/Bootstrap/BootstrapTask.cs
@@ -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>()
diff --git a/src/Money.Blazor.Host/Layouts/BottomMenu.razor b/src/Money.Blazor.Host/Layouts/BottomMenu.razor
index c4730782..1ad5d051 100644
--- a/src/Money.Blazor.Host/Layouts/BottomMenu.razor
+++ b/src/Money.Blazor.Host/Layouts/BottomMenu.razor
@@ -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">
@@ -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>
+        ;
+    }
+}
\ No newline at end of file
diff --git a/src/Money.Blazor.Host/Layouts/BottomMenu.razor.cs b/src/Money.Blazor.Host/Layouts/BottomMenu.razor.cs
index 66ae9e87..ea9f09b8 100644
--- a/src/Money.Blazor.Host/Layouts/BottomMenu.razor.cs
+++ b/src/Money.Blazor.Host/Layouts/BottomMenu.razor.cs
@@ -32,6 +32,7 @@ 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()
         {
@@ -39,6 +40,7 @@ protected async override Task OnInitializedAsync()
 
             await base.OnInitializedAsync();
             await LoadAsync();
+            MainMenu = await Queries.QueryAsync(new ListMainMenuItem());
         }
 
         public void Dispose()
diff --git a/src/Money.Blazor.Host/Layouts/Layout.razor b/src/Money.Blazor.Host/Layouts/Layout.razor
index cbc45685..4884cec4 100644
--- a/src/Money.Blazor.Host/Layouts/Layout.razor
+++ b/src/Money.Blazor.Host/Layouts/Layout.razor
@@ -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>
diff --git a/src/Money.Blazor.Host/Layouts/MainMenu.razor b/src/Money.Blazor.Host/Layouts/MainMenu.razor
index 50367812..ebbd7cdd 100644
--- a/src/Money.Blazor.Host/Layouts/MainMenu.razor
+++ b/src/Money.Blazor.Host/Layouts/MainMenu.razor
@@ -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>
diff --git a/src/Money.Blazor.Host/Layouts/MainMenu.razor.cs b/src/Money.Blazor.Host/Layouts/MainMenu.razor.cs
index cc5d7abd..0068e3af 100644
--- a/src/Money.Blazor.Host/Layouts/MainMenu.razor.cs
+++ b/src/Money.Blazor.Host/Layouts/MainMenu.razor.cs
@@ -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;
@@ -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; }
@@ -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();
@@ -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;
@@ -67,8 +82,5 @@ Task IEventHandler<UserSignedOut>.HandleAsync(UserSignedOut payload)
 
         private void OnLocationChanged(string url)
             => UpdateMainMenuVisible(false);
-
-        protected void OnMainMenuToggleClick()
-            => UpdateMainMenuVisible(!IsMainMenuVisible);
     }
 }
diff --git a/src/Money.Blazor.Host/Layouts/MainMenuLink.razor b/src/Money.Blazor.Host/Layouts/MainMenuLink.razor
index 51d3fd14..d1e8271b 100644
--- a/src/Money.Blazor.Host/Layouts/MainMenuLink.razor
+++ b/src/Money.Blazor.Host/Layouts/MainMenuLink.razor
@@ -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>
@@ -14,6 +14,9 @@
     [Parameter]
     public string Title { get; set; }
 
+    [Parameter]
+    public string CssClass { get; set; }
+
     [Parameter]
     public MatchMode HrefMatch { get; set; } = MatchMode.Exact;
 
diff --git a/src/Money.Blazor.Host/Layouts/UserInfo.razor b/src/Money.Blazor.Host/Layouts/UserInfo.razor
index 4b28743f..3ecb2af2 100644
--- a/src/Money.Blazor.Host/Layouts/UserInfo.razor
+++ b/src/Money.Blazor.Host/Layouts/UserInfo.razor
@@ -12,62 +12,30 @@
             <ChildContent>
                 @if (Profile != null)
                 {
-                    <li class="nav-item dropdown d-none d-lg-block">
+                    <li class="nav-item dropdown d-none d-sm-block">
                         <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                             <Icon Identifier="user-circle" />
                             Me
                         </a>
-                        <ul class="dropdown-menu dropdown-menu-end">
-                            <li>
-                                <a class="dropdown-item" href="@Navigator.UrlUserProfile()">
-                                    <Icon Identifier="address-card" />
-                                    Profile
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" href="@Navigator.UrlUserPassword()">
-                                    <Icon Identifier="key" />
-                                    Password
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" href="@Navigator.UrlUserSettings()">
-                                    <Icon Identifier="cog" />
-                                    Settings
-                                </a>
-                            </li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li>
-                                <a class="dropdown-item text-danger cursor-pointer" @onclick="@OnLogoutAsync">
-                                    <Icon Prefix="fas" Identifier="sign-out-alt" />
-                                    Logout
-                                </a>
-                            </li>
-                        </ul>
-                    </li>
-                    <li class="d-block d-lg-none">
-                        <a class="nav-link" href="@Navigator.UrlUserProfile()">
-                            <Icon Identifier="address-card" />
-                            Profile
-                        </a>
-                    </li>
-                    <li class="d-block d-lg-none">
-                        <a class="nav-link" href="@Navigator.UrlUserPassword()">
-                            <Icon Identifier="key" />
-                            Password
-                        </a>
-                    </li>
-                    <li class="d-block d-lg-none">
-                        <a class="nav-link" href="@Navigator.UrlUserSettings()">
-                            <Icon Identifier="cog" />
-                            Settings
-                        </a>
-                    </li>
-                    <li class="d-block d-lg-none">
-                        <a class="nav-link text-danger cursor-pointer" @onclick="@OnLogoutAsync">
-                            <Icon Prefix="fas" Identifier="sign-out-alt" />
-                            Logout
-                        </a>
+                        @if (MenuItems != null)
+                        {
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                @foreach (var item in MenuItems)
+                                {
+                                    var isLogout = item.Text == "Logout";
+                                    @if (isLogout)
+                                    {
+                                        <li><hr class="dropdown-divider"></li>
+                                    }
+                                    <li>
+                                        <a class="dropdown-item @(isLogout ? "text-danger" : string.Empty) cursor-pointer" href="@item.Url" @onclick="@item.OnClick">
+                                            <Icon Identifier="@item.Icon" />
+                                            @item.Text
+                                        </a>
+                                    </li>
+                                }
+                            </ul>
+                        }
                     </li>
                 }
             </ChildContent>
diff --git a/src/Money.Blazor.Host/Layouts/UserInfo.razor.cs b/src/Money.Blazor.Host/Layouts/UserInfo.razor.cs
index cbd28c57..e4b2fb9c 100644
--- a/src/Money.Blazor.Host/Layouts/UserInfo.razor.cs
+++ b/src/Money.Blazor.Host/Layouts/UserInfo.razor.cs
@@ -45,12 +45,16 @@ public partial class UserInfo : IDisposable, IEventHandler<UserSignedIn>, IEvent
 
         protected LoadingContext Loading { get; } = new LoadingContext();
 
+        protected List<MenuItemModel> MenuItems { get; set; }
+
         protected async override Task OnInitializedAsync()
         {
             BindEvents();
 
             await base.OnInitializedAsync();
             await LoadProfileAsync();
+
+            MenuItems = (await Queries.QueryAsync(new ListMainMenuItem())).User;
         }
 
         private async Task LoadProfileAsync()
@@ -63,9 +67,6 @@ private async Task LoadProfileAsync()
             }
         }
 
-        protected Task OnLogoutAsync()
-            => ApiClient.LogoutAsync();
-
         public void Dispose()
         {
             UnBindEvents();
diff --git a/src/Money.Blazor.Host/MenuItems/MenuItemService.cs b/src/Money.Blazor.Host/MenuItems/MenuItemService.cs
index 5bd80299..7c99ee66 100644
--- a/src/Money.Blazor.Host/MenuItems/MenuItemService.cs
+++ b/src/Money.Blazor.Host/MenuItems/MenuItemService.cs
@@ -18,9 +18,12 @@ internal class MenuItemService : HttpQueryDispatcher.IMiddleware
     {
         private const string DefaultValue = "main-menu,summary-month,expense-create";
 
+        protected static readonly YearModel ThisYear = new YearModel(DateTime.Today.Year);
+
         private readonly List<MenuItemModel> storage;
+        private readonly MainMenuItems mainMenu;
 
-        public MenuItemService(Navigator navigator)
+        public MenuItemService(Navigator navigator, ApiClient apiClient)
         {
             Ensure.NotNull(navigator, "navigator");
 
@@ -82,6 +85,83 @@ public MenuItemService(Navigator navigator)
                     OnClick = navigator.OpenExpenseCreate
                 }
             };
+
+            mainMenu = new MainMenuItems(
+                [
+                    new(
+                        Text: "Monthly",
+                        Icon: "chart-pie",
+                        Url: navigator.UrlSummary(),
+                        PageType: typeof(Pages.SummaryMonth)
+                    ),
+                    new(
+                        Text: "Yearly",
+                        Icon: "circle",
+                        Url: navigator.UrlSummary(ThisYear),
+                        PageType: typeof(Pages.SummaryYear)
+                    ),
+                    new(
+                        Text: "Trends",
+                        Icon: "chart-line",
+                        Url: navigator.UrlTrends()
+                    ),
+                    new(
+                        Text: "Balances",
+                        Icon: "chart-bar",
+                        Url: navigator.UrlBalances(ThisYear),
+                        PageType: typeof(Pages.BalancesMonth)
+                    ),
+                    new(
+                        Text: "Search",
+                        Icon: "search",
+                        Url: navigator.UrlSearch()
+                    )
+                ],
+                [
+                    new(
+                        Text: "Categories",
+                        Icon: "tag",
+                        Url: navigator.UrlCategories()
+                    ),
+                    new(
+                        Text: "Currencies",
+                        Icon: "pound-sign",
+                        Url: navigator.UrlCurrencies()
+                    ),
+                    new(
+                        Text: "Templates",
+                        Icon: "redo",
+                        Url: navigator.UrlExpenseTemplates()
+                    ),
+                    new(
+                        Text: "About",
+                        Icon: "info-circle",
+                        Url: navigator.UrlAbout()
+                    )
+                ],
+                [
+                    new(
+                        Text: "Profile",
+                        Icon: "address-card",
+                        Url: navigator.UrlUserProfile()
+                    ),
+                    new(
+                        Text: "Password",
+                        Icon: "key",
+                        Url: navigator.UrlUserPassword()
+                    ),
+                    new(
+                        Text: "Settings",
+                        Icon: "cog",
+                        Url: navigator.UrlUserSettings()
+                    ),
+                    new(
+                        Text: "Logout",
+                        Icon: "sign-out-alt",
+                        OnClick: async () => await apiClient.LogoutAsync()
+                    )
+                ]
+            );
         }
 
         async Task<object> HttpQueryDispatcher.IMiddleware.ExecuteAsync(object query, HttpQueryDispatcher dispatcher, HttpQueryDispatcher.Next next)
@@ -96,6 +176,10 @@ async Task<object> HttpQueryDispatcher.IMiddleware.ExecuteAsync(object query, Ht
             {
                 return storage.ToList<IAvailableMenuItemModel>();
             }
+            else if (query is ListMainMenuItem)
+            {
+                return mainMenu;
+            }
             else if (query is FindUserProperty findProperty && findProperty.Key == "MobileMenu")
             {
                 var value = (string)await next(findProperty);
diff --git a/src/Money.Blazor.Host/MenuItems/Models/MenuItemModel.cs b/src/Money.Blazor.Host/MenuItems/Models/MenuItemModel.cs
index cdd1c0c9..95459113 100644
--- a/src/Money.Blazor.Host/MenuItems/Models/MenuItemModel.cs
+++ b/src/Money.Blazor.Host/MenuItems/Models/MenuItemModel.cs
@@ -7,15 +7,14 @@
 
 namespace Money.Models
 {
-    public class MenuItemModel : IActionMenuItemModel, IAvailableMenuItemModel
-    {
-        public string Identifier { get; set; }
-        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; }
-        public bool IsBlurMenuAfterClick { get; set; }
-        public bool IsRequired { get; set; }
-    }
+    public record MenuItemModel(
+        string Identifier = null,
+        string Icon = null,
+        string Text = null,
+        string Url = null,
+        Type PageType = null,
+        Action OnClick = null,
+        bool IsBlurMenuAfterClick = false,
+        bool IsRequired = false
+    ) : IActionMenuItemModel, IAvailableMenuItemModel;
 }
diff --git a/src/Money.Blazor.Host/MenuItems/Models/Queries/ListMainMenuItem.cs b/src/Money.Blazor.Host/MenuItems/Models/Queries/ListMainMenuItem.cs
new file mode 100644
index 00000000..df62c0b2
--- /dev/null
+++ b/src/Money.Blazor.Host/MenuItems/Models/Queries/ListMainMenuItem.cs
@@ -0,0 +1,19 @@
+using Money.Models;
+using Neptuo.Queries;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Money.Models.Queries
+{
+    /// <summary>
+    /// A query providing main menu items.
+    /// </summary>
+    public class ListMainMenuItem : UserQuery, IQuery<MainMenuItems>
+    { }
+
+    public record MainMenuItems(List<MenuItemModel> Views, List<MenuItemModel> More, List<MenuItemModel> User);
+}
diff --git a/src/Money.Blazor.Host/Money.Blazor.Host.csproj b/src/Money.Blazor.Host/Money.Blazor.Host.csproj
index 41b1ab0d..bfb1ca6f 100644
--- a/src/Money.Blazor.Host/Money.Blazor.Host.csproj
+++ b/src/Money.Blazor.Host/Money.Blazor.Host.csproj
@@ -44,6 +44,14 @@
     <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
   </ItemGroup>
 
+  <Target Name="CompileScss">
+    <PropertyGroup>
+      <CssRootFolder>$([MSBuild]::NormalizeDirectory('$(MSBuildProjectDirectory)', 'wwwroot', 'css'))</CssRootFolder>
+      <WebCompilerConfigPath>$([MSBuild]::NormalizePath('$(MSBuildProjectDirectory)', 'webcompilerconfiguration.json'))</WebCompilerConfigPath>
+    </PropertyGroup>
+    <Exec Command="dotnet webcompiler -r $(CssRootFolder) -c $(WebCompilerConfigPath)" />
+  </Target>
+
   <!-- GitHubPages publish -->
   <Target Name="PublishGitHubFiles" AfterTargets="ComputeFilesToPublish">
     <!-- Declare -->
diff --git a/src/Money.Blazor.Host/webcompilerconfiguration.json b/src/Money.Blazor.Host/webcompilerconfiguration.json
new file mode 100644
index 00000000..bed87a6e
--- /dev/null
+++ b/src/Money.Blazor.Host/webcompilerconfiguration.json
@@ -0,0 +1,22 @@
+{
+  "Minifiers": {
+    "GZip": false,
+    "Enabled": true
+  },
+  "CompilerSettings": {
+    "Sass": {
+      "IndentType": "Space",
+      "IndentWidth": 2,
+      "OutputStyle": "Expanded",
+      "RelativeUrls": true,
+      "LineFeed": "Lf",
+      "SourceMap": false
+    },
+    "Ignore": [
+      "**/_*.*"
+    ]
+  },
+  "Output": {
+    "Preserve": true
+  }
+}
\ No newline at end of file
diff --git a/src/Money.Blazor.Host/wwwroot/css/site.css b/src/Money.Blazor.Host/wwwroot/css/site.css
index 6c2fe09c..8e8eadb3 100644
--- a/src/Money.Blazor.Host/wwwroot/css/site.css
+++ b/src/Money.Blazor.Host/wwwroot/css/site.css
@@ -73,36 +73,16 @@ h4 {
   margin-right: 6px;
 }
 
+.dropdown-nocaret::after {
+  display: none !important;
+}
+
 .navbar-dark {
   background-color: #004074;
   border-color: #398BF5;
 }
-@media (max-width: 991px) {
-  .navbar-dark .collapse {
-    display: block;
-    visibility: hidden !important;
-    height: 0 !important;
-  }
-}
 .navbar-dark .navbar-collapse {
   border-color: #398BF5;
-  height: calc(100vh - 112px);
-  visibility: visible;
-  transition: height 0.4s;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-@media (min-width: 576px) {
-  .navbar-dark .navbar-collapse {
-    height: calc(100vh - 56px);
-  }
-}
-@media (min-width: 992px) {
-  .navbar-dark .navbar-collapse {
-    height: auto;
-    overflow-x: unset;
-    overflow-y: unset;
-  }
 }
 .navbar-dark .navbar-collapse::-webkit-scrollbar-track {
   background: #004074;
@@ -114,33 +94,6 @@ h4 {
   background-color: #0078D7;
   border-color: #398BF5;
 }
-.navbar-dark .navbar-toggler {
-  border: none;
-  outline: none;
-  box-shadow: none;
-}
-@media (min-width: 992px) and (max-width: 993px) {
-  .navbar-dark .navbar-nav .nav-link {
-    padding-right: 0.35rem;
-    padding-left: 0.35rem;
-  }
-}
-@media (max-width: 991px) {
-  .navbar-dark .nav-link {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-  .navbar-dark hr.separator {
-    margin-right: -18px;
-    margin-left: -26px;
-  }
-}
-@media (max-width: 991px) and (min-width: 596px) {
-  .navbar-dark hr.separator {
-    margin-right: -1rem;
-    margin-left: -1rem;
-  }
-}
 .navbar-dark .navbar-nav > li > a,
 .navbar-dark .navbar-nav > li > button {
   color: #bcdbff;
@@ -174,12 +127,6 @@ h4 {
 .navbar-dark .nav-item hr.separator {
   border-color: rgba(255, 255, 255, 0.5);
 }
-@media (max-width: 992px) {
-  .navbar-dark .fas, .navbar-dark .fa {
-    width: 30px;
-    text-align: center;
-  }
-}
 .navbar-dark .navbar-brand {
   position: relative;
 }
@@ -210,7 +157,9 @@ h4 {
 .header h3 {
   line-height: 1.25;
   margin-bottom: 0;
-  flex: 1;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -355,7 +304,8 @@ h4 {
   margin: 0;
   border-width: 1px 0 0 0;
   border-radius: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: pointer;
 }
 .bar-graph .card-body {
@@ -392,6 +342,7 @@ h4 {
   height: 10px;
   float: right;
   clear: both;
+  -webkit-transition: width 1s;
   transition: width 1s;
 }
 
@@ -455,8 +406,12 @@ h4 {
   }
 }
 .vertical-bar {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: flex-end;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
 }
 
 .cursor-pointer {
@@ -473,6 +428,7 @@ h4 {
   overflow: hidden;
   background: #004074;
   z-index: 1031;
+  -webkit-transition: height 1s, opacity 0.5s linear 1s, margin-top 0.1s linear 2s;
   transition: height 1s, opacity 0.5s linear 1s, margin-top 0.1s linear 2s;
 }
 .splash .app-title {
@@ -483,11 +439,13 @@ h4 {
   color: white;
   font-size: 1.6rem;
   font-weight: lighter;
+  -webkit-transition: opacity 0.5s;
   transition: opacity 0.5s;
 }
 .splash img {
   width: 274px;
   height: 274px;
+  -webkit-transition: opacity 0.5s, width 0.5s, height 0.5s;
   transition: opacity 0.5s, width 0.5s, height 0.5s;
 }
 .splash.animate {
@@ -515,19 +473,33 @@ h4 {
   left: 6px;
   width: 13px;
   background: #193F6F;
-  animation: loading-bar 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  -webkit-animation: loading-bar 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+          animation: loading-bar 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
 }
 .loading-bar div:nth-child(1) {
   left: 6px;
-  animation-delay: -0.24s;
+  -webkit-animation-delay: -0.24s;
+          animation-delay: -0.24s;
 }
 .loading-bar div:nth-child(2) {
   left: 26px;
-  animation-delay: -0.12s;
+  -webkit-animation-delay: -0.12s;
+          animation-delay: -0.12s;
 }
 .loading-bar div:nth-child(3) {
   left: 45px;
-  animation-delay: 0;
+  -webkit-animation-delay: 0;
+          animation-delay: 0;
+}
+@-webkit-keyframes loading-bar {
+  0% {
+    top: 6px;
+    height: 71px;
+  }
+  50%, 100% {
+    top: 19px;
+    height: 26px;
+  }
 }
 @keyframes loading-bar {
   0% {
@@ -605,12 +577,20 @@ h4 {
   top: -56px;
   left: calc(50% - var(--refresh-width) / 2);
   padding: 8px;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  -webkit-transition: all 300ms cubic-bezier(0, 0, 0.2, 1);
   transition: all 300ms cubic-bezier(0, 0, 0.2, 1);
   will-change: transform, opacity;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
   display: inline-flex;
-  justify-content: space-evenly;
-  align-items: center;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   z-index: 1100;
   visibility: hidden;
 }
@@ -623,38 +603,61 @@ h4 {
   width: 4px;
   height: 18px;
   border-radius: 4px;
-  animation: loading 1s ease-in-out infinite;
+  -webkit-animation: loading 1s ease-in-out infinite;
+          animation: loading 1s ease-in-out infinite;
 }
 
 .loading-bar:nth-child(1) {
   background-color: #3498db;
-  animation-delay: 0;
+  -webkit-animation-delay: 0;
+          animation-delay: 0;
 }
 
 .loading-bar:nth-child(2) {
   background-color: #c0392b;
-  animation-delay: 0.09s;
+  -webkit-animation-delay: 0.09s;
+          animation-delay: 0.09s;
 }
 
 .loading-bar:nth-child(3) {
   background-color: #f1c40f;
-  animation-delay: 0.18s;
+  -webkit-animation-delay: 0.18s;
+          animation-delay: 0.18s;
 }
 
 .loading-bar:nth-child(4) {
   background-color: #27ae60;
-  animation-delay: 0.27s;
+  -webkit-animation-delay: 0.27s;
+          animation-delay: 0.27s;
+}
+
+@-webkit-keyframes loading {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  20% {
+    -webkit-transform: scale(1, 2.2);
+            transform: scale(1, 2.2);
+  }
+  40% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
 }
 
 @keyframes loading {
   0% {
-    transform: scale(1);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
   20% {
-    transform: scale(1, 2.2);
+    -webkit-transform: scale(1, 2.2);
+            transform: scale(1, 2.2);
   }
   40% {
-    transform: scale(1);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
 /* ------ SWIPING ------------------------------------------------------------------------------ */
@@ -672,3 +675,4 @@ h4 {
 .swipe-right {
   right: -35px;
 }
+/*# sourceMappingURL=/Users/marekfisera/Development/maraf/Money/src/Money.Blazor.Host/wwwroot/css/site.css.map */
\ No newline at end of file
diff --git a/src/Money.Blazor.Host/wwwroot/css/site.min.css b/src/Money.Blazor.Host/wwwroot/css/site.min.css
index 499d3cc3..f57a31bf 100644
--- a/src/Money.Blazor.Host/wwwroot/css/site.min.css
+++ b/src/Money.Blazor.Host/wwwroot/css/site.min.css
@@ -1 +1 @@
-@charset "UTF-8";::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:#f5f5f5;}::-webkit-scrollbar-thumb{background:#bbb;}.clear{clear:both;}html,body{overscroll-behavior-y:none;}body{position:relative;min-width:380px;min-height:100vh;padding-top:30px;padding-bottom:20px;overflow-x:hidden;}.body-content{margin-bottom:64px;}footer.navbar{position:absolute;bottom:0;width:100%;padding-top:.5rem;}footer.navbar .container{border-top:1px solid rgba(0,0,0,.1);}footer.navbar .navbar-text{color:#aaa!important;}footer.navbar a{color:#aaa!important;text-decoration:none;}footer.navbar a:hover{text-decoration:underline;}h4{margin-bottom:20px;}.fas.fa-trash-alt{color:#d85a5a;}.h-100vh{height:100dvh;}.dropdown-item{padding:.25rem 1rem;}.dropdown-item .fa,.dropdown-item .fas{width:20px;text-align:center;margin-right:6px;}.navbar-dark{background-color:#004074;border-color:#398bf5;}@media(max-width:991px){.navbar-dark .collapse{display:block;visibility:hidden!important;height:0!important;}}.navbar-dark .navbar-collapse{border-color:#398bf5;height:calc(100vh - 112px);visibility:visible;transition:height .4s;overflow-x:hidden;overflow-y:auto;}@media(min-width:576px){.navbar-dark .navbar-collapse{height:calc(100vh - 56px);}}@media(min-width:992px){.navbar-dark .navbar-collapse{height:auto;overflow-x:unset;overflow-y:unset;}}.navbar-dark .navbar-collapse::-webkit-scrollbar-track{background:#004074;}.navbar-dark .navbar-collapse::-webkit-scrollbar-thumb{background:#004074;}.navbar-dark .navbar-toggle,.navbar-dark .navbar-toggle:focus,.navbar-dark .navbar-toggle:hover{background-color:#0078d7;border-color:#398bf5;}.navbar-dark .navbar-toggler{border:0;outline:0;box-shadow: none;}@media(min-width:992px) and (max-width:993px){.navbar-dark .navbar-nav .nav-link{padding-right:.35rem;padding-left:.35rem;}}@media(max-width:991px){.navbar-dark .nav-link{padding-top:.75rem;padding-bottom:.75rem;}.navbar-dark hr.separator{margin-right:-18px;margin-left:-26px;}}@media(max-width:991px) and (min-width:596px){.navbar-dark hr.separator{margin-right:-1rem;margin-left:-1rem;}}.navbar-dark .navbar-nav>li>a,.navbar-dark .navbar-nav>li>button{color:#bcdbff;cursor:pointer;}@media(max-width:767px){.navbar-dark .navbar-nav>.open ul.dropdown-menu>li>a{color:#bcdbff;}}.navbar-dark .navbar-nav>.open>a,.navbar-dark .navbar-nav>.open>a:hover{background:#245a9d;}.navbar-dark .navbar-nav>li>a.active{color:#fff;}.navbar-dark .navbar-nav>li>button:hover{text-decoration:none;}.navbar-dark a.navbar-brand{color:#fff;padding:0;}.navbar-dark a.navbar-brand .brand-author{position:absolute;bottom:0;left:47px;font-size:8px;}.navbar-dark .nav-item hr.separator{border-color:rgba(255,255,255,.5);}@media(max-width:992px){.navbar-dark .fas,.navbar-dark .fa{width:30px;text-align:center;}}.navbar-dark .navbar-brand{position:relative;}.navbar-dark .navbar-brand .status{font-size:10px;top:5px;position:absolute;}.nav-tabs>li>a:hover{cursor:pointer;}.nav-tabs>li.active>a:hover{cursor:default;}.header{min-width:380px;padding:14px 0;background:#f5f5f5;border-bottom:1px solid #ddd;}.header .icon{font-size:26px;color:#0078d7;}.header h3{line-height:1.25;margin-bottom:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.header h6{width:100%;margin-top:.5rem;margin-bottom:0;text-overflow:ellipsis;line-height:1.25;white-space:nowrap;overflow:hidden;}.header .actions{white-space:nowrap;}.header-append{margin-bottom:150px;}.header-append-small{margin-bottom:110px;}.bottom-bar{background:#f5f5f5;border-top:1px solid #ddd;}.bottom-bar .items-6 span.text,.bottom-bar .items-5 span.text,.bottom-bar .items-4 span.text,.bottom-bar .items-3 span.text{display:none;}.center{text-align:center;}.gray{opacity:.7;}.table .btn-link{padding:0;}.table .min-column{max-width:1px;overflow:auto;}.alert .nav{margin-top:-7px;margin-bottom:-7px;}.alert .nav .btn-link{color:#333;}.back-dark{color:#eee!important;}.back-dark .btn-link{color:#eee!important;}.back-light{color:#212529!important;}.btn-icon,.btn-color{width:48px;height:48px;margin:3px;}.btn-icon{font-size:1.6em;padding:0;}.btn-selectable{border-radius:4px;border:2px solid transparent;}.btn-selectable:focus,.btn-selectable:hover{text-decoration:none;}.btn-selectable.btn-selectable-selected,.btn-selectable:focus,.btn-selectable:hover{position:relative;outline:0;border-color:#000;}.btn-selectable.btn-selectable-selected::before,.btn-selectable:focus::before,.btn-selectable:hover::before{content:" ";content:"✓";padding:2px;background:#000;border-radius:0 0 4px 0;position:absolute;left:0;top:0;color:#fff;font-size:11px;}.card{margin-bottom:15px;}.card .nav{margin-top:-7px;margin-bottom:-7px;}.card .nav .btn-link{color:#333;}.card p:last-child{margin:0;}.card.card-hover:hover{background-color:#eee;}.sort a{cursor:pointer;}.summary .months{padding-right:70px;}.summary .graph{margin-bottom:-15px;}.bar-graph{margin:0;border-width:1px 0 0 0;border-radius: 0;box-shadow:none;cursor:pointer;}.bar-graph .card-body{position:relative;height:60px;padding:15px;}.bar-graph .description{position:absolute;margin:0;font-size:24px;font-weight:normal;line-height:1.1;display:inline;z-index:1;}.bar-graph .description .name{font-size:16px;white-space:nowrap;}.bar-graph .description .icon{display:inline-block;width:34px;text-align:center;}.bar-graph .value{position:absolute;width:calc(100% - 30px);}.bar-graph .amount{float:right;}.bar-graph .bar{height:10px;float:right;clear:both;transition:width 1s;}.bar-graph:hover{background-color:#f5f5f5;}.bar-graph-summary{border:0;}.bar-graph-summary .glyphicon{margin:0 4px;}.bar-graph-summary .category-name{font-weight:bold;}.bar-graph-summary .amount{font-weight:bold;}.overview{max-width:900px;margin:0 auto;}.overview .sort{float:right;}.search{max-width:900px;margin:0 auto;}.cards{margin:20px 0;}.cards .row:first-child{border-top:1px solid #dee2e6!important;}.cards .row:hover{background:#eee;}.cards .row .btn-link{color:#333;}@media(max-width:767px){.modal .btn-primary{width:100%;display:block;}}.modal .modal-overflow .modal-body{max-height:calc(100vh - 142px - 1rem);overflow:auto;}@media(min-width:576px){.modal .modal-overflow .modal-body{max-height:calc(100vh - 142px - 2.5rem);}}.vertical-bar{display:flex;align-items:flex-end;}.cursor-pointer{cursor:pointer;}.splash{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#004074;z-index:1031;transition:height 1s,opacity .5s linear 1s,margin-top .1s linear 2s;}.splash .app-title{position:absolute;bottom:40px;width:100vw;text-align:center;color:#fff;font-size:1.6rem;font-weight:lighter;transition:opacity .5s;}.splash img{width:274px;height:274px;transition:opacity .5s,width .5s,height .5s;}.splash.animate{height:56px;opacity:0;margin-top:-60px;}.splash.animate .app-title,.splash.animate img{opacity:0;}.splash.animate img{width:56px;height:56px;}.loading-bar{display:inline-block;position:relative;width:64px;height:84px;}.loading-bar div{display:inline-block;position:absolute;left:6px;width:13px;background:#193f6f;animation:loading-bar 1.2s cubic-bezier(0,.5,.5,1) infinite;}.loading-bar div:nth-child(1){left:6px;animation-delay:-.24s;}.loading-bar div:nth-child(2){left:26px;animation-delay:-.12s;}.loading-bar div:nth-child(3){left:45px;animation-delay:0;}@keyframes loading-bar{0%{top:6px;height:71px;}50%,100%{top:19px;height:26px;}}.loading{position:relative;}.loading .mask{position:absolute;left:0;top:0;width:100%;height:100%;display:none;opacity:.9;background:#fff;}.loading-active .mask{display:block;}.pager{margin:20px 0 40px 0;}.pager a{cursor:pointer;}.pager li{display:inline-block;}.pager .current{margin:0 16px;}.user{margin:20px 15px;}.login{margin-top:20px;}.expenses-bag{position:relative;}.expenses-bag button{display:none;}.expenses-bag button:last-child{display:inline-block;}.refresher{pointer-events:none;--refresh-width:55px;background:#fff;width:var(--refresh-width);height:var(--refresh-width);border-radius:50%;position:absolute;top:-56px;left:calc(50% - var(--refresh-width)/2);padding:8px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);transition:all 300ms cubic-bezier(0,0,.2,1);will-change:transform,opacity;display:inline-flex;justify-content:space-evenly;align-items:center;z-index:1100;visibility:hidden;}.refresher.visible{top:56px;}.loading-bar{width:4px;height:18px;border-radius:4px;animation:loading 1s ease-in-out infinite;}.loading-bar:nth-child(1){background-color:#3498db;animation-delay:0;}.loading-bar:nth-child(2){background-color:#c0392b;animation-delay:.09s;}.loading-bar:nth-child(3){background-color:#f1c40f;animation-delay:.18s;}.loading-bar:nth-child(4){background-color:#27ae60;animation-delay:.27s;}@keyframes loading{0%{transform:scale(1);}20%{transform:scale(1,2.2);}40%{transform:scale(1);}}.swipe-left,.swipe-right{position:fixed;top:calc(50vh - 60px);font-size:2.5rem;color:#004074;}.swipe-left{left:-35px;}.swipe-right{right:-35px;}
\ No newline at end of file
+@charset "UTF-8";::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:#f5f5f5;}::-webkit-scrollbar-thumb{background:#bbb;}.clear{clear:both;}html,body{overscroll-behavior-y:none;}body{position:relative;min-width:380px;min-height:100vh;padding-top:30px;padding-bottom:20px;overflow-x:hidden;}.body-content{margin-bottom:64px;}footer.navbar{position:absolute;bottom:0;width:100%;padding-top:.5rem;}footer.navbar .container{border-top:1px solid rgba(0,0,0,.1);}footer.navbar .navbar-text{color:#aaa!important;}footer.navbar a{color:#aaa!important;text-decoration:none;}footer.navbar a:hover{text-decoration:underline;}h4{margin-bottom:20px;}.fas.fa-trash-alt{color:#d85a5a;}.h-100vh{height:100dvh;}.dropdown-item{padding:.25rem 1rem;}.dropdown-item .fa,.dropdown-item .fas{width:20px;text-align:center;margin-right:6px;}.dropdown-nocaret::after{display:none!important;}.navbar-dark{background-color:#004074;border-color:#398bf5;}.navbar-dark .navbar-collapse{border-color:#398bf5;}.navbar-dark .navbar-collapse::-webkit-scrollbar-track{background:#004074;}.navbar-dark .navbar-collapse::-webkit-scrollbar-thumb{background:#004074;}.navbar-dark .navbar-toggle,.navbar-dark .navbar-toggle:focus,.navbar-dark .navbar-toggle:hover{background-color:#0078d7;border-color:#398bf5;}.navbar-dark .navbar-nav>li>a,.navbar-dark .navbar-nav>li>button{color:#bcdbff;cursor:pointer;}@media(max-width:767px){.navbar-dark .navbar-nav>.open ul.dropdown-menu>li>a{color:#bcdbff;}}.navbar-dark .navbar-nav>.open>a,.navbar-dark .navbar-nav>.open>a:hover{background:#245a9d;}.navbar-dark .navbar-nav>li>a.active{color:#fff;}.navbar-dark .navbar-nav>li>button:hover{text-decoration:none;}.navbar-dark a.navbar-brand{color:#fff;padding:0;}.navbar-dark a.navbar-brand .brand-author{position:absolute;bottom:0;left:47px;font-size:8px;}.navbar-dark .nav-item hr.separator{border-color:rgba(255,255,255,.5);}.navbar-dark .navbar-brand{position:relative;}.navbar-dark .navbar-brand .status{font-size:10px;top:5px;position:absolute;}.nav-tabs>li>a:hover{cursor:pointer;}.nav-tabs>li.active>a:hover{cursor:default;}.header{min-width:380px;padding:14px 0;background:#f5f5f5;border-bottom:1px solid #ddd;}.header .icon{font-size:26px;color:#0078d7;}.header h3{line-height:1.25;margin-bottom:0;-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.header h6{width:100%;margin-top:.5rem;margin-bottom:0;text-overflow:ellipsis;line-height:1.25;white-space:nowrap;overflow:hidden;}.header .actions{white-space:nowrap;}.header-append{margin-bottom:150px;}.header-append-small{margin-bottom:110px;}.bottom-bar{background:#f5f5f5;border-top:1px solid #ddd;}.bottom-bar .items-6 span.text,.bottom-bar .items-5 span.text,.bottom-bar .items-4 span.text,.bottom-bar .items-3 span.text{display:none;}.center{text-align:center;}.gray{opacity:.7;}.table .btn-link{padding:0;}.table .min-column{max-width:1px;overflow:auto;}.alert .nav{margin-top:-7px;margin-bottom:-7px;}.alert .nav .btn-link{color:#333;}.back-dark{color:#eee!important;}.back-dark .btn-link{color:#eee!important;}.back-light{color:#212529!important;}.btn-icon,.btn-color{width:48px;height:48px;margin:3px;}.btn-icon{font-size:1.6em;padding:0;}.btn-selectable{border-radius:4px;border:2px solid transparent;}.btn-selectable:focus,.btn-selectable:hover{text-decoration:none;}.btn-selectable.btn-selectable-selected,.btn-selectable:focus,.btn-selectable:hover{position:relative;outline:0;border-color:#000;}.btn-selectable.btn-selectable-selected::before,.btn-selectable:focus::before,.btn-selectable:hover::before{content:" ";content:"✓";padding:2px;background:#000;border-radius:0 0 4px 0;position:absolute;left:0;top:0;color:#fff;font-size:11px;}.card{margin-bottom:15px;}.card .nav{margin-top:-7px;margin-bottom:-7px;}.card .nav .btn-link{color:#333;}.card p:last-child{margin:0;}.card.card-hover:hover{background-color:#eee;}.sort a{cursor:pointer;}.summary .months{padding-right:70px;}.summary .graph{margin-bottom:-15px;}.bar-graph{margin:0;border-width:1px 0 0 0;border-radius:0;-webkit-box-shadow:none;box-shadow:none;cursor:pointer;}.bar-graph .card-body{position:relative;height:60px;padding:15px;}.bar-graph .description{position:absolute;margin:0;font-size:24px;font-weight:normal;line-height:1.1;display:inline;z-index:1;}.bar-graph .description .name{font-size:16px;white-space:nowrap;}.bar-graph .description .icon{display:inline-block;width:34px;text-align:center;}.bar-graph .value{position:absolute;width:calc(100% - 30px);}.bar-graph .amount{float:right;}.bar-graph .bar{height:10px;float:right;clear:both;-webkit-transition:width 1s;transition:width 1s;}.bar-graph:hover{background-color:#f5f5f5;}.bar-graph-summary{border:0;}.bar-graph-summary .glyphicon{margin:0 4px;}.bar-graph-summary .category-name{font-weight:bold;}.bar-graph-summary .amount{font-weight:bold;}.overview{max-width:900px;margin:0 auto;}.overview .sort{float:right;}.search{max-width:900px;margin:0 auto;}.cards{margin:20px 0;}.cards .row:first-child{border-top:1px solid #dee2e6!important;}.cards .row:hover{background:#eee;}.cards .row .btn-link{color:#333;}@media(max-width:767px){.modal .btn-primary{width:100%;display:block;}}.modal .modal-overflow .modal-body{max-height:calc(100vh - 142px - 1rem);overflow:auto;}@media(min-width:576px){.modal .modal-overflow .modal-body{max-height:calc(100vh - 142px - 2.5rem);}}.vertical-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;}.cursor-pointer{cursor:pointer;}.splash{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#004074;z-index:1031;-webkit-transition:height 1s,opacity .5s linear 1s,margin-top .1s linear 2s;transition:height 1s,opacity .5s linear 1s,margin-top .1s linear 2s;}.splash .app-title{position:absolute;bottom:40px;width:100vw;text-align:center;color:#fff;font-size:1.6rem;font-weight:lighter;-webkit-transition:opacity .5s;transition:opacity .5s;}.splash img{width:274px;height:274px;-webkit-transition:opacity .5s,width .5s,height .5s;transition:opacity .5s,width .5s,height .5s;}.splash.animate{height:56px;opacity:0;margin-top:-60px;}.splash.animate .app-title,.splash.animate img{opacity:0;}.splash.animate img{width:56px;height:56px;}.loading-bar{display:inline-block;position:relative;width:64px;height:84px;}.loading-bar div{display:inline-block;position:absolute;left:6px;width:13px;background:#193f6f;-webkit-animation:loading-bar 1.2s cubic-bezier(0,.5,.5,1) infinite;animation:loading-bar 1.2s cubic-bezier(0,.5,.5,1) infinite;}.loading-bar div:nth-child(1){left:6px;-webkit-animation-delay:-.24s;animation-delay:-.24s;}.loading-bar div:nth-child(2){left:26px;-webkit-animation-delay:-.12s;animation-delay:-.12s;}.loading-bar div:nth-child(3){left:45px;-webkit-animation-delay:0;animation-delay:0;}@-webkit-keyframes loading-bar{0%{top:6px;height:71px;}50%,100%{top:19px;height:26px;}}@keyframes loading-bar{0%{top:6px;height:71px;}50%,100%{top:19px;height:26px;}}.loading{position:relative;}.loading .mask{position:absolute;left:0;top:0;width:100%;height:100%;display:none;opacity:.9;background:#fff;}.loading-active .mask{display:block;}.pager{margin:20px 0 40px 0;}.pager a{cursor:pointer;}.pager li{display:inline-block;}.pager .current{margin:0 16px;}.user{margin:20px 15px;}.login{margin-top:20px;}.expenses-bag{position:relative;}.expenses-bag button{display:none;}.expenses-bag button:last-child{display:inline-block;}.refresher{pointer-events:none;--refresh-width:55px;background:#fff;width:var(--refresh-width);height:var(--refresh-width);border-radius:50%;position:absolute;top:-56px;left:calc(50% - var(--refresh-width)/2);padding:8px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);-webkit-transition:all 300ms cubic-bezier(0,0,.2,1);transition:all 300ms cubic-bezier(0,0,.2,1);will-change:transform,opacity;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1100;visibility:hidden;}.refresher.visible{top:56px;}.loading-bar{width:4px;height:18px;border-radius:4px;-webkit-animation:loading 1s ease-in-out infinite;animation:loading 1s ease-in-out infinite;}.loading-bar:nth-child(1){background-color:#3498db;-webkit-animation-delay:0;animation-delay:0;}.loading-bar:nth-child(2){background-color:#c0392b;-webkit-animation-delay:.09s;animation-delay:.09s;}.loading-bar:nth-child(3){background-color:#f1c40f;-webkit-animation-delay:.18s;animation-delay:.18s;}.loading-bar:nth-child(4){background-color:#27ae60;-webkit-animation-delay:.27s;animation-delay:.27s;}@-webkit-keyframes loading{0%{-webkit-transform:scale(1);transform:scale(1);}20%{-webkit-transform:scale(1,2.2);transform:scale(1,2.2);}40%{-webkit-transform:scale(1);transform:scale(1);}}@keyframes loading{0%{-webkit-transform:scale(1);transform:scale(1);}20%{-webkit-transform:scale(1,2.2);transform:scale(1,2.2);}40%{-webkit-transform:scale(1);transform:scale(1);}}.swipe-left,.swipe-right{position:fixed;top:calc(50vh - 60px);font-size:2.5rem;color:#004074;}.swipe-left{left:-35px;}.swipe-right{right:-35px;}
\ No newline at end of file
diff --git a/src/Money.Blazor.Host/wwwroot/css/site.scss b/src/Money.Blazor.Host/wwwroot/css/site.scss
index 0b8110ca..e9be77d1 100644
--- a/src/Money.Blazor.Host/wwwroot/css/site.scss
+++ b/src/Money.Blazor.Host/wwwroot/css/site.scss
@@ -81,35 +81,16 @@ h4 {
     }
 }
 
+.dropdown-nocaret::after {
+    display: none !important;
+}
+
 .navbar-dark {
     background-color: $backgroundColor;
     border-color: #398BF5;
 
-    .collapse {
-        @media (max-width: 991px) {
-            display: block;
-            visibility: hidden !important;
-            height: 0 !important;
-        }
-    }
-
     .navbar-collapse {
         border-color: #398BF5;
-        height: calc(100vh - 112px);
-        visibility: visible;
-        transition: height .4s;
-        overflow-x: hidden;
-        overflow-y: auto;
-
-        @media (min-width: 576px) {
-            height: calc(100vh - 56px);
-        }
-
-        @media (min-width: 992px) {
-            height: auto;
-            overflow-x: unset;
-            overflow-y: unset;
-        }
 
         &::-webkit-scrollbar-track {
             background: #004074;
@@ -125,40 +106,6 @@ h4 {
         border-color: #398BF5;
     }
 
-    .navbar-toggler {
-        border: none;
-        outline: none;
-        box-shadow: none;
-    }
-
-    @media (min-width: 992px) and (max-width: 993px) {
-        .navbar-nav {
-            .nav-link {
-                padding-right: .35rem;
-                padding-left: .35rem;
-            }
-        }
-    }
-
-    @media (max-width: 991px) {
-        .nav-link {
-            padding-top: .75rem;
-            padding-bottom: .75rem;
-        }
-
-        hr.separator {
-            margin-right: -18px;
-            margin-left: -26px;
-        }
-
-        @media (min-width: 596px) {
-            hr.separator {
-                margin-right: -1rem;
-                margin-left: -1rem;
-            }
-        }
-    }
-
     .navbar-nav > li > a,
     .navbar-nav > li > button {
         color: #bcdbff;
@@ -200,13 +147,6 @@ h4 {
         border-color: rgba(255,255,255,.5);
     }
 
-    @media (max-width: 992px) {
-        .fas, .fa {
-            width: 30px;
-            text-align: center;
-        }
-    }
-
     .navbar-brand {
         position: relative;