Styles & Home Page Content Cleanup

Mobile Menu System & Dark Mode Cookie Theme Draft
2025-12-09 16:46:07 -05:00
parent bb3551a248
commit bc521d5b29
26 changed files with 461 additions and 168 deletions
@@ -0,0 +1,118 @@
+@using DeepDrftWeb.Client.Controls
+@using DeepDrftWeb.Client.Services
+
+<MudAppBar Elevation="@Elevation">
+    <div class="d-inline-flex align-center flex-1 justify-space-between">
+        @if (_isDesktop)
+        {
+            <div>
+                <MudStack Row AlignItems="AlignItems.Center" Spacing="6">
+                    <MudLink Href="/" Underline="Underline.None">
+                        <MudStack Row AlignItems="AlignItems.Center">    
+                            <MudAvatar Class="mr-2">
+                                <MudImage Src="img/deepdrft-logo.jpg"></MudImage>
+                            </MudAvatar>
+                            <div>Deep DRFT</div>
+                        </MudStack>
+                    </MudLink>
+                </MudStack>
+            </div>
+        
+            <div>
+                <MudStack Spacing="8" Row AlignItems="AlignItems.Center">
+                    @foreach (PageRoute thePage in Pages.AllPages)
+                    {
+                        <AppNavLink Href="@thePage.Route" Icon="@thePage.Icon">@thePage.Name</AppNavLink>
+                    }
+                </MudStack>
+            </div>
+        }
+        else
+        {
+            <div>
+                <MudStack Row AlignItems="AlignItems.Center">
+                    <MudMenu RelativeWidth="DropdownWidth.Adaptive">
+                        <ActivatorContent>
+                            <MudStack Row AlignItems="AlignItems.Center" Spacing="4">
+                                <MudIcon Icon="@Icons.Material.Filled.Menu"/>
+                                <MudAvatar Class="mr-2">
+                                    <MudImage Src="img/deepdrft-logo.jpg"></MudImage>
+                                </MudAvatar>
+                                <div>Deep DRFT</div>
+                            </MudStack>
+                        </ActivatorContent>
+                        <ChildContent>
+                            @foreach (PageRoute route in Pages.AllPages)
+                            {
+                                <MudMenuItem Href="@route.Route" Class="px-6">
+                                    <MudStack Row AlignItems="AlignItems.Center">
+                                        <MudIcon Icon="@route.Icon" Color="Color.Primary"/>   
+                                        <MudText Typo="Typo.button" Color="Color.Primary">
+                                            @route.Name
+                                        </MudText>
+                                    </MudStack>
+                                </MudMenuItem>
+                            }
+                        </ChildContent>
+                    </MudMenu>
+                </MudStack>
+            </div>
+        }
+        
+        <div>
+            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
+        </div>
+    </div>
+</MudAppBar>
+
+@code {
+    [Inject] public required IBrowserViewportService BrowserViewportService { get; set; }
+    [Inject] public required DarkModeCookieService DarkModeCookieService { get; set; }
+    [Parameter] public int Elevation { get; set; }
+    [Parameter] public required bool IsDarkMode { get; set; }
+    [Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
+    
+    private bool _isDesktop = true;
+    private Guid _viewportSubscriptionId;
+
+    protected override async Task OnInitializedAsync()
+    {
+        IsDarkMode = DarkModeCookieService.GetDarkModeAsync();
+        await IsDarkModeChanged.InvokeAsync(IsDarkMode);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var breakpoint = await BrowserViewportService.GetCurrentBreakpointAsync();
+            _isDesktop = breakpoint >= Breakpoint.Sm;
+
+            _viewportSubscriptionId = Guid.NewGuid();
+            await BrowserViewportService.SubscribeAsync(
+                _viewportSubscriptionId,
+                args =>
+                {
+                    _isDesktop = args.Breakpoint >= Breakpoint.Sm;
+                    InvokeAsync(StateHasChanged);
+                },
+                new ResizeOptions { NotifyOnBreakpointOnly = true },
+                fireImmediately: true);
+
+            StateHasChanged();
+        }
+    }
+    
+    private string DarkLightModeButtonIcon => IsDarkMode switch
+    {
+        true => DDIcons.GasLampLit,
+        false => DDIcons.GasLamp,
+    };
+    
+    private async Task DarkModeToggle()
+    {
+        IsDarkMode = !IsDarkMode;
+        await DarkModeCookieService.SetDarkModeAsync(IsDarkMode);
+        await IsDarkModeChanged.InvokeAsync(IsDarkMode);
+    }
+}