feat: add categorized settings tabs (#30)

Six tabs (General, Meals, Budget, Shopping, Calendar, Account) replace
the flat single-page layout. Active tab persists via sessionStorage.
Calendar tab auto-activates on OAuth redirect. Tab bar is sticky.
All labels translated in de/en/es/it/sv.
This commit is contained in:
Ulas
2026-04-06 14:33:49 +02:00
parent 81ee1eaf18
commit 61e663ef72
8 changed files with 401 additions and 327 deletions
+48
View File
@@ -42,6 +42,54 @@
border: 1px solid var(--color-danger);
}
/* --------------------------------------------------------
Tab-Navigation
-------------------------------------------------------- */
.settings-tabs {
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-6);
position: sticky;
top: 0;
background: var(--color-background);
z-index: 10;
padding-top: var(--space-1);
}
.settings-tabs::-webkit-scrollbar {
display: none;
}
.settings-tab-btn {
flex-shrink: 0;
padding: var(--space-3) var(--space-4);
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
min-height: 44px;
white-space: nowrap;
margin-bottom: -1px;
}
.settings-tab-btn:hover {
color: var(--color-text-primary);
}
.settings-tab-btn--active {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
/* --------------------------------------------------------
Sections
-------------------------------------------------------- */