openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Sidebar Neumorphismus-Redesign + responsives Kollabieren

Browse Source 
- 1024–1279px: Icon-only Sidebar (64px), Logo als Akzent-Icon
- ≥ 1280px: Sidebar mit Labels (200px), Logo Gradient-Text
- Neumorphischer Hintergrund (--sidebar-bg), eigene Light/Dark-Schatten-Tokens
- Hover: raised box-shadow (konvex gehoben)
- Aktiv: inset box-shadow (konkav gedrückt) + Akzentstreifen links
- Sidebar-Schatten statt Border-right für Tiefentrennung
- Smooth transition bei Breakpoint-Wechsel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-25 14:20:29 +01:00
parent 60ecc1f3d9
commit a189e4be8d
2 changed files with 175 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/layout.css
+164 -36
View File
@@ -99,7 +99,7 @@
}
/* --------------------------------------------------------
* Sidebar Navigation (Desktop, > 1024px)
* Sidebar Navigation — Desktop (Neumorphismus)
* -------------------------------------------------------- */
@media (min-width: 1024px) {
.app-shell {
@@ -110,37 +110,179 @@
flex: 1;
padding-bottom: 0;
margin-left: var(--sidebar-width);
transition: margin-left var(--transition-slow);
}
.nav-bottom {
display: none;
}
/* ── Sidebar Container ── */
.nav-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-width);
background-color: var(--color-surface);
border-right: 1px solid var(--color-border);
background: var(--sidebar-bg);
border-right: none;
box-shadow:
6px 0 28px var(--sidebar-shadow-dark),
2px 0 8px var(--sidebar-shadow-dark),
inset -1px 0 0 var(--sidebar-shadow-light);
display: flex;
flex-direction: column;
z-index: var(--z-nav);
padding: var(--space-5) 0 var(--space-6);
padding: var(--space-4) 0 var(--space-6);
transition: width var(--transition-slow);
overflow: hidden;
}
/* ── Logo: Icon-only bei collapsed ── */
.nav-sidebar__logo {
display: flex;
justify-content: center;
align-items: center;
padding: var(--space-3) 0 var(--space-5);
margin-bottom: var(--space-2);
flex-shrink: 0;
}
/* Neumorphic App-Icon als Logo-Ersatz */
.nav-sidebar__logo::before {
content: 'O';
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--color-accent) 0%, #5856D6 100%);
color: #ffffff;
font-size: var(--text-sm);
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow:
3px 3px 8px var(--sidebar-shadow-dark),
-2px -2px 6px var(--sidebar-shadow-light);
}
/* Volltext-Span verstecken im collapsed-Modus */
.nav-sidebar__logo > span {
display: none;
}
/* ── Nav-Items Container ── */
.nav-sidebar__items {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 var(--space-2);
flex: 1;
overflow-y: auto;
scrollbar-width: none;
}
.nav-sidebar__items::-webkit-scrollbar { display: none; }
/* ── Nav-Item: Basis ── */
.nav-sidebar .nav-item {
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-2);
gap: 0;
min-height: 44px;
font-size: var(--text-sm);
color: var(--color-text-secondary);
background: transparent;
box-shadow: none;
transition:
box-shadow var(--transition-base),
color var(--transition-fast),
background var(--transition-fast);
position: relative;
}
.nav-sidebar .nav-item__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.nav-sidebar .nav-item__label {
display: none;
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
white-space: nowrap;
overflow: hidden;
}
/* Hover: neumorphic raised */
.nav-sidebar .nav-item:hover:not([aria-current="page"]) {
color: var(--color-accent);
background: var(--sidebar-bg);
box-shadow:
4px 4px 10px var(--sidebar-shadow-dark),
-4px -4px 10px var(--sidebar-shadow-light);
}
/* Aktiv: neumorphic inset (gedrückt) */
.nav-sidebar .nav-item[aria-current="page"] {
color: var(--color-accent);
font-weight: var(--font-weight-semibold);
background: var(--sidebar-bg);
box-shadow:
inset 3px 3px 7px var(--sidebar-shadow-dark),
inset -3px -3px 7px var(--sidebar-shadow-light);
}
/* Aktiv-Indikator: kleiner Akzentstreifen links */
.nav-sidebar .nav-item[aria-current="page"]::before {
content: '';
position: absolute;
left: 0;
top: 20%;
bottom: 20%;
width: 3px;
border-radius: 0 var(--radius-full) var(--radius-full) 0;
background: linear-gradient(180deg, var(--color-accent) 0%, #5856D6 100%);
box-shadow: 0 0 6px rgba(0, 122, 255, 0.45);
}
/* ── Divider vor Einstellungen ── */
.nav-sidebar__items > a:last-child {
margin-top: auto;
}
}
/* --------------------------------------------------------
* Sidebar Expanded (≥ 1280px) — Labels sichtbar
* -------------------------------------------------------- */
@media (min-width: 1280px) {
:root {
--sidebar-width: var(--sidebar-width-expanded);
}
/* Logo: Text-Variante */
.nav-sidebar__logo {
justify-content: flex-start;
padding: var(--space-3) var(--space-4) var(--space-5);
gap: var(--space-3);
}
.nav-sidebar__logo::before {
width: 30px;
height: 30px;
font-size: var(--text-xs);
flex-shrink: 0;
}
.nav-sidebar__logo > span {
display: inline-block;
font-size: var(--text-lg);
font-weight: var(--font-weight-bold);
letter-spacing: -0.3px;
color: var(--color-text-primary);
padding: var(--space-2) var(--space-5) var(--space-5);
margin-bottom: var(--space-2);
}
.nav-sidebar__logo span {
display: inline-block;
letter-spacing: -0.4px;
background: linear-gradient(135deg, var(--color-accent) 0%, #5856D6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -148,46 +290,32 @@
}
.nav-sidebar__items {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 var(--space-3);
flex: 1;
gap: 2px;
}
/* Nav-Items: horizontal mit Label */
.nav-sidebar .nav-item {
flex-direction: row;
justify-content: flex-start;
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
gap: var(--space-3);
min-height: 40px;
font-size: var(--text-sm);
color: var(--color-text-secondary);
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-sidebar .nav-item__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.nav-sidebar .nav-item[aria-current="page"] {
background-color: var(--color-accent-light);
color: var(--color-accent);
font-weight: var(--font-weight-semibold);
}
.nav-sidebar .nav-item:hover:not([aria-current="page"]) {
background-color: var(--color-surface-2);
color: var(--color-text-primary);
width: 17px;
height: 17px;
}
.nav-sidebar .nav-item__label {
font-size: var(--text-sm);
display: block;
font-weight: inherit;
}
/* Aktiv-Indikator bleibt links */
.nav-sidebar .nav-item[aria-current="page"]::before {
left: 0;
}
}
/* --------------------------------------------------------
public/styles/tokens.css
+11 -1
View File
@@ -104,8 +104,14 @@
* Layout
* -------------------------------------------------------- */
--nav-height-mobile: 64px;
--sidebar-width: 256px;
--sidebar-width: 64px; /* collapsed icon-only (1024–1279px) */
--sidebar-width-expanded: 200px; /* full sidebar (1280px+) */
--content-max-width: 1200px;
/* Sidebar Neumorphismus */
--sidebar-bg: #E8E8EE;
--sidebar-shadow-light: rgba(255, 255, 255, 0.82);
--sidebar-shadow-dark: rgba(148, 148, 170, 0.28);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
/* --------------------------------------------------------
@@ -138,6 +144,10 @@
--color-text-secondary: #AEAEB2; /* WCAG AA: ~4.6:1 auf #2C2C2E */
--color-text-disabled: #48484A;
--sidebar-bg: #19191D;
--sidebar-shadow-light: rgba(255, 255, 255, 0.05);
--sidebar-shadow-dark: rgba(0, 0, 0, 0.55);
--color-accent-light: #1A3A5C;
--color-success-light: #1A3A26;
--color-warning-light: #3A2800;