...

Web/PageLayout.razor

@@ -11,46 +11,33 @@
 <MudDialogProvider/>
 <MudSnackbarProvider/>
 
+<MudHidden Breakpoint="Breakpoint.MdAndUp">
+    <MudIconButton Icon="@Icons.Material.Filled.Menu"
+                   Color="Color.Inherit"
+                   Class="mobile-menu-fab"
+                   OnClick="@(() => _drawerOpen = true)"/>
+</MudHidden>
+
 <MudLayout>
-    <MudAppBar Elevation="1">
+    <MudDrawer @bind-Open="_drawerOpen"
-        <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
+               Variant="DrawerVariant.Responsive"
-            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start"
+               ResponsiveBreakpoint="Breakpoint.Md"
-                           OnClick="@(e => DrawerToggle())"/>
+               ClipMode="DrawerClipMode.Always"
-        </MudHidden>
+               Elevation="2">
-        <MudButton Class="ml-3 mr-8"
+        <div class="drawerHeader">
-                   Href="/"
+            <MudText Typo="Typo.h5" Class="drawerTitle">IGP Fan Reference</MudText>
-                   Target="_self"
+        </div>
-                   Variant="Variant.Text"
+        <MudNavMenu Class="drawerNav">
-                   Color="Color.Default">
-            <MudText Typo="Typo.h5"> IGP Fan Reference</MudText>
-        </MudButton>
-        <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
             @foreach (var page in WebsiteData.GetPages())
             {
-                <MudButton Href="@(page.Href)"
+                <MudNavLink Href="@(page.Href)" Icon="@(page.Icon)">@(page.Name)</MudNavLink>
-                           Variant="Variant.Text"
-                           Color="Color.Default"
-                           Class="mr-4">
-                    <MudIcon Icon="@(page.Icon)" Class="mr-2"/>
-                    @(page.Name)
-                </MudButton>
             }
-        </MudHidden>
+        </MudNavMenu>
         <MudSpacer/>
-        <SearchButtonComponent Id="desktop-searchButton"/>
+        <div class="drawerFooter">
-    </MudAppBar>
+            <SearchButtonComponent/>
-    <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
+        </div>
-        <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
+    </MudDrawer>
-            <MudPaper Width="250px" Class="d-inline-flex py-3" Elevation="0">
-                <MudNavMenu Class="mud-width-full flex-grow-1">
-                    @foreach (var page in WebsiteData.GetPages())
-                    {
-                        <MudNavLink Href="@(page.Href)" Icon="@(page.Icon)">@(page.Name)</MudNavLink>
-                    }
-                </MudNavMenu>
-            </MudPaper>
-        </MudDrawer>
-    </MudHidden>
 
     <MudMainContent>
         <MudContainer Class="px-8" MaxWidth="MaxWidth.False">
@@ -61,9 +48,38 @@
     </MudMainContent>
 </MudLayout>
 
-<FooterComponent></FooterComponent>
+<FooterComponent/>
 
+<style>
+    .mobile-menu-fab {
+        position: fixed;
+        top: 12px;
+        left: 12px;
+        z-index: 999;
+        background-color: var(--accent);
+        border-radius: 8px;
+        padding: 8px;
+        color: white;
+    }
 
+    .drawerHeader {
+        padding: 20px 16px 16px;
+        border-bottom: 1px solid var(--paper-border);
+    }
+
+    .drawerTitle {
+        font-weight: 700;
+        color: white;
+    }
+
+    .drawerNav {
+        padding: 8px 0;
+    }
+
+    .drawerFooter {
+        padding: 16px;
+    }
+</style>
 
 @code {
 
@@ -72,15 +88,9 @@
 
     bool _drawerOpen = true;
 
-    void DrawerToggle()
-    {
-        _drawerOpen = !_drawerOpen;
-    }
-
     protected override void OnInitialized()
     {
         base.OnInitialized();
-
         CollectFirstPageLoaded();
     }
 
@@ -108,36 +118,7 @@
             new Dictionary<string, string> { { "page", rootUrl } });
     }
 
-    protected override async Task OnInitializedAsync()
-    {
-        await Focus();
-    }
-
-    private async Task Focus()
-    {
-        //   await jsRuntime.InvokeVoidAsync("SetFocusToElement", pageContents);
-    }
-
-    protected override async void OnAfterRender(bool firstRender)
-    {
-        // await jsRuntime.InvokeVoidAsync("SetFocusToElement", pageContents);
-    }
-
     void IDisposable.Dispose()
     {
     }
-
-    void HasChanged()
-    {
-        StateHasChanged();
-    }
-
-    private void HandleKeyDown(KeyboardEventArgs keyboardEventArgs)
-    {
-        if ((keyboardEventArgs.CtrlKey || keyboardEventArgs.MetaKey) && keyboardEventArgs.Key.ToLower() == "k")
-        {
-            SearchService.Show();
-        }
-    }
-
 }

Web/PageLayout.razor.css

@@ -1,13 +1,7 @@
-.layoutContainer {
+.content {
-    height: 100vh;
-    overflow-y: scroll;
-    overflow-x: hidden;
-}
-
-.content {
-    margin-bottom: 64px;
     display: flex;
     min-width: 100%;
     min-height: 100%;
     flex-direction: column;
+    padding-top: 16px;
 }