From 0d5ac83c7755bec26f26fc3eee74e648dc241531 Mon Sep 17 00:00:00 2001 From: "Tizian.Breuch" Date: Wed, 17 Sep 2025 14:51:47 +0200 Subject: [PATCH] ok --- .../default-layout.component.css | 44 +++++++++++++---- .../default-layout.component.html | 1 + .../default-layout.component.ts | 3 +- .../page-header/page-header.component.css | 2 +- .../layout/sidebar/sidebar.component.css | 47 ++++++++++--------- 5 files changed, 64 insertions(+), 33 deletions(-) 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 2103e1f..c6a8c94 100644 --- a/src/app/core/components/default-layout/default-layout.component.css +++ b/src/app/core/components/default-layout/default-layout.component.css @@ -1,13 +1,39 @@ :host { display: block; -} -.main-layout-container { - display: flex; - background-color: var(--color-body-bg); -} -.main-content { - flex-grow: 1; - overflow-y: auto; - padding: 2rem; + /* Stellt sicher, dass der Host-Container die volle Höhe einnimmt */ + height: 100vh; } +.main-layout-container { + padding:2rem; + display: grid; + height: 100%; /* Wichtig, damit das Grid die Höhe vom Host erbt */ + + /* + * TEMPLATE-SPALTEN (COLUMNS) + * 1. Spalte (Sidebar): `auto` -> Die Breite passt sich dem Inhalt der Sidebar an ("fit content"). + * Die restlichen 4 Spalten teilen sich den verbleibenden Platz. + */ + grid-template-columns: auto repeat(4, 1fr); + + /* + * TEMPLATE-REIHEN (ROWS) + * 1. Reihe (Header): `auto` -> Die Höhe passt sich dem Inhalt des Headers an ("fit content"). + * Die restlichen 4 Reihen teilen sich den verbleibenden Platz. + */ + grid-template-rows: auto repeat(4, 1fr); + + /* Abstände können bei Bedarf hinzugefügt werden */ + grid-column-gap: 0px; + grid-row-gap: 0px; +} + +/* 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; + overflow-y: auto; /* Fügt Scrollen hinzu, falls der Inhalt den Bereich übersteigt */ +} \ No newline at end of file diff --git a/src/app/core/components/default-layout/default-layout.component.html b/src/app/core/components/default-layout/default-layout.component.html index 53014a8..ec84957 100644 --- a/src/app/core/components/default-layout/default-layout.component.html +++ b/src/app/core/components/default-layout/default-layout.component.html @@ -1,5 +1,6 @@
+
diff --git a/src/app/core/components/default-layout/default-layout.component.ts b/src/app/core/components/default-layout/default-layout.component.ts index d9d21fc..5cdbb5b 100644 --- a/src/app/core/components/default-layout/default-layout.component.ts +++ b/src/app/core/components/default-layout/default-layout.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; import { SidebarComponent } from '../../../shared/components/layout/sidebar/sidebar.component'; import { RouterOutlet } from '@angular/router'; +import { PageHeaderComponent } from '../../../shared/components/layout/page-header/page-header.component'; @Component({ selector: 'app-default-layout', - imports: [SidebarComponent,RouterOutlet], + imports: [SidebarComponent,PageHeaderComponent,RouterOutlet], templateUrl: './default-layout.component.html', styleUrl: './default-layout.component.css' }) 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 f927b3a..317aae2 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 @@ -25,4 +25,4 @@ gap: 1.5rem; /* Etwas mehr Abstand für mobile Ansicht */ align-items: stretch; } -} \ No newline at end of file +} diff --git a/src/app/shared/components/layout/sidebar/sidebar.component.css b/src/app/shared/components/layout/sidebar/sidebar.component.css index c5cf281..82bb845 100644 --- a/src/app/shared/components/layout/sidebar/sidebar.component.css +++ b/src/app/shared/components/layout/sidebar/sidebar.component.css @@ -1,10 +1,10 @@ -/* Globale Variablen für einfachere Wartung */ +/* Globale Variablen für dieses Bauteil */ :host { --sidebar-width-expanded: 280px; --sidebar-width-collapsed: 96px; --sidebar-padding: 1rem; - --sidebar-margin: 1rem; - --transition-speed: 0.35s; + --sidebar-margin: 1rem; /* Angenommen, da es in Ihrem globalen CSS nicht vorhanden war */ + --transition-speed: 0.35s; /* Lokale Geschwindigkeit für spezifische Sidebar-Animationen */ --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); } @@ -16,11 +16,11 @@ gap: 2rem; width: var(--sidebar-width-expanded); height: calc(100vh - (var(--sidebar-margin) * 2)); - margin: var(--sidebar-margin); + /* margin: var(--sidebar-margin); */ padding: var(--sidebar-padding); - background-color: #fff; - border: 1px solid #e5e7eb; - border-radius: 1rem; + /* background-color: var(--color-surface); ANGEPASST */ + /* border: 1px solid var(--color-border); ANGEPASST */ + border-radius: var(--border-radius-md); /* ANGEPASST */ transition: width var(--transition-speed) var(--transition-ease); } @@ -37,13 +37,14 @@ flex-shrink: 0; width: 32px; height: 32px; - color: #111827; + 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); @@ -63,21 +64,23 @@ display: flex; align-items: center; padding: 0.75rem 1rem; - border-radius: 0.5rem; + border-radius: var(--border-radius-md); /* ANGEPASST */ text-decoration: none; font-weight: 500; - color: #4b5563; + color: var(--color-text-light); /* ANGEPASST */ white-space: nowrap; transition: background-color 0.2s, color 0.2s; overflow: hidden; position: relative; } .nav-item:hover { - background-color: #f3f4f6; + background-color: var(--color-body-bg-hover); /* ANGEPASST */ + color: var(--color-text); /* ANGEPASST */ } .nav-item.active { - background-color: #3b82f6; + background: var(--color-primary); /* ANGEPASST */ color: #fff; + box-shadow: var(--box-shadow-sm); /* ANGEPASST für Tiefe */ } .nav-item app-icon { font-size: 1.25rem; @@ -85,9 +88,7 @@ flex-shrink: 0; position: relative; z-index: 2; - /* NEU: Fester Start-Hintergrund (Farbe der Sidebar) statt 'inherit' */ - background-color: #fff; - /* NEU: Fügt eine sanfte Transition für den Farbwechsel hinzu */ + background-color: transparent; /* ANGEPASST */ transition: background-color 0.2s; } .nav-item span { @@ -104,9 +105,9 @@ .sidebar-toggle-btn { position: absolute; border-radius: 50%; - top: calc(var(--sidebar-padding) + 4px); + top: calc(var(--sidebar-padding) + 5px); right: var(--sidebar-padding); - transform: rotate(180deg); + 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), @@ -127,17 +128,19 @@ clip-path: inset(0 100% 0 0); margin-left: -20px; pointer-events: none; - } .sidebar.collapsed .sidebar-toggle-btn { - right: -18px; - transform: rotate(0deg); + + 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 */ .nav-item:hover app-icon { - background-color: #f3f4f6; /* Derselbe Hintergrund wie .nav-item:hover */ + background-color: transparent; /* ANGEPASST */ } .nav-item.active app-icon { - background-color: #3b82f6; /* Derselbe Hintergrund wie .nav-item.active */ + background: transparent; } \ No newline at end of file