Reworked layout by using CSS grids

Author: szv

src/CodeBreaker.Blazor.Client/Pages/GamePage.razor

@@ -3,11 +3,10 @@
 @using CodeBreaker.Blazor.Client.Models
 @using Codebreaker.GameAPIs.Client.Models
 
-<FluentCard>
-    <h2>@Loc["GamePage_Title"]</h2>
-
+<FluentCard AreaRestricted="false">
     @if (_gameStatus == GameMode.NotRunning)
     {
+        <h2>@Loc["GamePage_Title"]</h2>
         <FluentGrid Class="align-items-end">
             <FluentGridItem xs="12" md="6">
                 @if (_isNamePrefilled)

src/CodeBreaker.Blazor.Client/Shared/MainLayout.razor

@@ -2,15 +2,17 @@
 @inject IStringLocalizer<Resource> Loc
 @inject NavigationManager NavigationManager
 
-<FluentLayout>
-    <FluentHeader>
-        <h1><span id="welcome-message">@Loc["Index_Welcome"]</span> @Loc["AppDisplayName"]</h1>
-        <FluentSpacer />
-        <LoginDisplay />
-    </FluentHeader>
-    <div id="main-layout-stack">
+<div class="layout">
+    <div class="header-wrapper">
+        <FluentHeader>
+            <h1><span id="welcome-message">@Loc["Index_Welcome"]</span> @Loc["AppDisplayName"]</h1>
+            <FluentSpacer />
+            <LoginDisplay />
+        </FluentHeader>
+    </div>
+    <div class="main-layout-stack">
         @* Desktop navigation *@
-        <div id="large-navigation">
+        <div class="large-navigation">
             <FluentNavMenu Width="200" Style="box-shadow: var(--elevation-shadow-card-rest); height: 100%;">
                 @foreach (var navigationItem in _navigationItems)
                 {
@@ -20,7 +22,7 @@
         </div>
 
         @* Mobile navigation *@
-        <div id="small-navigation">
+        <div class="small-navigation">
             <FluentButton Id="mobile-nav-menu-button" Appearance="Appearance.Stealth" OnClick="ToggleMobileNavMenu" IconStart="@(new Icons.Regular.Size20.Navigation())">
                 @Loc["NavMenu_Title"]
             </FluentButton>
@@ -34,12 +36,12 @@
             </FluentMenu>
         </div>
 
-        <FluentBodyContent>
+        <div class="body-content">
             @Body
             <FluentDialogProvider />
-        </FluentBodyContent>
+        </div>
     </div>
-</FluentLayout>
+</div>
 
 <FluentDialogProvider />
 <FluentMenuProvider />

src/CodeBreaker.Blazor.Client/Shared/MainLayout.razor.css

@@ -9,27 +9,51 @@
     }
 }
 
-#main-layout-stack {
-    display: flex;
-    flex-direction: row;
+.layout {
     height: 100%;
+    display: grid;
+    grid-template-areas:
+        "header"
+        "rest";
+    grid-template-rows: auto 1fr;
 }
 
-#small-navigation {
-    display: none;
+.layout > .header-wrapper {
+    grid-area: header;
 }
-#large-navigation {
-    height: 100%;
+
+.layout > .main-layout-stack {
+    grid-area: rest;
+    display: grid;
+    grid-template-areas:
+        "mobile-menu mobile-menu"
+        "sidenav content";
+    grid-template-rows: auto 1fr;
+    grid-template-columns: auto 1fr;
+}
+
+.layout > .main-layout-stack > .large-navigation {
+    grid-area: sidenav;
+    box-shadow: var(--elevation-shadow-card-rest);
+    position: sticky;
+    top: 0;
+    overflow: hidden;
+}
+.layout > .main-layout-stack > .small-navigation {
+    grid-area: mobile-menu;
+    display: none;
 }
 
 @media only screen and (max-width: 1000px) {
-    #large-navigation {
+    .layout > .main-layout-stack > .large-navigation {
         display: none;
     }
-    #small-navigation {
+    .layout > .main-layout-stack > .small-navigation {
         display: block;
     }
-    #main-layout-stack {
-        flex-direction: column;
-    }
+}
+
+.layout > .main-layout-stack > .body-content {
+    grid-area: content;
+    padding: 1rem;
 }

src/CodeBreaker.Blazor/wwwroot/css/app.css

@@ -42,10 +42,6 @@ html, body, #app {
     background-color: var(--neutral-layer-1);
 }
 
-.body-content {
-    padding: 1rem;
-}
-
 :root {
     --primary: #8eb8e5ff;
     --on-primary: #ffffff;