feature: Re-enable Dark Mode Toggle & App Bar Styles & Mobile App Bar Fixes

DeepDrftPublic.Client/Layout/DeepDrftMenu.razor

@@ -42,6 +42,7 @@
 
         <div class="dd-nav-actions">
             <StreamNowButton ButtonClass="dd-nav-cta" ButtonLabel="Stream Now &#9654;"/>
+            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
         </div>
     </nav>
 </div>
@@ -49,7 +50,21 @@
 @* Mobile Menu *@
 <div class="d-flex d-sm-none">
     <nav class="@NavClass">
-        <a class="dd-nav-brand" href="/">Deep DRFT</a>
+        <MudStack Row AlignItems="AlignItems.Center">
+            <a class="dd-nav-brand" href="/">
+                <MudImage Src="img/deepdrft-logo-l.webp" 
+                          Alt="Deep Drft Ornamental Logo Left"
+                          Width="24"
+                          Height="24 "/>
+                
+                <span class="mx-2">Deep DRFT</span>
+                
+                <MudImage Src="img/deepdrft-logo-r.webp" 
+                          Alt="Deep Drft Ornamental Logo Right"
+                          Width="24"
+                          Height="24 "/>
+            </a>
+        </MudStack>
         
         <div class="dd-nav-actions">
             <button type="button"
@@ -59,6 +74,8 @@
                     @onclick="ToggleMobileMenu">
                 <span></span><span></span><span></span>
             </button>
+            
+            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
         </div>
 
         @if (_mobileMenuOpen)
@@ -117,6 +134,12 @@
 
     private string DarkLightModeIconSvg => IsDarkMode ? DDIcons.GasLampLit : DDIcons.GasLamp;
 
+    private string DarkLightModeButtonIcon => IsDarkMode switch
+    {
+        true => DDIcons.GasLampLit,
+        false => DDIcons.GasLamp,
+    };
+    
     private async Task DarkModeToggle()
     {
         IsDarkMode = !IsDarkMode;

DeepDrftPublic.Client/Layout/DeepDrftMenu.razor.css

@@ -50,6 +50,10 @@
     color: var(--deepdrft-white);
 }
 
+.dd-nav-dark .dd-nav-brand > ::deep img {
+    filter: invert(1);
+}
+
 /* Centred link list */
 .dd-nav-links {
     display: flex;