feat: Implement sidebar toggle functionality and enhance Monthly Timesheet summary view

This commit is contained in:
Marco 2026-04-20 17:23:54 +02:00
commit a7f8dfba01
13 changed files with 686 additions and 58 deletions

View file

@ -2,59 +2,72 @@
@using WorkTracker.Configuration
@inject IOptions<AppAuthOptions> AppAuthOptions
@code {
[Parameter] public bool IsCollapsed { get; set; }
}
<div class="nav-menu-shell @(IsCollapsed ? "nav-menu-shell-collapsed" : string.Empty)" data-testid="sidebar-shell" data-collapsed="@(IsCollapsed ? "true" : "false")">
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">WorkTracker</a>
<a class="navbar-brand" href="" aria-label="WorkTracker home">
<span class="sidebar-brand-full">WorkTracker</span>
<span class="sidebar-brand-compact" aria-hidden="true">WT</span>
</a>
</div>
</div>
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<nav class="nav flex-column">
<div class="nav-scrollable">
<nav id="sidebar-navigation" class="nav flex-column" aria-label="Sidebar navigation">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Dashboard
<NavLink class="nav-link" href="" Match="NavLinkMatch.All" aria-label="Dashboard" title="Dashboard">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Dashboard</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="grid">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Grid View
<NavLink class="nav-link" href="grid" aria-label="Grid View" title="Grid View">
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Grid View</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="calendar">
<span class="bi bi-calendar3-nav-menu" aria-hidden="true"></span> Calendar
<NavLink class="nav-link" href="calendar" aria-label="Calendar" title="Calendar">
<span class="bi bi-calendar3-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Calendar</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="summary">
<span class="bi bi-bar-chart-fill-nav-menu" aria-hidden="true"></span> Summary
<NavLink class="nav-link" href="summary" aria-label="Summary" title="Summary">
<span class="bi bi-bar-chart-fill-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Summary</span>
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="settings">
<span class="bi bi-gear-fill-nav-menu" aria-hidden="true"></span> Settings
<NavLink class="nav-link" href="settings" aria-label="Settings" title="Settings">
<span class="bi bi-gear-fill-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Settings</span>
</NavLink>
</div>
<AuthorizeView>
<Authorized>
<div class="nav-item px-3">
<NavLink class="nav-link" href="auth">
<span class="bi bi-person-fill-nav-menu" aria-hidden="true"></span> @context.User.Identity?.Name
<NavLink class="nav-link" href="auth" aria-label="@context.User.Identity?.Name" title="@context.User.Identity?.Name">
<span class="bi bi-person-fill-nav-menu" aria-hidden="true"></span>
<span class="nav-label">@context.User.Identity?.Name</span>
</NavLink>
</div>
@if (AppAuthOptions.Value.Enabled)
{
<div class="nav-item px-3">
<form action="/api/logout" method="post">
<button type="submit" class="nav-link">
<span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout
<button type="submit" class="nav-link" aria-label="Logout" title="Logout">
<span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Logout</span>
</button>
</form>
</div>
@ -62,13 +75,15 @@
</Authorized>
<NotAuthorized>
<div class="nav-item px-3">
<NavLink class="nav-link" href="login">
<span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span> Login
<NavLink class="nav-link" href="login" aria-label="Login" title="Login">
<span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span>
<span class="nav-label">Login</span>
</NavLink>
</div>
</NotAuthorized>
</AuthorizeView>
</nav>
</div>
</div>