ok

src/app/core/components/default-layout/default-layout.component.css

@@ -1,13 +1,39 @@
 :host {
   display: block;
-}
+  /* Stellt sicher, dass der Host-Container die volle Höhe einnimmt */
-.main-layout-container {
+  height: 100vh; 
-  display: flex;
-  background-color: var(--color-body-bg);
-}
-.main-content {
-  flex-grow: 1;
-  overflow-y: auto;
-  padding: 2rem;
 }
 
+.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 */
+}

src/app/core/components/default-layout/default-layout.component.html

@@ -1,5 +1,6 @@
 <div class="main-layout-container">
   <app-sidebar></app-sidebar>
+  <app-page-header></app-page-header>
   <div class="main-content">
     <router-outlet></router-outlet>
   </div>

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'
 })

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;
+  --sidebar-margin: 1rem; /* Angenommen, da es in Ihrem globalen CSS nicht vorhanden war */
-  --transition-speed: 0.35s;
+  --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;
+  /* background-color: var(--color-surface); ANGEPASST */
-  border: 1px solid #e5e7eb;
+  /* border: 1px solid var(--color-border); ANGEPASST */
-  border-radius: 1rem;
+  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: transparent; /* ANGEPASST */
-  background-color: #fff; 
-  /* NEU: Fügt eine sanfte Transition für den Farbwechsel hinzu */
   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;
 }