JonathanMcCaffrey/IGP-Fan-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding MudBlazor UI with new Nav

Browse Source
This commit is contained in:
Jonathan McCaffrey
2022-08-27 21:46:52 -04:00
parent a00af60fa4
commit 404db2b862
18 changed files with 128 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IGP/PageLayout.razor
+88 -25
View File
@@ -6,45 +6,108 @@
@using Services.Website
@implements IDisposable
<div class="pageContents">
<div class="layoutContainer">
@if (!WebService.IsLoaded())
{
<LoadingComponent/>
}
else
{
<MudThemeProvider/>
asd
<MudLayout>
<MudAppBar Elevation="1">
<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
WebPages=WebService.WebPageModels/>
<TabletNavComponent WebSections=WebService.WebSectionModels
WebPages=WebService.WebPageModels/>
<MobileNavComponent WebSections=WebService.WebSectionModels
WebPages=WebService.WebPageModels/>
<FooterComponent/>
}
</div>
</div>
<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>
<MudDialogProvider/>
<MudSnackbarProvider/>
@code {
private bool _isDarkMode;
private MudThemeProvider _mudThemeProvider;
bool _drawerOpen = true;
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
protected override void OnInitialized()
{
base.OnInitialized();
WebService.Subscribe(HasChanged);
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,
@@ -54,7 +117,7 @@
{
rootUrl = "home";
}
DataCollectionService.SendEvent(DataCollectionKeys.FirstPage,
new Dictionary<string, string> { { "page", rootUrl } });
}