MudBlazor bugfix

IdentityProvider/Properties/launchSettings.json

@@ -10,6 +10,8 @@
   "profiles": {
     "IIS Express": {
       "commandName": "IISExpress",
+      "launchBrowser": true,
+
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },

NemAnCore/NemAnBlazor.csproj

@@ -21,6 +21,7 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="6.0.8" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.7" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.7" PrivateAssets="all" />
+    <PackageReference Include="MudBlazor" Version="6.0.14" />
     <PackageReference Include="protobuf-net.Grpc" Version="1.0.171" />
   </ItemGroup>
 

NemAnCore/Pages/Login.razor

@@ -10,9 +10,7 @@
 @inject ITrackClientService SearchService
 @using System.Security.Claims
 @inject Blazored.LocalStorage.ILocalStorageService localStorage
-
-
-        
+  
 <AuthorizeView>
     <Authorized>
         <p>Dobrodosli @context.User.Claims.FirstOrDefault(x => x.Type == "name")?.Value.ToUpper()</p>
@@ -25,11 +23,10 @@
 
 <PageTitle>Index</PageTitle>
 
-<h1>Pozdrav Diligent!</h1>
-
-
-Dobrodošli u našu NemAn aplikaciju.
-
+<MudText Typo="Typo.h3" GutterBottom="true">Pozdrav Diligent!</MudText>
+<MudText Class="mb-8">
+    Dobrodošli u našu NemAn aplikaciju.
+</MudText>
 
 
 

NemAnCore/Program.cs

@@ -5,6 +5,7 @@ using Grpc.Net.Client.Web;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using MudBlazor.Services;
 using NemAnBlazor;
 using NemAnBlazor.Services;
 using NemAnBlazor.Services.Interfaces;
@@ -24,6 +25,7 @@ builder.Services.AddScoped(_ =>
 });
 builder.Services.AddAuthorizationCore();
 //builder.Services.AddScoped<AuthenticationStateProvider, AuthClientService>();
+builder.Services.AddMudServices();
 
 builder.Services.AddScoped<ITrackClientService, TrackClientService>();
 builder.Services.AddScoped<IAuthClientService, AuthClientService>();

NemAnCore/Shared/MainLayout.razor

@@ -1,17 +1,31 @@
 @inherits LayoutComponentBase
 
-<div class="page">
-    <div style="background: green ;" class="sidebar">
+<MudThemeProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />
+
+<MudLayout>
+    <MudAppBar Elevation="0">
+        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
+    </MudAppBar>
+    <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
+        <MudDrawerHeader>
+            <MudText Typo="Typo.h6">Spotify</MudText>
+        </MudDrawerHeader>
         <NavMenu />
-    </div>
+    </MudDrawer>
+    <MudMainContent>
+        <MudContainer MaxWidth="MaxWidth.Large" Class="my-16 pt-16">
+            @Body
+        </MudContainer>
+    </MudMainContent>
+</MudLayout>
 
-    <main>
-        <div class="top-row px-4">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">Logout</a>
-        </div>
+@code {
+    bool _drawerOpen = true;
 
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
-</div>
+    void DrawerToggle()
+    {
+        _drawerOpen = !_drawerOpen;
+    }
+}

NemAnCore/Shared/NavMenu.razor

@@ -1,31 +1,8 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">Spotify</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </div>
-</div>
-
-<div class="@NavMenuCssClass" @onclick="ToggleNavMenu" >
-    <nav class="flex-column" >
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="home" Match="NavLinkMatch.All">
-                <span class="oi oi-home" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-@*        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="callback">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>*@
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="search">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Search
-            </NavLink>
-        </div>
-    </nav>
-</div>
+<MudNavMenu>
+    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Dashboard</MudNavLink>
+    <MudNavLink Href="home" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Home</MudNavLink>
+    <MudNavLink Href="search" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Search</MudNavLink>
+</MudNavMenu>
 
 @code {
     private bool collapseNavMenu = true;

NemAnCore/_Imports.razor

@@ -10,3 +10,4 @@
 @using NemAnBlazor.Shared
 @using System.Web
 @using Microsoft.AspNetCore.Components.Authorization
+@using MudBlazor

NemAnCore/wwwroot/index.html

@@ -9,6 +9,8 @@
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
     <link href="NemAnBlazor.styles.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
 </head>
 
 <body>
@@ -20,6 +22,7 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
 </body>
 
 </html>