mrcwlnd/timetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Neue navbar

Browse Source
This commit is contained in:
MarcWieland
2026-06-09 00:06:18 +02:00
parent 2029524379
commit 1def618e34
4 changed files with 442 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
timetracker.Client/Components/Layout/NavMenu.razor
+92 -36
View File
@@ -1,41 +1,97 @@
<div style="display:flex; flex-direction:column; height:100%;">
<MudNavMenu Style="flex:1">
<MudDivider Class="mb-2" />
<MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.CalendarMonth">Wochenübersicht</MudNavLink>
<MudNavLink Href="month" Icon="@Icons.Material.Filled.CalendarViewMonth">Monatsübersicht</MudNavLink>
<MudNavLink Href="stats" Icon="@Icons.Material.Filled.BarChart">Statistiken</MudNavLink>
<MudNavLink Href="feiertage" Icon="@Icons.Material.Filled.Celebration">Feiertage</MudNavLink>
<MudNavLink Href="urlaub-maximizer" Icon="@Icons.Material.Filled.AutoAwesome">Urlaubs-Maximizer</MudNavLink>
<MudNavLink Href="settings" Icon="@Icons.Material.Filled.Settings">Einstellungen</MudNavLink>
<MudDivider Class="mt-2 mb-2" />
<AuthorizeView Policy="AdminOnly">
<MudNavLink Href="admin/users" Icon="@Icons.Material.Filled.AdminPanelSettings" IconColor="Color.Error">
Benutzerverwaltung
</MudNavLink>
</AuthorizeView>
</MudNavMenu>
<AuthorizeView>
<Authorized>
<MudDivider />
@* Username Display - Styled to match NavLink layout exactly *@
<div class="mud-nav-link px-4 py-3" style="display: flex; align-items: center; color: var(--mud-palette-text-secondary); cursor: default; user-select: none;">
<MudIcon Icon="@Icons.Material.Filled.AccountCircle" Class="mr-6" Size="Size.Medium" Style="color: var(--mud-palette-text-secondary);" />
<MudText Typo="Typo.body2" Style="font-weight: 600; color: var(--mud-palette-text-primary);">@context.User.Identity?.Name</MudText>
</div>
</Authorized>
</AuthorizeView>
<div class="nav-container">
@* --- Brand / Logo Section --- *@
<div class="nav-header">
<div class="logo-wrapper">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" OnClick="OnToggleDrawer" Class="drawer-toggle-btn mr-1" />
<MudIcon Icon="@Icons.Material.Filled.AccessTime" Class="logo-icon" />
<span class="brand-text">Timetracker</span>
</div>
</div>
<MudNavMenu>
@* --- Navigation Links --- *@
<div class="nav-content">
<MudNavMenu Class="custom-nav-menu">
<MudTooltip Text="Wochenübersicht" Placement="Placement.Right">
<MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.CalendarMonth" Class="custom-nav-link">Wochenübersicht</MudNavLink>
</MudTooltip>
<MudTooltip Text="Monatsübersicht" Placement="Placement.Right">
<MudNavLink Href="month" Icon="@Icons.Material.Filled.CalendarViewMonth" Class="custom-nav-link">Monatsübersicht</MudNavLink>
</MudTooltip>
<MudTooltip Text="Statistiken" Placement="Placement.Right">
<MudNavLink Href="stats" Icon="@Icons.Material.Filled.BarChart" Class="custom-nav-link">Statistiken</MudNavLink>
</MudTooltip>
<MudTooltip Text="Feiertage" Placement="Placement.Right">
<MudNavLink Href="feiertage" Icon="@Icons.Material.Filled.Celebration" Class="custom-nav-link">Feiertage</MudNavLink>
</MudTooltip>
<MudTooltip Text="Urlaubs-Maximizer" Placement="Placement.Right">
<MudNavLink Href="urlaub-maximizer" Icon="@Icons.Material.Filled.AutoAwesome" Class="custom-nav-link">Urlaubs-Maximizer</MudNavLink>
</MudTooltip>
<MudTooltip Text="Einstellungen" Placement="Placement.Right">
<MudNavLink Href="settings" Icon="@Icons.Material.Filled.Settings" Class="custom-nav-link">Einstellungen</MudNavLink>
</MudTooltip>
<AuthorizeView Policy="AdminOnly">
<Authorized>
<div class="admin-divider-container">
<span class="admin-divider-text">Admin</span>
<hr class="admin-divider-line" />
</div>
<MudTooltip Text="Benutzerverwaltung" Placement="Placement.Right">
<MudNavLink Href="admin/users" Icon="@Icons.Material.Filled.AdminPanelSettings" Class="custom-nav-link admin-link">
Benutzerverwaltung
</MudNavLink>
</MudTooltip>
</Authorized>
</AuthorizeView>
</MudNavMenu>
</div>
@* --- Footer (User Profile & Action Info) --- *@
<div class="nav-footer">
<AuthorizeView>
<Authorized>
<MudNavLink Href="/auth/logout" Icon="@Icons.Material.Filled.Logout">Abmelden</MudNavLink>
<div class="user-profile-card">
<div class="avatar-container">
<MudAvatar Class="user-avatar">
@GetInitials(context.User.Identity?.Name)
</MudAvatar>
<span class="status-dot"></span>
</div>
<div class="user-info">
<span class="user-name">@context.User.Identity?.Name</span>
<span class="user-status">Online</span>
</div>
</div>
</Authorized>
</AuthorizeView>
<MudTooltip Text="Changelog anzeigen" Placement="Placement.Top">
<MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases"
Style="color: var(--mud-palette-text-disabled); font-size:0.75rem;">
Version 1.4
</MudNavLink>
</MudTooltip>
</MudNavMenu>
</div>
<MudNavMenu Class="footer-nav-menu">
<AuthorizeView>
<Authorized>
<MudTooltip Text="Abmelden" Placement="Placement.Right">
<MudNavLink Href="/auth/logout" Icon="@Icons.Material.Filled.Logout" Class="custom-nav-link logout-link">Abmelden</MudNavLink>
</MudTooltip>
</Authorized>
</AuthorizeView>
<MudTooltip Text="Changelog anzeigen" Placement="Placement.Right">
<MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases" Class="custom-nav-link version-link">
<span class="version-text">Version 1.4</span>
</MudNavLink>
</MudTooltip>
</MudNavMenu>
</div>
</div>
@code {
[Parameter] public EventCallback OnToggleDrawer { get; set; }
private string GetInitials(string? name)
{
if (string.IsNullOrWhiteSpace(name))
return "U";
var parts = name.Split(' ', StringSplitOptions.RemoveEmptyEntries);
if (parts.Length == 1)
return parts[0][..Math.Min(2, parts[0].Length)].ToUpper();
return $"{parts[0][0]}{parts[1][0]}".ToUpper();
}
}