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

Layouting fixes

Browse Source
This commit is contained in:
MarcWieland
2026-06-26 22:24:45 +02:00
parent 0c3eb3a323
commit 42a97a36b4
4 changed files with 337 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
timetracker.Client/Components/Layout/MainLayout.razor
+1 -1
View File
@@ -29,7 +29,7 @@
<AuthorizeView>
<Authorized>
<MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Never" Elevation="0" Variant="DrawerVariant.Mini" OpenMiniOnHover="false" Class="modern-drawer">
<NavMenu OnToggleDrawer="ToggleDrawer" />
<NavMenu OnToggleDrawer="ToggleDrawer" IsCollapsed="!_drawerOpen" />
</MudDrawer>
</Authorized>
</AuthorizeView>
timetracker.Client/Components/Layout/NavMenu.razor
+3 -2
View File
@@ -1,10 +1,10 @@
@inject IJSRuntime JSRuntime
@inject HttpClient Http
<div class="nav-container onboarding-nav-menu">
<div class="nav-container onboarding-nav-menu @(IsCollapsed ? "collapsed" : "")">
@* --- 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" />
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" OnClick="OnToggleDrawer" Class="drawer-toggle-btn mr-1 d-none d-md-flex" />
<MudIcon Icon="@Icons.Material.Filled.AccessTime" Class="logo-icon" />
<span class="brand-text">Timetracker</span>
</div>
@@ -100,6 +100,7 @@
public string? PersistentCompanyName { get; set; }
[Parameter] public EventCallback OnToggleDrawer { get; set; }
[Parameter] public bool IsCollapsed { get; set; }
private bool _showVersionBadge;
private string _companyName = "Hauptdomain";
timetracker.Client/Components/Layout/NavMenu.razor.css
+89 -43
View File
@@ -118,41 +118,61 @@
color: var(--mud-palette-appbar-text) !important;
}
/* NavLink active state (Fixes active color contrast issue) */
/* NavLink active state (Circle around icon) */
::deep .custom-nav-link.active,
::deep .custom-nav-link .active {
background: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-secondary) 15%, transparent) 0%, color-mix(in srgb, var(--mud-palette-secondary) 4%, transparent) 100%) !important;
background: transparent !important;
font-weight: 600 !important;
box-shadow: inset 3px 0 0 var(--mud-palette-secondary) !important;
box-shadow: none !important;
}
::deep .custom-nav-link.active,
::deep .custom-nav-link .active,
::deep .custom-nav-link.active .mud-nav-link-text,
::deep .custom-nav-link .active .mud-nav-link-text,
::deep .custom-nav-link.active .mud-nav-link-icon-default,
::deep .custom-nav-link .active .mud-nav-link-icon-default {
::deep .custom-nav-link .active .mud-nav-link-text {
color: var(--mud-palette-secondary) !important;
}
/* Admin link color overrides & active state */
::deep .custom-nav-link.active .mud-nav-link-icon-default,
::deep .custom-nav-link .active .mud-nav-link-icon-default {
color: var(--mud-palette-secondary) !important;
background-color: color-mix(in srgb, var(--mud-palette-secondary) 15%, transparent) !important;
border-radius: 50% !important;
padding: 6px !important;
margin: -6px 8px -6px -6px !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Admin link active state (Circle around icon) */
::deep .admin-link .mud-nav-link-icon-default {
color: rgba(239, 68, 68, 0.7) !important; /* Red 500 */
}
::deep .admin-link.active,
::deep .admin-link .active {
background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.04) 100%) !important;
box-shadow: inset 3px 0 0 #EF4444 !important;
background: transparent !important;
box-shadow: none !important;
}
::deep .admin-link.active,
::deep .admin-link .active,
::deep .admin-link.active .mud-nav-link-text,
::deep .admin-link .active .mud-nav-link-text,
::deep .admin-link .active .mud-nav-link-text {
color: #EF4444 !important;
}
::deep .admin-link.active .mud-nav-link-icon-default,
::deep .admin-link .active .mud-nav-link-icon-default {
color: #EF4444 !important;
background-color: rgba(239, 68, 68, 0.15) !important;
border-radius: 50% !important;
padding: 6px !important;
margin: -6px 8px -6px -6px !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Version link active state */
@@ -295,63 +315,89 @@
/* --- COLLAPSED DRAWER (MINI STATE) STYLES --- */
/* Parent matches the mini drawer element (Note the correct Blazor CSS isolation placement) */
.mud-drawer--closed ::deep .logo-icon,
.mud-drawer--closed ::deep .brand-text {
display: none !important;
/* Smooth transitions for all elements that change */
::deep .logo-icon, .brand-text, .admin-divider-container, .admin-divider-text, .admin-divider-line, .user-profile-card, .user-info, .version-text, ::deep .custom-nav-link .mud-nav-link-text {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapsed ::deep .logo-icon,
.collapsed .brand-text {
opacity: 0;
width: 0;
max-width: 0;
overflow: hidden;
margin: 0;
padding: 0;
transform: scale(0);
}
.mud-drawer--closed ::deep .logo-wrapper {
justify-content: center !important;
.collapsed .logo-wrapper {
justify-content: center;
gap: 0;
}
.mud-drawer--closed ::deep .drawer-toggle-btn {
.collapsed ::deep .drawer-toggle-btn {
margin-left: 0 !important;
}
.mud-drawer--closed ::deep .admin-divider-container {
padding: 16px 0 8px 0 !important;
justify-content: center !important;
.collapsed .admin-divider-container {
padding: 16px 0 8px 0;
justify-content: center;
}
.mud-drawer--closed ::deep .admin-divider-text {
display: none !important;
.collapsed .admin-divider-text {
opacity: 0;
width: 0;
overflow: hidden;
margin: 0;
}
.mud-drawer--closed ::deep .admin-divider-line {
width: 24px !important;
flex: none !important;
.collapsed .admin-divider-line {
width: 24px;
flex: none;
}
.mud-drawer--closed ::deep .user-profile-card {
justify-content: center !important;
padding: 8px 0 !important;
.collapsed .user-profile-card {
justify-content: center;
padding: 8px 0;
gap: 0;
}
.mud-drawer--closed ::deep .user-info {
display: none !important;
.collapsed .user-info {
opacity: 0;
width: 0;
overflow: hidden;
margin: 0;
}
.mud-drawer--closed ::deep .version-text {
display: none !important;
.collapsed .version-text {
opacity: 0;
width: 0;
overflow: hidden;
margin: 0;
}
/* Ensure link text is hidden in mini mode to prevent clunky clipping */
.mud-drawer--closed ::deep .custom-nav-link .mud-nav-link-text {
display: none !important;
/* Hide link text but keep smooth transition by manipulating width/opacity if possible, but MudBlazor's DOM might require display none after transition. We'll use opacity/width/overflow. */
.collapsed ::deep .custom-nav-link .mud-nav-link-text {
opacity: 0;
width: 0;
overflow: hidden;
margin: 0 !important;
white-space: nowrap;
}
/* Center link icons when mini and adjust spacing */
.mud-drawer--closed ::deep .custom-nav-link {
margin: 4px 6px !important;
.collapsed ::deep .custom-nav-link {
margin: 4px auto !important;
padding: 8px 0 !important;
justify-content: center !important;
min-height: 40px !important;
width: 44px !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
border-radius: 12px !important;
}
.mud-drawer--closed ::deep .custom-nav-link .mud-nav-link-icon-default {
.collapsed ::deep .custom-nav-link .mud-nav-link-icon-default {
margin-right: 0 !important;
}