Fixes null reference errors introduced in the .NET 6 move

samples/BlazorWebAssembly/BlazorWebAssembly.csproj

@@ -1,7 +1,9 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
 	  <TargetFramework>net6.0</TargetFramework>
+      <Nullable>enable</Nullable>
+      <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
   <ItemGroup>

samples/BlazorWebAssembly/Pages/Index.razor

@@ -1,23 +1,25 @@
 @page "/"
-@inject IToastService toastService
+@inject IToastService ToastService
 @inject NavigationManager NavigationManager
 
+<PageTitle>Blazored Toast Samples</PageTitle>
+
 <h1>Blazored Toasts</h1>
 
-<button class="btn btn-info" id="InfoButton" @onclick="@(() => toastService.ShowInfo("I'm an INFO message"))">Info Toast</button>
-<button class="btn btn-success" id="SuccessButton" @onclick="@(() => toastService.ShowSuccess("I'm a SUCCESS message with a custom heading", "Congratulations!"))">Success Toast</button>
-<button class="btn btn-warning" @onclick="@(() => toastService.ShowWarning("I'm a WARNING message"))">Warning Toast</button>
-<button class="btn btn-danger" @onclick="@(() => toastService.ShowError("I'm an ERROR message"))">Error Toast</button>
+<button class="btn btn-info" id="InfoButton" @onclick="@(() => ToastService.ShowInfo("I'm an INFO message"))">Info Toast</button>
+<button class="btn btn-success" id="SuccessButton" @onclick="@(() => ToastService.ShowSuccess("I'm a SUCCESS message with a custom heading", "Congratulations!"))">Success Toast</button>
+<button class="btn btn-warning" @onclick="@(() => ToastService.ShowWarning("I'm a WARNING message"))">Warning Toast</button>
+<button class="btn btn-danger" @onclick="@(() => ToastService.ShowError("I'm an ERROR message"))">Error Toast</button>
 <button class="btn btn-info" @onclick="@OnShowHtml">Info Toast with HTML</button>
-<button class="btn btn-info" @onclick="@(() => toastService.ShowInfo("Click to refresh the page", "Click me!", () => { NavigationManager.NavigateTo("/", true); }))">
+<button class="btn btn-info" @onclick="@(() => ToastService.ShowInfo("Click to refresh the page", "Click me!", () => { NavigationManager.NavigateTo("/", true); }))">
     Info Toast with custom action on click
 </button>
 <hr />
 
 <h1>Blazored Toasts - Custom Component</h1>
 
-<button class="btn btn-primary" @onclick="@(() => toastService.ShowToast<MyToastComponent>(new ToastInstanceSettings(5, true)))">Custom Toast</button>
-<button class="btn btn-secondary" id="CustomButton" @onclick="@(() => toastService.ShowToast<MyToastComponent>(_toastParameters, new ToastInstanceSettings(5, true)))">Custom Toast with parameters</button>
+<button class="btn btn-primary" @onclick="@(() => ToastService.ShowToast<MyToastComponent>(new ToastInstanceSettings(5, true)))">Custom Toast</button>
+<button class="btn btn-secondary" id="CustomButton" @onclick="@(() => ToastService.ShowToast<MyToastComponent>(_toastParameters, new ToastInstanceSettings(5, true)))">Custom Toast with parameters</button>
 <hr />
 
 <h1>Blazored Toasts - Remove Toasts</h1>
@@ -29,7 +31,7 @@
 
 @code
 {
-    private ToastParameters _toastParameters;
+    private ToastParameters _toastParameters = default!;
 
     protected override void OnInitialized()
     {
@@ -40,20 +42,19 @@
 
     private void OnShowHtml()
     {
-        RenderFragment message =@<text>I'm an <em>INFO</em> message with some <strong>bold</strong> text</text>
-    ;
-        toastService.ShowToast(ToastLevel.Info, message);
+        RenderFragment message = @<text>I'm an <em>INFO</em> message with some <strong>bold</strong> text</text>;
+        ToastService.ShowToast(ToastLevel.Info, message);
     }
 
     private void ClearAll()
-        => toastService.ClearAll();
+        => ToastService.ClearAll();
 
     private void ClearWarnings()
-        => toastService.ClearToasts(ToastLevel.Warning);
+        => ToastService.ClearToasts(ToastLevel.Warning);
 
     private void ClearInfos()
-        => toastService.ClearInfoToasts();
+        => ToastService.ClearInfoToasts();
 
     private void ClearCustom()
-        => toastService.ClearCustomToasts();
+        => ToastService.ClearCustomToasts();
 }

samples/BlazorWebAssembly/Pages/MyToastComponent.razor

@@ -16,8 +16,8 @@ else
 }
 
 @code{
-    [CascadingParameter] private BlazoredToast ToastInstance { get; set; }
+    [CascadingParameter] private BlazoredToast ToastInstance { get; set; } = default!;
 
-    [Parameter] public string Title { get; set; }
-    [Parameter] public string ToastParam { get; set; }
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? ToastParam { get; set; }
 }

samples/BlazorWebAssembly/Program.cs

@@ -4,7 +4,6 @@
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
-
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 

samples/BlazorWebAssembly/Shared/MainLayout.razor

@@ -9,12 +9,18 @@
                 ErrorIcon="fa fa-bug" 
                 SuccessIcon="fa fa-thumbs-up" />
 
-<div class="sidebar">
-    <NavMenu />
-</div>
-
-<div class="main">
-    <div class="content px-4">
-        @Body
+<div class="page">
+    <div class="sidebar">
+        <NavMenu />
     </div>
+
+    <main>
+        <div class="top-row px-4">
+            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+        </div>
+
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
 </div>

samples/BlazorWebAssembly/Shared/MainLayout.razor.css

@@ -0,0 +1,81 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.top-row ::deep a, .top-row ::deep .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+    text-decoration: none;
+}
+
+.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) {
+        display: none;
+    }
+
+    .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .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;
+    }
+}

samples/BlazorWebAssembly/Shared/NavMenu.razor

@@ -1,25 +1,28 @@
-<div class="top-row pl-4 navbar navbar-dark">
-    <a class="navbar-brand" href="">Blazor Wasm</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="">Blazor Wasm</a>
+        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
 </div>
 
-<div class=@(collapseNavMenu ? "collapse" : null) @onclick=@ToggleNavMenu>
-    <ul class="nav flex-column">
-        <li class="nav-item px-3">
+<div class="@NavMenuCssClass" @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>
-    </ul>
+        </div>
+    </nav>
 </div>
 
 @code {
-    bool collapseNavMenu = true;
+    private bool _collapseNavMenu = true;
+    private string? NavMenuCssClass => _collapseNavMenu ? "collapse" : null;
 
-    void ToggleNavMenu()
+    private void ToggleNavMenu()
     {
-        collapseNavMenu = !collapseNavMenu;
+        _collapseNavMenu = !_collapseNavMenu;
     }
 }

samples/BlazorWebAssembly/Shared/NavMenu.razor.css

@@ -0,0 +1,62 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    height: 3.5rem;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.oi {
+    width: 2rem;
+    font-size: 1.1rem;
+    vertical-align: text-top;
+    top: -2px;
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+.nav-item:first-of-type {
+    padding-top: 1rem;
+}
+
+.nav-item:last-of-type {
+    padding-bottom: 1rem;
+}
+
+.nav-item ::deep a {
+    color: #d7d7d7;
+    border-radius: 4px;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+}
+
+.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;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+}