Normalize

Normalize/ClientHub/Shared/MainLayout.razor

@@ -0,0 +1,40 @@
+@using MudBlazor
+
+@namespace Normalize.ClientHub.Shared
+
+@inherits LayoutComponentBase
+
+<MudDialogProvider />
+<MudSnackbarProvider />
+<MudThemeProvider @ref="@_MudThemeProvider" @bind-IsDarkMode="@_IsDarkMode" />
+
+<MudLayout>
+    <MudAppBar Elevation="0">
+        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
+        <MudSpacer />
+        <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank" />
+        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor/" Target="_blank" />
+    </MudAppBar>
+    <MudDrawer @bind-Open="_DrawerOpen" Elevation="1">
+        <MudDrawerHeader>
+            <MudText Typo="Typo.h6">MudBlazor.Template</MudText>
+        </MudDrawerHeader>
+        <NavMenu />
+    </MudDrawer>
+    <MudMainContent>
+        <MudContainer MaxWidth="MaxWidth.Large" Class="my-16 pt-16">
+            @Body
+            <hr />
+            <footer>
+                <p class="navbar-text navbar-right">
+                    <MudSwitch @bind-Checked="@_IsDarkMode" Color="Color.Primary" Class="ma-4" T="bool" Label="Toggle Light/Dark Mode" />
+                </p>
+                <p>&copy; @DateTime.Now.Year - Phares</p>
+                @if (AppSettings is not null && AppSettings.IsDevelopment)
+                {
+                    <p><strong>Request ID:</strong><code>@_RequestId</code></p>
+                }
+            </footer>
+        </MudContainer>
+    </MudMainContent>
+</MudLayout>

Normalize/ClientHub/Shared/MainLayout.razor.cs

@@ -0,0 +1,35 @@
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using System.Diagnostics;
+
+namespace Normalize.ClientHub.Shared;
+
+public partial class MainLayout
+{
+
+    bool _DrawerOpen = true;
+    private bool _IsDarkMode;
+    private string? _RequestId;
+    private MudThemeProvider? _MudThemeProvider;
+
+    [Inject] protected Models.AppSettings? AppSettings { get; set; }
+    [Inject] protected IHttpContextAccessor? HttpContextAccessor { get; set; }
+
+    void DrawerToggle() => _DrawerOpen = !_DrawerOpen;
+
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+        _RequestId = Activity.Current?.Id ?? HttpContextAccessor?.HttpContext?.TraceIdentifier;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && _MudThemeProvider is not null)
+        {
+            _IsDarkMode = await _MudThemeProvider.GetSystemPreference();
+            StateHasChanged();
+        }
+    }
+
+}

Normalize/ClientHub/Shared/MainLayout.razor.css

@@ -0,0 +1,73 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.top-row ::deep a,
+.top-row .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+}
+
+.top-row a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 640.98px) {
+    .top-row:not(.auth) {
+        display: none;
+    }
+
+    .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .top-row a,
+    .top-row .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row,
+    article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

Normalize/ClientHub/Shared/NavMenu.razor

@@ -0,0 +1,9 @@
+@using Microsoft.AspNetCore.Components.Routing
+@using MudBlazor
+
+@namespace Normalize.ClientHub.Shared
+
+<MudNavMenu>
+    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
+    <MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
+</MudNavMenu>

Normalize/ClientHub/Shared/NavMenu.razor.cs

@@ -0,0 +1,12 @@
+namespace Normalize.ClientHub.Shared;
+
+public partial class NavMenu
+{
+
+    private bool _CollapseNavMenu = true;
+
+    private string? NavMenuCssClass => _CollapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu() => _CollapseNavMenu = !_CollapseNavMenu;
+
+}

Normalize/ClientHub/Shared/NavMenu.razor.css

@@ -0,0 +1,68 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    height: 3.5rem;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.oi {
+    width: 2rem;
+    font-size: 1.1rem;
+    vertical-align: text-top;
+    top: -2px;
+}
+
+.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 a {
+    color: #d7d7d7;
+    border-radius: 4px;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+}
+
+.nav-item ::deep a.active {
+    background-color: rgba(255, 255, 255, 0.25);
+    color: white;
+}
+
+.nav-item ::deep a:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+
+    .nav-scrollable {
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}