From 9d08672c4e7eb3850b454c9ef6bb9454078d72f9 Mon Sep 17 00:00:00 2001 From: "Tizian.Breuch" Date: Wed, 17 Sep 2025 13:33:34 +0200 Subject: [PATCH] good --- .../layout/sidebar/sidebar.component.css | 125 +++++++++++------- .../layout/sidebar/sidebar.component.html | 23 ++-- 2 files changed, 89 insertions(+), 59 deletions(-) diff --git a/src/app/shared/components/layout/sidebar/sidebar.component.css b/src/app/shared/components/layout/sidebar/sidebar.component.css index 79e00b0..5504650 100644 --- a/src/app/shared/components/layout/sidebar/sidebar.component.css +++ b/src/app/shared/components/layout/sidebar/sidebar.component.css @@ -4,12 +4,13 @@ --sidebar-width-collapsed: 96px; --sidebar-padding: 1rem; --sidebar-margin: 1rem; - --transition-speed: 0.35s; /* Leicht langsamere Animation für ein weicheres Gefühl */ - --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Eine professionelle Easing-Funktion */ + --transition-speed: 0.35s; + --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* 1. Der Sidebar-Container */ .sidebar { + /* WICHTIG: Dies ist jetzt der Positionierungs-Kontext für den Button */ position: relative; display: flex; flex-direction: column; @@ -24,14 +25,13 @@ transition: width var(--transition-speed) var(--transition-ease); } -/* 2. Der Header-Bereich (vereinfacht und stabilisiert) */ +/* 2. Der Header-Bereich */ .sidebar-header { display: flex; align-items: center; - /* KEIN justify-content hier. Die Anordnung wird anders gesteuert. */ gap: 0.75rem; padding: 0.5rem; - height: 32px; /* Feste Höhe für Stabilität */ + height: 32px; } .sidebar-logo { @@ -41,43 +41,79 @@ color: #111827; } -/* ======================================================= */ -/* --- HIER IST DIE WICHTIGSTE ÄNDERUNG --- */ -/* ======================================================= */ .sidebar-title { margin: 0; font-size: 1.25rem; font-weight: 600; white-space: nowrap; - opacity: 1; - overflow: hidden; /* Verhindert, dass Text während der Animation herausragt */ - - /* Präzise, gestaffelte Transition für einen organischen Effekt */ - transition: width var(--transition-speed) var(--transition-ease), - opacity calc(var(--transition-speed) / 2) var(--transition-ease), - margin-left var(--transition-speed) var(--transition-ease); + clip-path: inset(0 0% 0 0); + transition: clip-path var(--transition-speed) var(--transition-ease); } -.sidebar-header app-button { - margin-left: auto; /* Dies ist jetzt der EINZIGE Mechanismus, der den Button nach rechts schiebt */ +/* 3. Navigation und Footer */ +.sidebar-nav { + flex-grow: 1; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.sidebar-footer { + margin-top: auto; +} +.nav-item { + display: flex; + align-items: center; + padding: 0.75rem 1rem; + border-radius: 0.5rem; + text-decoration: none; + font-weight: 500; + color: #4b5563; + white-space: nowrap; + transition: background-color 0.2s, color 0.2s; + overflow: hidden; +} +.nav-item:hover { + background-color: #f3f4f6; +} +.nav-item.active { + background-color: #3b82f6; + color: #fff; +} +.nav-item app-icon { + font-size: 1.25rem; + width: 32px; flex-shrink: 0; - transition: transform var(--transition-speed) var(--transition-ease); - transform: rotate(0deg); } - -/* 3. Navigation und Footer (unverändert) */ -.sidebar-nav { flex-grow: 1; display: flex; flex-direction: column; gap: 0.5rem; } -.sidebar-footer { margin-top: auto; } -.nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; color: #4b5563; white-space: nowrap; transition: background-color 0.2s, color 0.2s; } -.nav-item:hover { background-color: #f3f4f6; } -.nav-item.active { background-color: #3b82f6; color: #fff; } -.nav-item app-icon { font-size: 1.25rem; } - .nav-item span { white-space: nowrap; - overflow: hidden; - opacity: 1; - transition: width 0.3s var(--transition-ease) 0.05s, opacity 0.2s var(--transition-ease); + clip-path: inset(0 0 0 0); + margin-left: 0.75rem; + transition: clip-path 0.3s var(--transition-ease), + margin-left 0.3s var(--transition-ease); +} + +/* ======================================================= */ +/* --- NEU: Positionierung des Toggle-Buttons --- */ +/* ======================================================= */ + +.sidebar-toggle-btn { + position: absolute; + /* width: 36px; + height: 36px; */ + border-radius: 50%; + /* border: 1px solid #e5e7eb; */ + /* background-color: #fff; */ + + /* Startposition (aufgeklappt): Im Header, rechts */ + top: calc(var(--sidebar-padding)); /* Sidebar-Padding + Header-Padding */ + right: var(--sidebar-padding); + transform: rotate(180deg); + + /* Sanfter Übergang für alle Änderungen */ + transition: top var(--transition-speed) var(--transition-ease), + right var(--transition-speed) var(--transition-ease), + transform var(--transition-speed) var(--transition-ease), + box-shadow var(--transition-speed) var(--transition-ease); } /* ======================================================= */ @@ -88,25 +124,20 @@ width: var(--sidebar-width-collapsed); } -/* WICHTIG: Keine Änderung am .sidebar-header selbst mehr nötig! */ - .sidebar.collapsed .sidebar-title { - width: 0; /* Animiert die Breite auf 0 */ - opacity: 0; - margin-left: -0.75rem; /* Kompensiert den 'gap', damit das Logo perfekt zentriert wird */ + clip-path: inset(0 100% 0 0); pointer-events: none; } -.sidebar.collapsed .sidebar-header app-button { - transform: rotate(180deg); -} - -.sidebar.collapsed .nav-item { - justify-content: center; -} - .sidebar.collapsed .nav-item span { - width: 0; - opacity: 0; + clip-path: inset(0 100% 0 0); + margin-left: -20px; pointer-events: none; -} \ No newline at end of file +} + +/* Endposition (zugeklappt): Außen, vertikal zentriert */ +.sidebar.collapsed .sidebar-toggle-btn { + /* top: 50%; */ + right: -18px; + transform: rotate(0deg); +} diff --git a/src/app/shared/components/layout/sidebar/sidebar.component.html b/src/app/shared/components/layout/sidebar/sidebar.component.html index 9f1b242..1c512ad 100644 --- a/src/app/shared/components/layout/sidebar/sidebar.component.html +++ b/src/app/shared/components/layout/sidebar/sidebar.component.html @@ -1,7 +1,6 @@