Skip to content

feat: apply AndreGoepel.Design.Blazor design system (infra + shell) #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andregoepel merged 1 commit into from
Jul 8, 2026
Merged

feat: apply AndreGoepel.Design.Blazor design system (infra + shell) #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion Directory.Packages.props
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
</ItemGroup>

<ItemGroup Label="AndreGoepel">
<PackageVersion Include="AndreGoepel.Marten.Identity.Blazor" Version="1.2.0" />
<PackageVersion Include="AndreGoepel.Design.Blazor" Version="1.0.0" />
<PackageVersion Include="AndreGoepel.Marten.Identity.Blazor" Version="1.3.0" />
</ItemGroup>

<ItemGroup Label="OpenTelemetry">
Expand Down
7 changes: 7 additions & 0 deletions samples/AndreGoepel.AppFoundation.Sample/Components/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,16 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<!-- Self-hosted design-system fonts (Manrope / Space Grotesk / JetBrains Mono). -->
<link rel="stylesheet" href="_content/AndreGoepel.Design.Blazor/css/fonts.css" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css" />
<!-- AndreGoepel.Design.Blazor token layer — must load AFTER Radzen's material-base. -->
<link rel="stylesheet" href="_content/AndreGoepel.Design.Blazor/css/design.css" />
<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["AndreGoepel.AppFoundation.Sample.styles.css"]" />
<!-- Resolve + apply the persisted theme before first paint; off-canvas nav toggle. -->
<script src="_content/AndreGoepel.Design.Blazor/js/theme.js"></script>
<script src="_content/AndreGoepel.Design.Blazor/js/nav.js"></script>
<ImportMap />
<HeadOutlet @rendermode="InteractiveServer" />
</head>
Expand Down
1 change: 1 addition & 0 deletions src/AndreGoepel.AppFoundation.Hosting/Initialization.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
using AndreGoepel.AppFoundation.MailService;
using AndreGoepel.Marten.Identity;
using AndreGoepel.Marten.Identity.Blazor;
using AndreGoepel.Marten.Identity.Blazor.Features;
using AndreGoepel.Marten.Identity.Users;
using JasperFx;
using Marten;
Expand Down
31 changes: 21 additions & 10 deletions src/AndreGoepel.AppFoundation.Hosting/packages.lock.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
"net10.0": {
"AndreGoepel.Marten.Identity.Blazor": {
"type": "Direct",
"requested": "[1.2.0, )",
"resolved": "1.2.0",
"contentHash": "9333mUhD6RIWdimln+ex5suLnY51DcafY+LHU4jVmfKngTKi5J0WTgNBau5+3lPi5+3PjUjnLaHq6pUPFUn48Q==",
"requested": "[1.3.0, )",
"resolved": "1.3.0",
"contentHash": "eULYGyNNGITdasW3nOmaAcUnOjl8fy0rrhEFYTxsUU+F6bJtfLNjGsMDLhFIpc+uS8DRGfhbSGjd7VHOJs9i4w==",
"dependencies": {
"AndreGoepel.Marten.Identity": "1.2.0",
"AndreGoepel.Design.Blazor": "1.0.0",
"AndreGoepel.Marten.Identity": "1.3.0",
"Marten": "9.12.0",
"Radzen.Blazor": "11.1.0"
}
Expand Down Expand Up @@ -59,19 +60,19 @@
},
"AndreGoepel.Marten.Identity": {
"type": "Transitive",
"resolved": "1.2.0",
"contentHash": "zfvSm4io9gcCjQCFyWThZlbSOwfGoH+Idbp2l/gReR3OcyoUf4VPHiECdBmWGkxIS8mczBiaiI3blL0nuKChQQ==",
"resolved": "1.3.0",
"contentHash": "F/QEiI0rJ7CGXoMDKvmJW9/IU8UB3LaMb4peL2DZzsmtadXmLrqjI1E/ZoVxt5QhiW7gFRBa1cDBiDk551aA8w==",
"dependencies": {
"AndreGoepel.Marten.Identity.Abstractions": "1.2.0",
"AndreGoepel.Marten.Identity.Abstractions": "1.3.0",
"Marten": "9.12.0",
"Marten.AspNetCore": "9.12.0",
"Quartz.Extensions.Hosting": "3.18.2"
}
},
"AndreGoepel.Marten.Identity.Abstractions": {
"type": "Transitive",
"resolved": "1.2.0",
"contentHash": "CYj9qrcXogO6kciAF7rQfuiERBdXm8T7e4DY4pc5qSEufWyhUAC7DqJksedigQ4NBpsdoT1AXE9KBxWTMnHPkA=="
"resolved": "1.3.0",
"contentHash": "/mYBlD9bHJae05zDL4xBpddmL2OpHpdVsJSm9rUTAEG2wS+4EGgcRYkq1/yOC98TcO9CABNua9J69HT6XII5hg=="
},
"BouncyCastle.Cryptography": {
"type": "Transitive",
Expand Down Expand Up @@ -546,7 +547,8 @@
"type": "Project",
"dependencies": {
"AndreGoepel.AppFoundation.MailService": "[1.1.0, )",
"AndreGoepel.Marten.Identity.Blazor": "[1.2.0, )",
"AndreGoepel.Design.Blazor": "[1.0.0, )",
"AndreGoepel.Marten.Identity.Blazor": "[1.3.0, )",
"Marten": "[9.12.0, )",
"Radzen.Blazor": "[11.1.0, )",
"WolverineFx.Marten": "[6.16.0, )"
Expand All @@ -572,6 +574,15 @@
"OpenTelemetry.Instrumentation.Runtime": "[1.15.1, )"
}
},
"AndreGoepel.Design.Blazor": {
"type": "CentralTransitive",
"requested": "[1.0.0, )",
"resolved": "1.0.0",
"contentHash": "2Sz0LwsyzW0T2RLqdPPza6l/RfVvHkdUt1rKEiQoJQGXmdng+Lw8ehvtQ99M6zMWuT46HQlusbIB5LOK1cyXcQ==",
"dependencies": {
"Radzen.Blazor": "11.1.0"
}
},
"MailKit": {
"type": "CentralTransitive",
"requested": "[4.17.0, )",
Expand Down
1 change: 1 addition & 0 deletions src/AndreGoepel.AppFoundation/AndreGoepel.AppFoundation.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
<ItemGroup>
<PackageReference Include="Marten" />
<PackageReference Include="Radzen.Blazor" />
<PackageReference Include="AndreGoepel.Design.Blazor" />
<PackageReference Include="AndreGoepel.Marten.Identity.Blazor" />
<PackageReference Include="WolverineFx.Marten" />
</ItemGroup>
Expand Down
95 changes: 31 additions & 64 deletions src/AndreGoepel.AppFoundation/Components/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,75 +7,45 @@
@inject NavigationManager NavigationManager
@inject Microsoft.Extensions.Options.IOptions<AppFoundationLayoutOptions> LayoutOptions

@* Radzen overlay hosts (dialog/notification/tooltip/context-menu) for interactive pages. *@
<RadzenComponents @rendermode="InteractiveServer" />

<RadzenLayout Style="grid-template-areas: 'rz-sidebar rz-header' 'rz-sidebar rz-body';">

<RadzenHeader>
<RadzenRow JustifyContent="JustifyContent.Start" AlignItems="AlignItems.Center" Gap="0">
<RadzenColumn Size="5">
<RadzenSidebarToggle Click="@SidebarToggleClick" />
</RadzenColumn>
<RadzenColumn Size="7">
<RadzenStack AlignItems="AlignItems.Center"
Orientation="Orientation.Horizontal"
JustifyContent="JustifyContent.End">
<AuthorizeView>
<Authorized>
<RadzenProfileMenu Click="@OnProfileMenuClick">
<ChildContent>
<RadzenProfileMenuItem Path="/Account/Manage/Profile"
Icon="manage_accounts"
Text="Profile" />
<RadzenProfileMenuItem Text="Logout"
Icon="power_settings_new" />
</ChildContent>
<Template>
<RadzenLabel Text="@currentUserName" />
</Template>
</RadzenProfileMenu>
</Authorized>
</AuthorizeView>
</RadzenStack>
</RadzenColumn>
</RadzenRow>
</RadzenHeader>

<RadzenSidebar Expanded="@sidebarExpanded" Style="z-index: 2;">
<RadzenStack AlignItems="AlignItems.Center"
class="rz-py-4 rz-py-lg-6"
Style="padding: var(--rz-panel-menu-item-padding); border-bottom: var(--rz-panel-menu-item-border);">
<RadzenImage Path="@Layout.LogoPath" Style="width: 48px; height: 48px;" />
<RadzenText Text="@Layout.BrandName"
TextStyle="TextStyle.Subtitle1"
class="rz-mb-0"
Style="color: var(--rz-primary-light);" />
</RadzenStack>

<AppShell BrandName="@Layout.BrandName">
<Sidebar>
<NavMenu />
</Sidebar>

<TopbarActions>
<ThemeToggle />
<AuthorizeView>
<Authorized>
<RadzenProfileMenu Click="@OnProfileMenuClick">
<ChildContent>
<RadzenProfileMenuItem Path="/Account/Manage/Profile"
Icon="manage_accounts"
Text="Profile" />
<RadzenProfileMenuItem Text="Logout"
Icon="power_settings_new" />
</ChildContent>
<Template>
<RadzenLabel Text="@currentUserName" />
</Template>
</RadzenProfileMenu>
</Authorized>
</AuthorizeView>
</TopbarActions>

<SidebarFooter>
@if (!string.IsNullOrWhiteSpace(Layout.Copyright))
{
<RadzenStack AlignItems="AlignItems.Center"
Gap="0"
class="rz-py-4 rz-py-lg-6"
Style="padding: var(--rz-panel-menu-item-padding);">
<RadzenText Text="@Layout.Copyright"
TextStyle="TextStyle.Caption"
Style="color: var(--rz-text-disabled-color);"
TagName="TagName.P"
TextAlign="TextAlign.Center" />
</RadzenStack>
<span class="ag-sidebar-note">@Layout.Copyright</span>
}
</RadzenSidebar>

<RadzenBody>
<RadzenContentContainer>
@Body
</RadzenContentContainer>
</RadzenBody>
</SidebarFooter>

</RadzenLayout>
<ChildContent>
@Body
</ChildContent>
</AppShell>

<div id="blazor-error-ui" data-nosnippet>
An unhandled error has occurred.
Expand All @@ -84,7 +54,6 @@
</div>

@code {
private bool sidebarExpanded = true;
private string? currentUserName;

private AppFoundationLayoutOptions Layout => LayoutOptions.Value;
Expand All @@ -95,8 +64,6 @@
currentUserName = authState.User.Identity?.Name;
}

void SidebarToggleClick() => sidebarExpanded = !sidebarExpanded;

void OnProfileMenuClick(RadzenProfileMenuItem item)
{
if (item.Text == "Logout")
Expand Down
80 changes: 40 additions & 40 deletions src/AndreGoepel.AppFoundation/Components/Layout/NavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

@using AndreGoepel.Marten.Identity
@using AndreGoepel.Marten.Identity.Blazor
@using Radzen.Blazor
@using AndreGoepel.Marten.Identity.Blazor.Features
@using global::Marten

@inject IQuerySession QuerySession
Expand All @@ -12,51 +12,51 @@

@if (SetupComplete)
{
<RadzenPanelMenu>
<RadzenPanelMenuItem Text="Home" Icon="home" Path="/dashboard" />
<NavLink class="ag-nav-item ag-home" href="dashboard" Match="NavLinkMatch.All">⌂&nbsp;&nbsp;Home</NavLink>

@if (Layout.Menu is not null)
{
<DynamicComponent Type="Layout.Menu" />
}
@* Host-contributed entries. Contributed menus should render ag-nav-item /
ag-nav-section markup to match the design shell. *@
@if (Layout.Menu is not null)
{
<DynamicComponent Type="Layout.Menu" />
}

<AuthorizeView>
<Authorized>
<RadzenPanelMenuItem Text="Account" Icon="manage_accounts">
<RadzenPanelMenuItem Text="Profile" Path="Account/Manage/Profile" />
<RadzenPanelMenuItem Text="Email" Path="Account/Manage/Email" />
<RadzenPanelMenuItem Text="Password" Path="Account/Manage/ChangePassword" />
@if (twoFactorEnabled)
{
<RadzenPanelMenuItem Text="Two-factor authentication" Path="Account/Manage/TwoFactorAuthentication" />
}
@if (passkeyEnabled)
{
<RadzenPanelMenuItem Text="Passkeys" Path="Account/Manage/Passkeys" />
}
<RadzenPanelMenuItem Text="Personal data" Path="Account/Manage/PersonalData" />
</RadzenPanelMenuItem>
</Authorized>
</AuthorizeView>
<AuthorizeView>
<Authorized>
<div class="ag-nav-section">ACCOUNT</div>
<div class="ag-nav-group">
<NavLink class="ag-nav-item" href="Account/Manage/Profile">Profile</NavLink>
<NavLink class="ag-nav-item" href="Account/Manage/Email">Email</NavLink>
<NavLink class="ag-nav-item" href="Account/Manage/ChangePassword">Password</NavLink>
@if (twoFactorEnabled)
{
<NavLink class="ag-nav-item" href="Account/Manage/TwoFactorAuthentication">Two-factor authentication</NavLink>
}
@if (passkeyEnabled)
{
<NavLink class="ag-nav-item" href="Account/Manage/Passkeys">Passkeys</NavLink>
}
<NavLink class="ag-nav-item" href="Account/Manage/PersonalData">Personal data</NavLink>
</div>
</Authorized>
</AuthorizeView>

<AuthorizeView Roles="Administrator">
<Authorized>
<RadzenPanelMenuItem Text="Administration" Icon="settings">
<RadzenPanelMenuItem Text="User Cleanup" Path="Administration/UserCleanup" />
<RadzenPanelMenuItem Text="Users" Path="Administration/Users" />
<RadzenPanelMenuItem Text="Roles" Path="Administration/Roles" />
<RadzenPanelMenuItem Text="Login Features" Path="Administration/LoginFeatures" />
<RadzenPanelMenuItem Text="Email Settings" Path="Administration/EmailSettings" />
</RadzenPanelMenuItem>
</Authorized>
</AuthorizeView>
</RadzenPanelMenu>
<AuthorizeView Roles="Administrator">
<Authorized>
<div class="ag-nav-section">ADMINISTRATION</div>
<div class="ag-nav-group">
<NavLink class="ag-nav-item" href="Administration/UserCleanup">User cleanup</NavLink>
<NavLink class="ag-nav-item" href="Administration/Users">Users</NavLink>
<NavLink class="ag-nav-item" href="Administration/Roles">Roles</NavLink>
<NavLink class="ag-nav-item" href="Administration/LoginFeatures">Login features</NavLink>
<NavLink class="ag-nav-item" href="Administration/EmailSettings">Email settings</NavLink>
</div>
</Authorized>
</AuthorizeView>
}
else
{
<RadzenPanelMenu>
<RadzenPanelMenuItem Text="Setup" Icon="install_desktop" Path="/Setup" />
</RadzenPanelMenu>
<NavLink class="ag-nav-item ag-home" href="Setup" Match="NavLinkMatch.All">Setup</NavLink>
}

@code {
Expand Down
2 changes: 2 additions & 0 deletions src/AndreGoepel.AppFoundation/Components/_Imports.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
@using AndreGoepel.Marten.Identity.Blazor.Components.Account
@using AndreGoepel.Marten.Identity.Blazor.Components.Account.Shared
@using AndreGoepel.Marten.Identity.Blazor.Components.Layout
@using AndreGoepel.Design.Blazor
@using AndreGoepel.Design.Blazor.Components
@using AndreGoepel.AppFoundation
@using AndreGoepel.AppFoundation.Components
@using AndreGoepel.AppFoundation.Components.Layout
Expand Down
2 changes: 1 addition & 1 deletion src/AndreGoepel.AppFoundation/Identity/IdentityFeatureServiceCollectionExtensions.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
using AndreGoepel.AppFoundation.Identity;
using AndreGoepel.Marten.Identity.Blazor;
using AndreGoepel.Marten.Identity.Blazor.Features;

namespace Microsoft.Extensions.DependencyInjection;

Expand Down
2 changes: 1 addition & 1 deletion src/AndreGoepel.AppFoundation/Identity/MartenIdentityFeatureProvider.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
using AndreGoepel.Marten.Identity.Blazor;
using AndreGoepel.Marten.Identity.Blazor.Features;

namespace AndreGoepel.AppFoundation.Identity;

Expand Down
Loading
Loading