feat: Implement sidebar toggle functionality and enhance Monthly Timesheet summary view
This commit is contained in:
Marco
parent
cab549ab3a
commit
a7f8dfba01
13 changed files with 686 additions and 58 deletions
|
|
@ -1,12 +1,24 @@
|
|||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
<div class="page @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
|
||||
<div class="sidebar @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
|
||||
<NavMenu IsCollapsed="sidebarCollapsed" />
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="top-row px-4">
|
||||
<button
|
||||
type="button"
|
||||
class="sidebar-toggle"
|
||||
@onclick="ToggleSidebar"
|
||||
aria-label="Toggle sidebar"
|
||||
aria-controls="sidebar-navigation"
|
||||
aria-expanded="@(sidebarCollapsed ? "false" : "true")"
|
||||
title="Toggle sidebar">
|
||||
<span class="sidebar-toggle-bar"></span>
|
||||
<span class="sidebar-toggle-bar"></span>
|
||||
<span class="sidebar-toggle-bar"></span>
|
||||
</button>
|
||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -21,3 +33,12 @@
|
|||
<a href="." class="reload">Reload</a>
|
||||
<span class="dismiss">🗙</span>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool sidebarCollapsed = true;
|
||||
|
||||
private void ToggleSidebar()
|
||||
{
|
||||
sidebarCollapsed = !sidebarCollapsed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
|
@ -36,6 +37,27 @@ main {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin-right: auto;
|
||||
border: 1px solid #d6d5d5;
|
||||
border-radius: 0.65rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sidebar-toggle-bar {
|
||||
width: 1rem;
|
||||
height: 2px;
|
||||
background: #334155;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row {
|
||||
justify-content: space-between;
|
||||
|
|
@ -56,6 +78,9 @@ main {
|
|||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
transition: width 0.2s ease;
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
|
|
@ -74,6 +99,14 @@ main {
|
|||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.sidebar.sidebar-collapsed {
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,3 @@
|
|||
.navbar-toggler {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
width: 3.5rem;
|
||||
height: 2.5rem;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.navbar-toggler:checked {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
min-height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
|
|
@ -24,6 +7,14 @@
|
|||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.sidebar-brand-compact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-menu-shell {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bi {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -83,6 +74,12 @@
|
|||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
|
@ -114,24 +111,59 @@
|
|||
}
|
||||
|
||||
.nav-scrollable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-toggler:checked ~ .nav-scrollable {
|
||||
display: block;
|
||||
height: calc(100vh - 3.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
@media (max-width: 640.98px) {
|
||||
.nav-menu-shell-collapsed .sidebar-brand-full,
|
||||
.nav-menu-shell:not(.nav-menu-shell-collapsed) .sidebar-brand-compact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
|
||||
/* Allow sidebar to scroll for tall menus */
|
||||
height: calc(100vh - 3.5rem);
|
||||
overflow-y: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.nav-menu-shell-collapsed .top-row {
|
||||
padding-left: 0.5rem !important;
|
||||
padding-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.nav-menu-shell-collapsed .container-fluid {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-menu-shell-collapsed .sidebar-brand-full,
|
||||
.nav-menu-shell:not(.nav-menu-shell-collapsed) .sidebar-brand-compact,
|
||||
.nav-menu-shell-collapsed .nav-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-menu-shell-collapsed .nav-item {
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.nav-menu-shell-collapsed .nav-item.px-3 {
|
||||
padding-left: 0.5rem !important;
|
||||
padding-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.nav-menu-shell-collapsed .nav-item ::deep .nav-link {
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.nav-menu-shell-collapsed .nav-item ::deep .nav-link,
|
||||
.nav-menu-shell-collapsed .nav-item ::deep button.nav-link {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nav-menu-shell-collapsed .bi {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue