jappel/leistungsbilanz-ts
1
0
Fork 1
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Match sidebar bottom layout to the Wochenplanung reference (theme toggle + Abmelden in one row)

Browse source 
Square icon-only theme toggle sits next to the Abmelden button in a shared
row, collapsing to just the toggle when the sidebar is collapsed - same
arrangement as pm-app's Sidebar.tsx.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Grovy311 2026-09-28 20:32:20 +02:00
parent c56cfb30ad
commit 8d2948cdb1
3 changed files with 38 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/app/globals.css
View file

@ -323,23 +323,24 @@ a {
}
.sidebar-footer {
padding: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Square and icon-only so it fits next to Abmelden in .sidebar-bottom-row. */
.sidebar-theme-toggle {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
justify-content: center;
flex: 0 0 auto;
width: 36px;
height: 36px;
padding: 0;
border-radius: 8px;
color: #c7d6e0;
font-size: 0.92rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
width: 100%;
text-align: left;
cursor: pointer;
}
@ -2747,12 +2748,20 @@ button.structure-entry-main:focus-visible {
white-space: nowrap;
}
/* Toggle (square) and Abmelden (fills the rest) share one row. */
.sidebar-bottom-row {
display: flex;
align-items: stretch;
gap: 8px;
padding: 0 14px 12px;
}
.sidebar-logout {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
flex: 1 1 auto;
min-width: 0;
padding: 8px 14px;
border-radius: 8px;
color: #c7d6e0;
@ -2760,7 +2769,6 @@ button.structure-entry-main:focus-visible {
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.16);
background: transparent;
width: 100%;
cursor: pointer;
}
@ -2773,6 +2781,11 @@ button.structure-entry-main:focus-visible {
display: none;
}
.sidebar-collapsed .sidebar-bottom-row {
justify-content: center;
padding-inline: 0;
}
.login-gate-screen {
min-height: 100vh;
display: flex;