Updated to match the .NET 7.0 template

Author: plbonneville

template/BlazorWithIdentity.Client/Shared/MainLayout.razor

@@ -9,15 +9,15 @@
                 <NavMenu />
             </div>
 
-            <div class="main">
+            <main>
                 <div class="top-row px-4">
-                    <button type="button" class="btn btn-link ml-md-auto" @onclick="@LogoutClick">Logout</button>
+                    <button type="button" class="btn btn-link" @onclick="@LogoutClick">Logout</button>
                 </div>
 
-                <div class="content px-4">
+                <article class="content px-4">
                     @Body
-                </div>
-            </div>
+                </article>
+            </main>
         </Authorized>
         <NotAuthorized>
             @*Just render the body so that RedirectToLogin works*@
@@ -27,7 +27,7 @@
 </div>
 
 
-@code{
+@code {
 
     async Task LogoutClick()
     {

template/BlazorWithIdentity.Client/Shared/MainLayout.razor.css

@@ -4,7 +4,7 @@
     flex-direction: column;
 }
 
-.main {
+main {
     flex: 1;
 }
 
@@ -21,15 +21,20 @@
     align-items: center;
 }
 
-    .top-row ::deep a, .top-row .btn-link {
+    .top-row ::deep a, .top-row ::deep .btn-link {
         white-space: nowrap;
         margin-left: 1.5rem;
+        text-decoration: none;
     }
 
-    .top-row a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+            text-decoration: underline;
+        }
+
+        .top-row ::deep a:first-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
 @media (max-width: 640.98px) {
     .top-row:not(.auth) {
@@ -40,7 +45,7 @@
         justify-content: space-between;
     }
 
-    .top-row a, .top-row .btn-link {
+    .top-row ::deep a, .top-row ::deep .btn-link {
         margin-left: 0;
     }
 }
@@ -63,7 +68,13 @@
         z-index: 1;
     }
 
-    .main > div {
+        .top-row.auth ::deep a:first-child {
+            flex: 1;
+            text-align: right;
+            width: 0;
+        }
+
+    .top-row, article {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;
     }

template/BlazorWithIdentity.Client/Shared/NavMenu.razor

@@ -1,36 +1,38 @@
-<div class="top-row pl-4 navbar navbar-dark">
-    <a class="navbar-brand" href="">BlazorWithIdentity</a>
-    <button class="navbar-toggler" @onclick="@ToggleNavMenu">
-        <span class="navbar-toggler-icon"></span>
-    </button>
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">BlazorApp4</a>
+        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
 </div>
 
-<div class="@NavMenuCssClass" @onclick="@ToggleNavMenu">
-    <ul class="nav flex-column">
-        <li class="nav-item px-3">
+<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
+    <nav class="flex-column">
+        <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
-        </li>
-        <li class="nav-item px-3">
+        </div>
+        <div class="nav-item px-3">
             <NavLink class="nav-link" href="counter">
                 <span class="oi oi-plus" aria-hidden="true"></span> Counter
             </NavLink>
-        </li>
-        <li class="nav-item px-3">
+        </div>
+        <div class="nav-item px-3">
             <NavLink class="nav-link" href="fetchdata">
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
             </NavLink>
-        </li>
-    </ul>
+        </div>
+    </nav>
 </div>
 
-@functions {
-    bool collapseNavMenu = true;
+@code {
+    private bool collapseNavMenu = true;
 
-    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
 
-    void ToggleNavMenu()
+    private void ToggleNavMenu()
     {
         collapseNavMenu = !collapseNavMenu;
     }

template/BlazorWithIdentity.Client/Shared/NavMenu.razor.css

@@ -40,15 +40,15 @@
         line-height: 3rem;
     }
 
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.25);
-    color: white;
-}
+        .nav-item ::deep a.active {
+            background-color: rgba(255,255,255,0.25);
+            color: white;
+        }
 
-.nav-item ::deep a:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
+        .nav-item ::deep a:hover {
+            background-color: rgba(255,255,255,0.1);
+            color: white;
+        }
 
 @media (min-width: 641px) {
     .navbar-toggler {
@@ -59,4 +59,10 @@
         /* Never collapse the sidebar for wide screens */
         display: block;
     }
+
+    .nav-scrollable {
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
 }

template/BlazorWithIdentity.Client/Shared/SurveyPrompt.razor

@@ -1,16 +1,16 @@
-<div class="alert alert-secondary mt-4" role="alert">
-    <span class="oi oi-pencil mr-2" aria-hidden="true"></span>
+<div class="alert alert-secondary mt-4">
+    <span class="oi oi-pencil me-2" aria-hidden="true"></span>
     <strong>@Title</strong>
 
     <span class="text-nowrap">
         Please take our
-        <a target="_blank" class="font-weight-bold" href="https://go.microsoft.com/fwlink/?linkid=2137916">brief survey</a>
+        <a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2186157">brief survey</a>
     </span>
     and tell us what you think.
 </div>
 
 @code {
     // Demonstrates how a parent component can supply parameters
     [Parameter]
-    public string Title { get; set; }
+    public string? Title { get; set; }
 }