From 44cbfc9c556f6aa116230b1f999df8ec99bc0da7 Mon Sep 17 00:00:00 2001
From: Penry <penry.tv@gmail.com>
Date: Mon, 16 Feb 2026 22:34:53 +0100
Subject: [PATCH] feat: Added MudBlazor and reworked MainLayout

---
 .../AdminSettings/Pages/UserManagement.razor  |   4 +-
 CouchLog/Components/App.razor                 |  37 +++---
 CouchLog/Components/Layout/MainLayout.razor   |  44 ++++--
 CouchLog/Components/Layout/NavMenu.razor      | 118 +++++++----------
 CouchLog/Components/Layout/NavMenu.razor.css  | 125 ------------------
 CouchLog/Components/_Imports.razor            |   1 +
 CouchLog/CouchLog.csproj                      |   1 +
 CouchLog/Program.cs                           |   2 +
 8 files changed, 111 insertions(+), 221 deletions(-)
 delete mode 100644 CouchLog/Components/Layout/NavMenu.razor.css
diff --git a/CouchLog/Components/AdminSettings/Pages/UserManagement.razor b/CouchLog/Components/AdminSettings/Pages/UserManagement.razor
index 59b84bc..ce9bfba 100644
--- a/CouchLog/Components/AdminSettings/Pages/UserManagement.razor
+++ b/CouchLog/Components/AdminSettings/Pages/UserManagement.razor
@@ -25,7 +25,7 @@
     </button>
 </div>
 
-<div>
+<!-- <div>
     <QuickGrid Items="@gridUsers.AsQueryable()">
         <PropertyColumn Title="#" Property="@(u => u.Index)" />
         <PropertyColumn Title="Username" Property="@(u => u.UserName)" />
@@ -38,7 +38,7 @@
             }
         </TemplateColumn>
     </QuickGrid>
-</div>
+</div> -->
 <!-- #region UserCreate Modal -->
 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="color: black">
     <div class="modal-dialog modal-dialog-centered">
diff --git a/CouchLog/Components/App.razor b/CouchLog/Components/App.razor
index 69f473b..9e1533c 100644
--- a/CouchLog/Components/App.razor
+++ b/CouchLog/Components/App.razor
@@ -1,23 +1,24 @@
 ﻿<!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <base href="/" />
+        <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
+        <link rel="stylesheet" href="@Assets["app.css"]" />
+        <link rel="stylesheet" href="@Assets["CouchLog.styles.css"]" />
+        <ImportMap />
+        <HeadOutlet />
 
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <base href="/" />
-    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
-    <link rel="stylesheet" href="@Assets["app.css"]" />
-    <link rel="stylesheet" href="@Assets["CouchLog.styles.css"]" />
-    <ImportMap />
-    <HeadOutlet />
-</head>
-
-<body>
-    <Routes />
-    <script src="_framework/blazor.web.js"></script>
-    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
-    <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
-    <script src="lib/bootstrap/dist/js/site.js"></script>
-</body>
+        <!-- #MudBlazor -->
+        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+        <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
+        <!-- #endregion -->
+    </head>
 
+    <body>
+        <Routes @rendermode="InteractiveServer"/>
+        <script src="_framework/blazor.web.js"></script>
+        <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    </body>
 </html>
diff --git a/CouchLog/Components/Layout/MainLayout.razor b/CouchLog/Components/Layout/MainLayout.razor
index e188a38..97109d8 100644
--- a/CouchLog/Components/Layout/MainLayout.razor
+++ b/CouchLog/Components/Layout/MainLayout.razor
@@ -1,19 +1,45 @@
 ﻿@inherits LayoutComponentBase
 
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
+<MudThemeProvider />
+<MudPopoverProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />
 
-    <main>
-        <article class="content px-4">
+<MudLayout>
+    <MudAppBar Elevation="1">
+        <MudIconButton  Icon="@Icons.Material.Filled.Menu"
+                        Color="Color.Inherit"
+                        Edge="Edge.Start"
+                        OnClick="ToggleDrawer" />
+        <MudText Typo="Typo.h5" Class="ml-3">CouchLog</MudText>
+        <MudSpacer />
+    </MudAppBar>
+
+    <MudDrawer  @bind-Open="_drawerOpen"
+                ClipMode="DrawerClipMode.Always" 
+                Elevation="2">
+        <NavMenu />
+    </MudDrawer>
+
+    <MudMainContent>
+        <MudContainer MaxWidth="MaxWidth.Large" Class="mt-4">
             @Body
-        </article>
-    </main>
-</div>
+        </MudContainer>
+    </MudMainContent>
+</MudLayout>
 
 <div id="blazor-error-ui" data-nosnippet>
     An unhandled error has occurred.
     <a href="." class="reload">Reload</a>
     <span class="dismiss">🗙</span>
 </div>
+
+@code
+{
+    private bool _drawerOpen = true;
+
+    private void ToggleDrawer()
+    {
+        _drawerOpen = !_drawerOpen;
+    }
+}
\ No newline at end of file
diff --git a/CouchLog/Components/Layout/NavMenu.razor b/CouchLog/Components/Layout/NavMenu.razor
index cf23b9d..bbd2b08 100644
--- a/CouchLog/Components/Layout/NavMenu.razor
+++ b/CouchLog/Components/Layout/NavMenu.razor
@@ -7,83 +7,68 @@
 @inject UserManager<ApplicationUser> UserManager
 @inject ApplicationDbContext CouchLogDB
 
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">CouchLog</a>
-    </div>
-</div>
+<MudNavMenu>
+    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">
+        Home
+    </MudNavLink>
 
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+    <MudNavLink Href="GlobalList" Icon="@Icons.Material.Filled.List">
+        Globallist
+    </MudNavLink>
 
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="nav flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="GlobalList">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Global List
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="PrivateList">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Private List
-            </NavLink>
-        </div>
+    <MudNavLink Href="PrivateList" Icon="@Icons.Material.Filled.Lock">
+        Privatelist
+    </MudNavLink>
 
-        <AuthorizeView Roles="Admin">
-            <div class="nav-item px-3">
-                <NavLink class="nav-link" href="AdminSettings">
-                    <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Admin Settings
-                </NavLink>
-            </div>
-        </AuthorizeView>
+    <AuthorizeView Roles="Admin">
+        <MudNavLink Href="AdminSettings" Icon="@Icons.Material.Filled.AdminPanelSettings">
+            Admin Settings
+        </MudNavLink>
+    </AuthorizeView>
 
-        <AuthorizeView>
-            <Authorized>
-                <div class="nav-item px-3">
-                    <NavLink class="nav-link" href="Account/Manage">
-                        <span class="bi bi-person-fill-nav-menu" aria-hidden="true"></span> @context.User.Identity?.Name
-                    </NavLink>
-                </div>
-                <div class="nav-item px-3">
-                    <form action="Account/Logout" method="post">
-                        <AntiforgeryToken />
-                        <input type="hidden" name="ReturnUrl" value="@currentUrl" />
-                        <button type="submit" class="nav-link">
-                            <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout
-                        </button>
-                    </form>
-                </div>
-            </Authorized>
-            <NotAuthorized>
-                @if(CouchLogDB.AccountsSettings.First().IsRegistrationAllowed)
-                {
-                    <div class="nav-item px-3">
-                        <NavLink class="nav-link" href="Account/Register">
-                            <span class="bi bi-person-nav-menu" aria-hidden="true"></span> Register
-                        </NavLink>
-                    </div>
-                }
-                <div class="nav-item px-3">
-                    <NavLink class="nav-link" href="Account/Login">
-                        <span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span> Login
-                    </NavLink>
-                </div>
-            </NotAuthorized>
-        </AuthorizeView>
-    </nav>
-</div>
+    <AuthorizeView>
+        <Authorized>
+            <MudDivider Class="my-2" />
+            <MudNavLink Href="Account/Manage" Icon="@Icons.Material.Filled.Person">
+                @context.User.Identity?.Name
+            </MudNavLink>
+            <form action="Account/Logout" method="post">
+                <AntiforgeryToken />
+                <input type="hidden" name="ReturnUrl" value="@currentUrl" />
+                <MudNavLink Icon="@Icons.Material.Filled.Logout"
+                            OnClick="@(() => { })"
+                            Href="javascript:void(0)"
+                            UserAttributes="@(new Dictionary<string, object>
+                                { {"onclick", "this.closest('form').submit()"} })">
+                    Logout                
+                </MudNavLink>
+            </form>
+        </Authorized>
+        <NotAuthorized>
+            <MudDivider Class="my-2" />
+            @if (_isRegistrationAllowed)
+            {
+                <MudNavLink Href="Account/Register" Icon="@Icons.Material.Filled.PersonAdd">
+                    Register
+                </MudNavLink>
+            }
+            <MudNavLink Href="Account/Login" Icon="@Icons.Material.Filled.Badge">
+                Login
+            </MudNavLink>
+        </NotAuthorized>
+    </AuthorizeView>
+
+</MudNavMenu>
 
 @code {
     private string? currentUrl;
+    private bool _isRegistrationAllowed;
 
     protected override void OnInitialized()
     {
         currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
         NavigationManager.LocationChanged += OnLocationChanged;
+        _isRegistrationAllowed = CouchLogDB.AccountsSettings.First().IsRegistrationAllowed;
     }
 
     private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
@@ -96,5 +81,4 @@
     {
         NavigationManager.LocationChanged -= OnLocationChanged;
     }
-}
-
+}
\ No newline at end of file
diff --git a/CouchLog/Components/Layout/NavMenu.razor.css b/CouchLog/Components/Layout/NavMenu.razor.css
deleted file mode 100644
index 0145d9d..0000000
--- a/CouchLog/Components/Layout/NavMenu.razor.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
-}
-
-.top-row {
-    min-height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.bi-lock-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
-}
-
-.bi-person-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
-}
-
-.bi-person-badge-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
-}
-
-.bi-person-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
-}
-
-.bi-arrow-bar-left-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep .nav-link {
-        color: #d7d7d7;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-        width: 100%;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
-
-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-.nav-scrollable {
-    display: none;
-}
-
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}
diff --git a/CouchLog/Components/_Imports.razor b/CouchLog/Components/_Imports.razor
index 0aa9e75..8ffd62f 100644
--- a/CouchLog/Components/_Imports.razor
+++ b/CouchLog/Components/_Imports.razor
@@ -9,3 +9,4 @@
 @using Microsoft.JSInterop
 @using CouchLog
 @using CouchLog.Components
+@using MudBlazor
\ No newline at end of file
diff --git a/CouchLog/CouchLog.csproj b/CouchLog/CouchLog.csproj
index cddb734..7530ca6 100644
--- a/CouchLog/CouchLog.csproj
+++ b/CouchLog/CouchLog.csproj
@@ -77,6 +77,7 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
       <PrivateAssets>all</PrivateAssets>
     </PackageReference>
+    <PackageReference Include="MudBlazor" Version="8.15.0" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/CouchLog/Program.cs b/CouchLog/Program.cs
index fc16142..8b3deec 100644
--- a/CouchLog/Program.cs
+++ b/CouchLog/Program.cs
@@ -5,6 +5,7 @@ using CouchLog.Components;
 using CouchLog.Components.Account;
 using CouchLog.Data;
 using CouchLog;
+using MudBlazor.Services;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -35,6 +36,7 @@ builder.Services.AddIdentityCore<ApplicationUser>(options => options.SignIn.Requ
     .AddDefaultTokenProviders();
 
 builder.Services.AddSingleton<IEmailSender<ApplicationUser>, IdentityNoOpEmailSender>();
+builder.Services.AddMudServices();
 
 var app = builder.Build();
 
