Merge pull request #1019 from calledude/fix-navmenu-mobile-activation

Consolidate NavMenu component to only use one MudAppBar
discord-csharp · Mar 31, 2024 · 748a37b · 748a37b
2 parents ff401be + 70a9974
commit 748a37b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 37 deletions.
diff --git a/src/Modix.Web/Shared/NavMenu.razor b/src/Modix.Web/Shared/NavMenu.razor
@@ -8,43 +8,38 @@
 
 <CascadingAuthenticationState>
 
-    <div class="d-flex d-lg-none">
-        <MudAppBar Elevation="0" Fixed="false" Color="Color.Primary">
-            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="ToggleDrawer" />
-            <AuthorizeView>
-                <MudSpacer />
-                <MiniUser />
-            </AuthorizeView>
-        </MudAppBar>
-        <MudDrawer Color="Color.Primary" @bind-Open="_drawerVisible" Elevation="1" Anchor="Anchor.Top" DisableOverlay="false" ClipMode="DrawerClipMode.Never" Variant="DrawerVariant.Temporary" Fixed="false">
-            <MudNavMenu Color="Color.Surface" Bordered="true">
-                <NavMenuLinks />
-            </MudNavMenu>
-        </MudDrawer>
-    </div>
+    <MudAppBar Elevation="0" Dense="false" DisableGutters="true" Color="Color.Primary" Fixed="false">
+        <div class="d-flex d-lg-none flex-grow-1">
+            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" OnClick="ToggleDrawer" />
+        </div>
 
-    <div class="d-none d-lg-flex">
-        <MudAppBar Elevation="0" Dense="true" Fixed="false" DisableGutters="true" Color="Color.Primary">
+        <div class="d-none d-lg-flex flex-grow-1" style="height: 100%">
             <NavMenuLinks />
+        </div>
 
-            <AuthorizeView>
-                <MudSpacer />
 
-                @* The color: inherit here is needed to keep the colors consistent between link icons and light/dark theme icons
-                    I would suggest not thinking about it too much :) *@
-                <MudToggleIconButton Class="mr-2" Style="color: inherit"
-                    Size="Size.Small"
-                    ToggledSize="Size.Small"
-                    Toggled="DarkMode"
-                    ToggledChanged="ToggleDarkMode"
-                    ToggledIcon="@Icons.Material.Filled.LightMode"
-                    Icon="@Icons.Material.Filled.DarkMode"
-                    Color="Color.Surface"/>
+        @* The color: inherit here is needed to keep the colors consistent between link icons and light/dark theme icons
+        I would suggest not thinking about it too much :) *@
+        <MudToggleIconButton Class="mr-2" Style="color: inherit"
+                             Size="Size.Small"
+                             ToggledSize="Size.Small"
+                             Toggled="DarkMode"
+                             ToggledChanged="ToggleDarkMode"
+                             ToggledIcon="@Icons.Material.Filled.LightMode"
+                             Icon="@Icons.Material.Filled.DarkMode"
+                             Color="Color.Surface" />
+
+        <AuthorizeView>
+            <MiniUser />
+        </AuthorizeView>
+    </MudAppBar>
+
+    <MudDrawer Color="Color.Primary" @bind-Open="_drawerVisible" Elevation="1" Anchor="Anchor.Top" Variant="DrawerVariant.Temporary">
+        <MudNavMenu Color="Color.Surface" Bordered="true">
+            <NavMenuLinks />
+        </MudNavMenu>
+    </MudDrawer>
 
-                <MiniUser />
-            </AuthorizeView>
-        </MudAppBar>
-    </div>
 </CascadingAuthenticationState>
 
 @code {

diff --git a/src/Modix.Web/Shared/NavMenuLinks.razor b/src/Modix.Web/Shared/NavMenuLinks.razor
@@ -34,7 +34,7 @@
             </div>
             <MudSpacer />
             <div class="d-flex">
-                <MudNavLink IconColor="Color.Surface" Href="login" Icon="@Icons.Material.Filled.Login">Log In</MudNavLink>
+                <MudNavLink Class="navmenu-item" IconColor="Color.Surface" Href="login" Icon="@Icons.Material.Filled.Login">Log In</MudNavLink>
             </div>
         </NotAuthorized>
     </AuthorizeView>
@@ -45,8 +45,9 @@
         white-space: nowrap;
         width: auto;
     }
-</style>
 
-@code {
-
-}
+    @* Overriding MudBlazor internal styling to enable the entire button to be clickable *@
+    .navmenu-item > a {
+        align-items: center !important;
+    }
+</style>