Refactor layout and add header, navbar, schedule components

Introduced MainLayoutComponent with header and navbar for consistent app layout. Added HeaderComponent, NavbarComponent, ScheduleComponent, and MainComponent. Updated routing to use MainLayout for main and schedule pages. Renamed home-component to home and main-page to main, removing obsolete main-page files.

src/app/app-module.ts

@@ -4,19 +4,26 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing-module';
 import { App } from './app';
 import { PocModelComponent } from './poc-model-component/poc-model-component';
-import { HomeComponent } from './home-component/home-component';
+import { HomeComponent } from './home/home.component';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { MainPage } from './main-page/main-page';
+import { MainLayoutComponent } from './layouts/main-layout/main-layout.component';
-
+import { HeaderComponent } from './header/header.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { ScheduleComponent } from './schedule/schedule.component';
+import { MainComponent } from './main/main.component';
 
 @NgModule({
   declarations: [
     App,
     PocModelComponent,
     HomeComponent,
-    MainPage
+    MainLayoutComponent,
+    HeaderComponent,
+    NavbarComponent,
+    ScheduleComponent,
+    MainComponent
   ],
   imports: [
     AppRoutingModule,

src/app/app-routing-module.ts

@@ -1,13 +1,27 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PocModelComponent } from './poc-model-component/poc-model-component';
-import { HomeComponent } from './home-component/home-component';
+import { HomeComponent } from './home/home.component';
-import { MainPage } from './main-page/main-page';
+import { MainLayoutComponent } from './layouts/main-layout/main-layout.component';
+import { MainComponent } from './main/main.component';
+import { ScheduleComponent } from './schedule/schedule.component';
 
 const routes: Routes = [
-  { path: '', component: MainPage, pathMatch: 'full' },
+  // Seiten ohne Layout
   { path: 'info', component: HomeComponent },
   { path: 'poc-model', component: PocModelComponent },
+
+  // Seiten mit MainLayout
+  {
+    path: '',
+    component: MainLayoutComponent,
+    children: [
+      { path: '', component: MainComponent },
+      { path: 'schedule', component: ScheduleComponent },
+    ],
+  },
+
+  // Fallback-Route
   { path: '**', component: HomeComponent },
 ];
 

src/app/header/header.component.css

@@ -0,0 +1,9 @@
+header {
+  display: flex;
+  width: 100%;
+}
+
+.header {
+  height: 60px;
+  background-color: greenyellow;
+}

src/app/header/header.component.html

@@ -0,0 +1,2 @@
+<header class="header">
+</header>

src/app/header/header.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  standalone: false,
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.css'
+})
+export class HeaderComponent {
+
+}

src/app/home/home.component.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-home-component',
+  selector: 'app-home',
   standalone: false,
-  templateUrl: './home-component.html',
+  templateUrl: './home.component.html',
-  styleUrl: './home-component.css'
+  styleUrl: './home.component.css'
 })
 export class HomeComponent {
 

src/app/layouts/main-layout/main-layout.component.css

@@ -0,0 +1,22 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  margin: 0;
+}
+
+/* Body: Sidebar + Content */
+.body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Content rechts */
+.content {
+  flex: 1;
+  background-color: #004cff;
+  overflow-y: auto;
+  box-sizing: border-box;
+  height: 100%;
+}

src/app/layouts/main-layout/main-layout.component.html

@@ -0,0 +1,9 @@
+<app-header></app-header>
+
+<div class="body">
+  <app-navbar></app-navbar>
+
+  <main class="content">
+    <router-outlet></router-outlet> <!-- Hier werden die Kinder-Routen geladen -->
+  </main>
+</div>

src/app/layouts/main-layout/main-layout.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-main-layout',
+  standalone: false,
+  templateUrl: './main-layout.component.html',
+  styleUrl: './main-layout.component.css'
+})
+export class MainLayoutComponent {
+
+}

src/app/main-page/main-page.html

@@ -1 +0,0 @@
-<p>main-page works!</p>

src/app/main-page/main-page.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-main-page',
-  standalone: false,
-  templateUrl: './main-page.html',
-  styleUrl: './main-page.css'
-})
-export class MainPage {
-
-}

src/app/main/main.component.html

@@ -0,0 +1 @@
+<p>main works!</p>

src/app/main/main.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-main',
+  standalone: false,
+  templateUrl: './main.component.html',
+  styleUrl: './main.component.css'
+})
+export class MainComponent {
+
+}

src/app/navbar/navbar.component.css

@@ -0,0 +1,11 @@
+nav {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+}
+
+.navbar {
+  width: 200px;
+  background-color: #ff0080;
+}

src/app/navbar/navbar.component.html

@@ -0,0 +1,2 @@
+<nav class="navbar">
+</nav>

src/app/navbar/navbar.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navbar',
+  standalone: false,
+  templateUrl: './navbar.component.html',
+  styleUrl: './navbar.component.css'
+})
+export class NavbarComponent {
+
+}

src/app/schedule/schedule.component.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  padding: 1rem;
+  border-radius: 8px;
+}

src/app/schedule/schedule.component.html

@@ -0,0 +1 @@
+<p>schedule works!</p>

src/app/schedule/schedule.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-schedule',
+  standalone: false,
+  templateUrl: './schedule.component.html',
+  styleUrl: './schedule.component.css'
+})
+export class ScheduleComponent {
+
+}