From 0db90396ea1ea40100395b56c05560f31b2fe337 Mon Sep 17 00:00:00 2001 From: "Tizian.Breuch" Date: Wed, 17 Sep 2025 13:09:04 +0200 Subject: [PATCH] init --- .../layout/sidebar/sidebar.component.css | 108 ++++++------------ 1 file changed, 34 insertions(+), 74 deletions(-) diff --git a/src/app/shared/components/layout/sidebar/sidebar.component.css b/src/app/shared/components/layout/sidebar/sidebar.component.css index f8205a3..79e00b0 100644 --- a/src/app/shared/components/layout/sidebar/sidebar.component.css +++ b/src/app/shared/components/layout/sidebar/sidebar.component.css @@ -4,8 +4,8 @@ --sidebar-width-collapsed: 96px; --sidebar-padding: 1rem; --sidebar-margin: 1rem; - --transition-speed: 0.3s; - --transition-ease: ease-in-out; + --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 */ } /* 1. Der Sidebar-Container */ @@ -19,17 +19,19 @@ margin: var(--sidebar-margin); padding: var(--sidebar-padding); background-color: #fff; - border: 1px solid #e5e7eb; /* Helle Umrandung */ + border: 1px solid #e5e7eb; border-radius: 1rem; transition: width var(--transition-speed) var(--transition-ease); } -/* 2. Der Header-Bereich */ +/* 2. Der Header-Bereich (vereinfacht und stabilisiert) */ .sidebar-header { display: flex; align-items: center; - gap: 0.75rem; /* Abstand zwischen Logo und Titel */ + /* KEIN justify-content hier. Die Anordnung wird anders gesteuert. */ + gap: 0.75rem; padding: 0.5rem; + height: 32px; /* Feste Höhe für Stabilität */ } .sidebar-logo { @@ -39,70 +41,43 @@ 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; - transition: opacity 0.2s ease-in-out, - width 0.3s ease-in-out 0.05s, - transform 0.3s ease-in-out; + 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); } -/* ======================================================= */ -/* --- HIER PASSIERT DIE MAGIE FÜR DEN BUTTON --- */ -/* ======================================================= */ .sidebar-header app-button { - /* Weist den Button an, den gesamten verfügbaren Platz als linken Abstand zu nutzen */ - margin-left: auto; - - /* Verhindert, dass der Button schrumpft */ - flex-shrink: 0; - - /* Fügt eine sanfte Drehanimation hinzu */ + margin-left: auto; /* Dies ist jetzt der EINZIGE Mechanismus, der den Button nach rechts schiebt */ + flex-shrink: 0; transition: transform var(--transition-speed) var(--transition-ease); - transform: rotate(0deg); /* Startposition der Animation */ + transform: rotate(0deg); } -/* 3. Die Navigation (angepasst an das neue Design) */ -.sidebar-nav { - display: flex; - flex-direction: column; - gap: 0.5rem; - flex-grow: 1; /* Nimmt den restlichen vertikalen Platz ein */ -} +/* 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 { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem 1rem; - border-radius: 0.5rem; - text-decoration: none; - font-weight: 500; - color: #4b5563; +.nav-item span { 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; -} - -.sidebar-footer { - margin-top: auto; /* Schiebt den Footer nach unten */ + overflow: hidden; + opacity: 1; + transition: width 0.3s var(--transition-ease) 0.05s, opacity 0.2s var(--transition-ease); } /* ======================================================= */ @@ -113,40 +88,25 @@ width: var(--sidebar-width-collapsed); } -.sidebar.collapsed .sidebar-header { - justify-content: center; /* Zentriert das Logo, wenn der Titel weg ist */ -} +/* WICHTIG: Keine Änderung am .sidebar-header selbst mehr nötig! */ .sidebar.collapsed .sidebar-title { + width: 0; /* Animiert die Breite auf 0 */ opacity: 0; - width: 0; /* Wichtig: expliziter Endwert für die Breiten-Animation */ - transform: translateX(-10px); /* Leichte Bewegung nach links */ + margin-left: -0.75rem; /* Kompensiert den 'gap', damit das Logo perfekt zentriert wird */ pointer-events: none; } -/* Dreht den Button um 180 Grad, wenn die Sidebar eingeklappt ist */ .sidebar.collapsed .sidebar-header app-button { transform: rotate(180deg); - margin-left: 0; /* Setzt den Margin zurück, da 'justify-content' jetzt die Positionierung übernimmt */ } .sidebar.collapsed .nav-item { justify-content: center; } -.nav-item span { - white-space: nowrap; - opacity: 1; - - /* === NEU: Präzise Transition auch hier === */ - overflow: hidden; - transition: opacity 0.2s ease-in-out, - width 0.3s ease-in-out 0.05s; -} - - .sidebar.collapsed .nav-item span { + width: 0; opacity: 0; - width: 0; /* Wichtig: expliziter Endwert für die Breiten-Animation */ pointer-events: none; } \ No newline at end of file