diff --git a/src/app/core/components/default-layout/default-layout.component.css b/src/app/core/components/default-layout/default-layout.component.css index c6a8c94..8c0827f 100644 --- a/src/app/core/components/default-layout/default-layout.component.css +++ b/src/app/core/components/default-layout/default-layout.component.css @@ -1,11 +1,10 @@ :host { display: block; /* Stellt sicher, dass der Host-Container die volle Höhe einnimmt */ - height: 100vh; + height: 100vh; } .main-layout-container { - padding:2rem; display: grid; height: 100%; /* Wichtig, damit das Grid die Höhe vom Host erbt */ @@ -29,11 +28,17 @@ } /* Diese Regeln bleiben unverändert, da sie korrekt sind */ -app-page-header { grid-area: 1 / 1 / 2 / 6; } -app-sidebar { grid-area: 2 / 1 / 6 / 2; } -.main-content { - padding:2rem; - padding-right: 0; - grid-area: 2 / 2 / 6 / 6; +app-page-header { + margin: 1rem; + grid-area: 1 / 1 / 2 / 6; +} +app-sidebar { + margin: 1rem; + grid-area: 2 / 1 / 6 / 2; +} +.main-content { + background-color: var(--color-body-bg); + margin: 1rem; + grid-area: 2 / 2 / 6 / 6; overflow-y: auto; /* Fügt Scrollen hinzu, falls der Inhalt den Bereich übersteigt */ -} \ No newline at end of file +} diff --git a/src/app/shared/components/layout/page-header/page-header.component.css b/src/app/shared/components/layout/page-header/page-header.component.css index 317aae2..e9b1a76 100644 --- a/src/app/shared/components/layout/page-header/page-header.component.css +++ b/src/app/shared/components/layout/page-header/page-header.component.css @@ -2,6 +2,10 @@ display: block; } +.header-left { + margin-left: 1.5rem; +} + .main-header { display: flex; justify-content: space-between; diff --git a/src/app/shared/components/layout/page-header/page-header.component.html b/src/app/shared/components/layout/page-header/page-header.component.html index bbb50fc..75ba320 100644 --- a/src/app/shared/components/layout/page-header/page-header.component.html +++ b/src/app/shared/components/layout/page-header/page-header.component.html @@ -1,6 +1,6 @@
- + logo
diff --git a/src/app/shared/components/layout/sidebar/sidebar.component.css b/src/app/shared/components/layout/sidebar/sidebar.component.css index 82bb845..459f35e 100644 --- a/src/app/shared/components/layout/sidebar/sidebar.component.css +++ b/src/app/shared/components/layout/sidebar/sidebar.component.css @@ -3,8 +3,8 @@ --sidebar-width-expanded: 280px; --sidebar-width-collapsed: 96px; --sidebar-padding: 1rem; - --sidebar-margin: 1rem; /* Angenommen, da es in Ihrem globalen CSS nicht vorhanden war */ - --transition-speed: 0.35s; /* Lokale Geschwindigkeit für spezifische Sidebar-Animationen */ + --sidebar-margin: 1rem; + --transition-speed: 0.35s; --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); } @@ -13,74 +13,49 @@ position: relative; display: flex; flex-direction: column; - gap: 2rem; + gap: 1.5rem; /* Reduzierter Abstand */ width: var(--sidebar-width-expanded); - height: calc(100vh - (var(--sidebar-margin) * 2)); - /* margin: var(--sidebar-margin); */ + height: calc(100vh - 2rem - 46px); padding: var(--sidebar-padding); - /* background-color: var(--color-surface); ANGEPASST */ - /* border: 1px solid var(--color-border); ANGEPASST */ - border-radius: var(--border-radius-md); /* ANGEPASST */ + /* border-right: 1px solid var(--color-border); */ + /* border-radius: var(--border-radius-md); */ transition: width var(--transition-speed) var(--transition-ease); + /* background-color: var(--color-surface); */ } -/* 2. Der Header-Bereich */ -.sidebar-header { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.5rem; - height: auto; -} +/* ======================================================= */ +/* --- HEADER & SEPARATER BUTTON WURDEN ENTFERNT --- */ +/* ======================================================= */ -.sidebar-logo { - flex-shrink: 0; - width: 32px; - height: 32px; - color: var(--color-primary); /* ANGEPASST für Akzent */ -} - -.sidebar-title { - margin: 0; - font-size: 1.25rem; - font-weight: 600; - color: var(--color-text); /* ANGEPASST */ - white-space: nowrap; - clip-path: inset(0 0% 0 0); - transition: clip-path var(--transition-speed) var(--transition-ease); -} - -/* 3. Navigation und Footer */ +/* 2. Navigation */ .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: var(--border-radius-md); /* ANGEPASST */ + border-radius: var(--border-radius-md); text-decoration: none; font-weight: 500; - color: var(--color-text-light); /* ANGEPASST */ + color: var(--color-text-light); white-space: nowrap; transition: background-color 0.2s, color 0.2s; overflow: hidden; position: relative; + cursor: pointer; } .nav-item:hover { - background-color: var(--color-body-bg-hover); /* ANGEPASST */ - color: var(--color-text); /* ANGEPASST */ + background-color: var(--color-body-bg-hover); + color: var(--color-text); } .nav-item.active { - background: var(--color-primary); /* ANGEPASST */ + background: var(--color-primary); color: #fff; - box-shadow: var(--box-shadow-sm); /* ANGEPASST für Tiefe */ + box-shadow: var(--box-shadow-sm); } .nav-item app-icon { font-size: 1.25rem; @@ -88,7 +63,7 @@ flex-shrink: 0; position: relative; z-index: 2; - background-color: transparent; /* ANGEPASST */ + background-color: transparent; transition: background-color 0.2s; } .nav-item span { @@ -101,46 +76,26 @@ z-index: 1; } -/* 4. Positionierung des Toggle-Buttons */ -.sidebar-toggle-btn { - position: absolute; - border-radius: 50%; - top: calc(var(--sidebar-padding) + 5px); - right: var(--sidebar-padding); - transform: scale(0.55) rotate(180deg); - 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); -} - -/* 5. Stile für den eingeklappten Zustand (.collapsed) */ +/* 3. Stile für den eingeklappten Zustand (.collapsed) */ .sidebar.collapsed { width: var(--sidebar-width-collapsed); } -.sidebar.collapsed .sidebar-title { - clip-path: inset(0 100% 0 0); - pointer-events: none; +/* WICHTIG: Zentriert das Icon, wenn der Text weg ist, und entfernt den Leerraum */ +.sidebar.collapsed .nav-item { + /* justify-content: center; */ } .sidebar.collapsed .nav-item span { clip-path: inset(0 100% 0 0); - margin-left: -20px; + /* margin-left: -20px; Dieser Wert muss raus er*/ pointer-events: none; } -.sidebar.collapsed .sidebar-toggle-btn { - - right: -2px; - transform: scale(0.55) rotate(0deg); /* Hinzugefügt für vertikale Zentrierung */ - /* box-shadow: var(--box-shadow-md); ANGEPASST */ -} - -/* 6. Zustandsabhängige Hintergrundfarben für das Icon */ +/* 4. Zustandsabhängige Hintergrundfarben für das Icon */ .nav-item:hover app-icon { - background-color: transparent; /* ANGEPASST */ + background-color: var(--color-body-bg-hover); } .nav-item.active app-icon { - background: transparent; + background: var(--color-primary); } \ No newline at end of file diff --git a/src/app/shared/components/layout/sidebar/sidebar.component.html b/src/app/shared/components/layout/sidebar/sidebar.component.html index 1c512ad..bdfcd42 100644 --- a/src/app/shared/components/layout/sidebar/sidebar.component.html +++ b/src/app/shared/components/layout/sidebar/sidebar.component.html @@ -1,67 +1,33 @@
+
- - Berichte - + + + Übersicht + +
-
- - - Einstellungen - -
- - + diff --git a/src/styles.css b/src/styles.css index 3fa4244..12da42f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -20,6 +20,7 @@ --color-text: #2c3e50; --color-text-light: #7f8c8d; --color-body-bg: #f4f7fa; + --color-body-bg-active: rgb(238, 238, 240); --color-body-bg-hover: #f2f3f5; --color-surface: #ffffff; --color-border: #e0e6ed;