[Blazor] Add menu of actions.

This commit is contained in:
2025-07-26 22:22:01 +01:00
parent dc4646512a
commit f4b87f68ec
5 changed files with 9 additions and 98 deletions

View File

@@ -2,10 +2,9 @@
<FluentLayout>
<FluentHeader>
RomRepoMgr.Blazor
ROM Repository Manager
</FluentHeader>
<FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
<NavMenu/>
<FluentBodyContent Class="body-content">
<div class="content">
@Body

View File

@@ -1,19 +0,0 @@
@rendermode InteractiveServer
<div class="navmenu">
<input class="navmenu-icon" id="navmenu-toggle" title="Menu expand/collapse toggle" type="checkbox"/>
<label class="navmenu-icon" for="navmenu-toggle">
<FluentIcon Color="Color.Fill" Value="@(new Icons.Regular.Size20.Navigation())"/>
</label>
<nav aria-labelledby="main-menu" class="sitenav">
<FluentNavMenu @bind-Expanded="expanded" Collapsible="true" CustomToggle="true" Id="main-menu" Title="Navigation menu" Width="250">
<FluentNavLink Href="/" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent" Match="NavLinkMatch.All">Home</FluentNavLink>
<FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
<FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
</FluentNavMenu>
</nav>
</div>
@code {
private bool expanded = true;
}

View File

@@ -1,22 +0,0 @@
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<div role="status" style="padding-bottom: 1em;">
Current count: <FluentBadge Appearance="Appearance.Neutral">@currentCount</FluentBadge>
</div>
<FluentButton Appearance="Appearance.Accent" @onclick="IncrementCount">Click me</FluentButton>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}

View File

@@ -1,7 +1,11 @@
@page "/"
<PageTitle>Home</PageTitle>
<PageTitle>ROM Repository Manager</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new Fluent Blazor app.
<FluentToolbar>
<FluentButton Disabled="true">Import DATs</FluentButton>
<FluentButton Disabled="true">Export DAT</FluentButton>
<FluentButton Disabled="true">Remove DAT</FluentButton>
<FluentButton Disabled="true">Import ROMs</FluentButton>
<FluentButton Disabled="true">Export ROMs</FluentButton>
</FluentToolbar>

View File

@@ -1,51 +0,0 @@
@page "/weather"
@attribute [StreamRendering]
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
<!-- This page is rendered in SSR mode, so the FluentDataGrid component does not offer any interactivity (like sorting). -->
<FluentDataGrid GridTemplateColumns="1fr 1fr 1fr 2fr" Id="weathergrid" Items="@forecasts" Loading="@(forecasts == null)" Style="height:204px;" TGridItem="WeatherForecast">
<PropertyColumn Align="Align.Start" Property="@(c => c!.Date)" Title="Date"/>
<PropertyColumn Align="Align.Center" Property="@(c => c!.TemperatureC)" Title="Temp. (C)"/>
<PropertyColumn Align="Align.Center" Property="@(c => c!.TemperatureF)" Title="Temp. (F)"/>
<PropertyColumn Align="Align.End" Property="@(c => c!.Summary)" Title="Summary"/>
</FluentDataGrid>
@code {
private IQueryable<WeatherForecast>? forecasts;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
forecasts = Enumerable.Range(1, 5)
.Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
})
.AsQueryable();
}
private class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}