Adding MudBlazor UI with new Nav

Components/Components.csproj

@@ -21,7 +21,7 @@
     <ItemGroup>
         <PackageReference Include="Markdig" Version="0.28.1" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.8" />
-        <PackageReference Include="Microsoft.Extensions.Localization" Version="6.0.8" />
+        <PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0-preview.7.22376.6" />
     </ItemGroup>
 
     <ItemGroup>

Components/Inputs/ButtonComponent.razor

@@ -1,4 +1,4 @@
-<button class="buttonContainer @ButtonType.ToString().ToLower()" @onclick="ButtonClicked">@ChildContent</button>
+<button class="buttonContainer @MyButtonType.ToString().ToLower()" @onclick="ButtonClicked">@ChildContent</button>
 
 <style>
     .buttonContainer {
@@ -9,23 +9,23 @@
         font-size: 1.2rem;
     }
 
-    .@(ButtonType.Primary.ToString().ToLower()) {
+    .@(MyButtonType.Primary.ToString().ToLower()) {
         border-color: var(--primary);
         background-color: var(--primary);
     }
 
-    .@ButtonType.Secondary.ToString().ToLower() {
+    .@MyButtonType.Secondary.ToString().ToLower() {
         border-color: var(--secondary);
         background-color: var(--secondary);
     }
 
-        .@ButtonType.Primary.ToString().ToLower():hover {
+        .@MyButtonType.Primary.ToString().ToLower():hover {
             background-color: var(--primary-hover);
             border-color: var(--primary-border-hover);
             color: white;
         }
 
-        .@ButtonType.Secondary.ToString().ToLower():hover {
+        .@MyButtonType.Secondary.ToString().ToLower():hover {
             background-color: var(--secondary-hover);
             border-color: var(--secondary-border-hover);
             color: white;
@@ -43,7 +43,7 @@
     public EventCallback<EventArgs> OnClick { get; set; } = default!;
 
     [Parameter]
-    public ButtonType ButtonType { get; set; } = default!;
+    public MyButtonType MyButtonType { get; set; } = default!;
 
     private void ButtonClicked(EventArgs eventArgs)
     {

Components/Inputs/MyButtonType.cs

@@ -1,6 +1,6 @@
 namespace Components.Inputs;
 
-public enum ButtonType
+public enum MyButtonType
 {
     Primary, // Positive Actions
     Secondary // Destruction Action

IGP/Dialog/ConfirmationDialogComponent.razor

@@ -1,11 +1,12 @@
-@implements IDisposable;
+@using Services.Website
-@inject IDialogService DialogService
+@implements IDisposable;
+@inject IMyDialogService MyDialogService
 @inject IJSRuntime JsRuntime
 
 
 @inject NavigationManager NavigationManager
 
-@if (DialogService.IsVisible)
+@if (MyDialogService.IsVisible)
 {
     <div class="confirmDialogBackground" onclick="@CloseDialog">
         <div class="confirmDialogContainer"
@@ -13,18 +14,18 @@
              @onclick:stopPropagation="true">
 
             <div class="confirmDialogHeader">
-                @DialogService.GetDialogContents().Title
+                @MyDialogService.GetDialogContents().Title
             </div>
             <div class="confirmDialogBody">
-                @DialogService.GetDialogContents().Message
+                @MyDialogService.GetDialogContents().Message
             </div>
 
             <div class="confirmDialogFooter">
-                <ButtonComponent ButtonType="ButtonType.Secondary" OnClick="DialogService.GetDialogContents().OnCancel">
+                <ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="MyDialogService.GetDialogContents().OnCancel">
                     Cancel
                 </ButtonComponent>
-                <ButtonComponent ButtonType="ButtonType.Primary" OnClick="DialogService.GetDialogContents().OnConfirm">
+                <ButtonComponent MyButtonType="MyButtonType.Primary" OnClick="MyDialogService.GetDialogContents().OnConfirm">
-                    @DialogService.GetDialogContents().ConfirmButtonLabel
+                    @MyDialogService.GetDialogContents().ConfirmButtonLabel
                 </ButtonComponent>
             </div>
         </div>
@@ -96,18 +97,18 @@
     {
         base.OnInitialized();
 
-        DialogService.Subscribe(StateHasChanged);
+        MyDialogService.Subscribe(StateHasChanged);
     }
 
     void IDisposable.Dispose()
     {
-        DialogService.Unsubscribe(StateHasChanged);
+        MyDialogService.Unsubscribe(StateHasChanged);
     }
 
 
     public void CloseDialog()
     {
-        DialogService.Hide();
+        MyDialogService.Hide();
     }
 
 

IGP/IGP.csproj

@@ -25,6 +25,7 @@
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0-preview.7.22376.6" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0-preview.7.22376.6" />
         <PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0-preview.7.22376.6" />
+        <PackageReference Include="MudBlazor" Version="6.0.14" />
     </ItemGroup>
 
     <ItemGroup>

IGP/PageLayout.razor

@@ -6,37 +6,91 @@
 @using Services.Website
 @implements IDisposable
 
-<div class="pageContents">
+<MudThemeProvider/>
-    <div class="layoutContainer">
+
-        @if (!WebService.IsLoaded())
+asd
-        {
+
-            <LoadingComponent/>
+<MudLayout>
-        }
+    <MudAppBar Elevation="1">
-        else
+        <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
-        {
+            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())"/>
+        </MudHidden>
+        <MudButton
+            Class="ml-3 mr-8"
+            Href="/"
+            Target="_self"
+            Variant="Variant.Text"
+            Color="Color.Default">
+            <MudText Typo="Typo.h5"> IGP Fan Reference</MudText>
+        </MudButton>
+        <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
+            <MudButton Href="/build-calculator"
+                       Variant="Variant.Text"
+                       Color="Color.Default"
+                       Class="mr-4">
+                <MudIcon Icon="fa-solid fa-helmet-battle" Class="mr-2"/>
+                Build Calculator
+            </MudButton>
+            <MudButton Href="/harass-calculator"
+                       Variant="Variant.Text"
+                       Color="Color.Default"
+                       Class="mr-4">
+                <MudIcon Icon="fa-solid fa-bow-arrow" Class="mr-2"/>
+                Harass Calculator
+            </MudButton>
+            <MudButton Href="/database"
+                       Variant="Variant.Text"
+                       Color="Color.Default"
+                       Class="mr-4">
+                <MudIcon Icon="fa-solid fa-clipboard-list" Class="mr-2"/>
+                Database
+            </MudButton>
+        </MudHidden>
+        <MudSpacer/>
+        <MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Inherit" Edge="Edge.End"/>
+    </MudAppBar>
+    <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
+        <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
+            <MudPaper Width="250px" Class="d-inline-flex py-3" Elevation="0">
+                <MudNavMenu Class="mud-width-full flex-grow-1">
+                    <MudNavLink Href="/build-calculator" Icon="fa-solid fa-helmet-battle">Build Calculator</MudNavLink>
+                    <MudNavLink Href="/harass-calculator" Icon="fa-solid fa-bow-arrow">Harass Calculator</MudNavLink>
+                    <MudNavLink Href="/database" Icon="fa-solid fa-clipboard-list">Database</MudNavLink>
+                    <MudSpacer/>
+                    <MudDivider Class="my-2"/>
+                    <MudNavLink Href="/settings" Icon="fa-solid fa-gear">Settings</MudNavLink>
+                    <MudDivider Class="my-2"/>
+                </MudNavMenu>
+            </MudPaper>
+        </MudDrawer>
+    </MudHidden>
+
+    <MudMainContent>
+        <MudContainer Class="px-8" MaxWidth="MaxWidth.False">
             <div id="content" class="content">
                 @Body
             </div>
+        </MudContainer>
+    </MudMainContent>
+</MudLayout>
 
 
-            <DesktopNavComponent WebSections=WebService.WebSectionModels
+<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>
-                                 WebPages=WebService.WebPageModels/>
+<MudDialogProvider/>
-            <TabletNavComponent WebSections=WebService.WebSectionModels
+<MudSnackbarProvider/>
-                                WebPages=WebService.WebPageModels/>
-            <MobileNavComponent WebSections=WebService.WebSectionModels
-                                WebPages=WebService.WebPageModels/>
-            
-            
-            <FooterComponent/>
-        }
-    </div>
-
-    
-</div>
-
 
 @code {
 
+    private bool _isDarkMode;
+    private MudThemeProvider _mudThemeProvider;
+
+    bool _drawerOpen = true;
+
+    void DrawerToggle()
+    {
+        _drawerOpen = !_drawerOpen;
+    }
+
     protected override void OnInitialized()
     {
         base.OnInitialized();
@@ -45,6 +99,15 @@
         CollectFirstPageLoaded();
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _isDarkMode = await _mudThemeProvider.GetSystemPreference();
+            StateHasChanged();
+        }
+    }
+
     private void CollectFirstPageLoaded()
     {
         var skipBaseUri = NavigationManager.Uri.Substring(NavigationManager.BaseUri.Length,

IGP/PageLayout.razor.css

@@ -5,22 +5,9 @@
 }
 
 .content {
-    margin-top: 32px;
     margin-bottom: 64px;
     display: flex;
     min-width: 100%;
     min-height: 100%;
     flex-direction: column;
 }
-
-@media only screen and (max-width: 1025px) {
-    .content {
-        margin-top: 120px;
-    }
-}
-
-@media only screen and (max-width: 480px) {
-    .content {
-        margin-top: 20px;
-    }
-}

IGP/Pages/BuildCalculator/BuildCalculatorPage.razor

@@ -32,7 +32,7 @@
 
     <div class="calculatorGrid">
         <div class="gridItem" style="grid-area: timing;">
-            <ButtonComponent ButtonType="ButtonType.Secondary" OnClick="OnResetClicked">Clear Build Order</ButtonComponent>
+            <ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="OnResetClicked">Clear Build Order</ButtonComponent>
             <PanelComponent>
                 <InfoTooltipComponent InfoText="@Locale["Tooltip Timing Info"]">
                     <TimingComponent></TimingComponent>

IGP/Pages/MemoryTester/Parts/UnitMemoryManager.razor

@@ -14,8 +14,8 @@
     </div>
 
     <div class="quizButtons">
-        <ButtonComponent ButtonType="ButtonType.Secondary" OnClick="OnRefreshQuiz">Refresh</ButtonComponent>
+        <ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="OnRefreshQuiz">Refresh</ButtonComponent>
-        <ButtonComponent ButtonType="ButtonType.Primary" OnClick="OnSubmitQuiz">Submit</ButtonComponent>
+        <ButtonComponent MyButtonType="MyButtonType.Primary" OnClick="OnSubmitQuiz">Submit</ButtonComponent>
     </div>
 </div>
 

IGP/Pages/PermissionsPage.razor

@@ -3,7 +3,7 @@
 @inject IPermissionService PermissionService
 @layout PageLayout
 
-@inject IDialogService DialogService 
+@inject IMyDialogService MyDialogService 
 
 @inherits BasePage
 @using Services.Website
@@ -96,17 +96,17 @@
         void OnDataCollectionConfirmClicked(MouseEventArgs mouseEventArgs)
         {
             PermissionService.SetIsDataCollectionEnabled(!PermissionService.GetIsDataCollectionEnabled());
-            DialogService.Hide();
+            MyDialogService.Hide();
         }
 
         void OnDataCollectionCancelClicked(MouseEventArgs mouseEventArgs)
         {
-            DialogService.Hide();
+            MyDialogService.Hide();
         }
 
         if (_storageEnabled && !PermissionService.GetIsDataCollectionEnabled())
         {
-            DialogService.Show(new DialogContents
+            MyDialogService.Show(new DialogContents
             {
                 Title = "Permission Request",
                 Message = "Are you sure you want to enable data collection? This feature is implemented with Google Analytics, and your data will be used to gauge interests, find bugs, and optimize updates in IGP Fan Reference.",

IGP/Portals/ConfirmationDialogPortal.razor

@@ -1,6 +1,6 @@
 @implements IDisposable;
 
-@inject IDialogService DialogService
+@inject IMyDialogService MyDialogService
 
 <ConfirmationDialogComponent></ConfirmationDialogComponent>
 
@@ -9,12 +9,12 @@
     protected override void OnInitialized()
     {
         base.OnInitialized();
-        DialogService.Subscribe(OnUpdate);
+        MyDialogService.Subscribe(OnUpdate);
     }
 
     void IDisposable.Dispose()
     {
-        DialogService.Unsubscribe(OnUpdate);
+        MyDialogService.Unsubscribe(OnUpdate);
     }
 
     void OnUpdate()

IGP/Program.cs

@@ -10,6 +10,7 @@ using Services;
 using Services.Development;
 using Services.Immortal;
 using Services.Website;
+using MudBlazor.Services;
     
 
 CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("en-US");
@@ -69,7 +70,7 @@ builder.Services.AddScoped<IPermissionService, PermissionService>();
 builder.Services.AddScoped<IEconomyComparisonService, EconomyComparisionService>();
 builder.Services.AddScoped<IDataCollectionService, DataCollectionService>();
 
-builder.Services.AddScoped<IDialogService, DialogService>();
+builder.Services.AddScoped<IMyDialogService, MyDialogService>();
 
 
 builder.Services.AddScoped(sp => new HttpClient
@@ -77,6 +78,7 @@ builder.Services.AddScoped(sp => new HttpClient
     BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
 });
 
+builder.Services.AddMudServices();
 
 #if NO_SQL
 

IGP/_Imports.razor

@@ -55,3 +55,4 @@
 @using Blazor.Analytics
 @using Blazor.Analytics.Components
 @using Blazor.Analytics.Abstractions
+@using MudBlazor

IGP/global.json

@@ -1,6 +1,6 @@
 {
   "sdk": {
-    "version": "6.0.0",
+    "version": "7.0.0",
     "rollForward": "latestMajor",
     "allowPrerelease": true
   }

IGP/wwwroot/index.html

@@ -16,6 +16,7 @@
 
     <link href="manifest.json" rel="manifest"/>
     <link href="icon-512.png" rel="apple-touch-icon" sizes="512x512"/>
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="fontawesome-pro-6.1.1-web/css/fontawesome.min.css" />
 </head>
 
@@ -60,7 +61,7 @@
     });
     
 </script>
-
+<script src="_content/MudBlazor/MudBlazor.min.js"></script>
 <script>navigator.serviceWorker.register('service-worker.js');</script>
 </body>
 

Playground/Program.cs

@@ -4,8 +4,6 @@ using Playground;
 
 using MudBlazor.Services;
 
-
-
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");

Services/IServices.cs

@@ -73,7 +73,7 @@ public interface ISearchService
     void Hide();
 }
 
-public interface IDialogService
+public interface IMyDialogService
 {
     public bool IsVisible { get; set; }
     public void Subscribe(Action action);

Services/Website/MyDialogService.cs

@@ -11,7 +11,7 @@ public class DialogContents
     public EventCallback<EventArgs> OnCancel { get; set; }
 }
 
-public class DialogService : IDialogService
+public class MyDialogService : IMyDialogService
 {
     private DialogContents _dialogContents;