From 939ef4190e9f7f372340bb6627fc481b995b12a8 Mon Sep 17 00:00:00 2001 From: Piet Ostendorp Date: Sun, 26 Oct 2025 02:16:08 +0200 Subject: [PATCH] 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 | 15 +++++++++---- src/app/app-routing-module.ts | 20 ++++++++++++++--- src/app/header/header.component.css | 9 ++++++++ src/app/header/header.component.html | 2 ++ src/app/header/header.component.ts | 11 ++++++++++ .../home.component.css} | 0 .../home.component.html} | 0 .../home.component.ts} | 6 ++--- .../main-layout/main-layout.component.css | 22 +++++++++++++++++++ .../main-layout/main-layout.component.html | 9 ++++++++ .../main-layout/main-layout.component.ts | 11 ++++++++++ src/app/main-page/main-page.html | 1 - src/app/main-page/main-page.ts | 11 ---------- .../main-page.css => main/main.component.css} | 0 src/app/main/main.component.html | 1 + src/app/main/main.component.ts | 11 ++++++++++ src/app/navbar/navbar.component.css | 11 ++++++++++ src/app/navbar/navbar.component.html | 2 ++ src/app/navbar/navbar.component.ts | 11 ++++++++++ src/app/schedule/schedule.component.css | 7 ++++++ src/app/schedule/schedule.component.html | 1 + src/app/schedule/schedule.component.ts | 11 ++++++++++ 22 files changed, 150 insertions(+), 22 deletions(-) create mode 100644 src/app/header/header.component.css create mode 100644 src/app/header/header.component.html create mode 100644 src/app/header/header.component.ts rename src/app/{home-component/home-component.css => home/home.component.css} (100%) rename src/app/{home-component/home-component.html => home/home.component.html} (100%) rename src/app/{home-component/home-component.ts => home/home.component.ts} (50%) create mode 100644 src/app/layouts/main-layout/main-layout.component.css create mode 100644 src/app/layouts/main-layout/main-layout.component.html create mode 100644 src/app/layouts/main-layout/main-layout.component.ts delete mode 100644 src/app/main-page/main-page.html delete mode 100644 src/app/main-page/main-page.ts rename src/app/{main-page/main-page.css => main/main.component.css} (100%) create mode 100644 src/app/main/main.component.html create mode 100644 src/app/main/main.component.ts create mode 100644 src/app/navbar/navbar.component.css create mode 100644 src/app/navbar/navbar.component.html create mode 100644 src/app/navbar/navbar.component.ts create mode 100644 src/app/schedule/schedule.component.css create mode 100644 src/app/schedule/schedule.component.html create mode 100644 src/app/schedule/schedule.component.ts diff --git a/src/app/app-module.ts b/src/app/app-module.ts index 8c58311..71bbfab 100644 --- a/src/app/app-module.ts +++ b/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, diff --git a/src/app/app-routing-module.ts b/src/app/app-routing-module.ts index f889ae7..d8ea875 100644 --- a/src/app/app-routing-module.ts +++ b/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 { MainPage } from './main-page/main-page'; +import { HomeComponent } from './home/home.component'; +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 }, ]; diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css new file mode 100644 index 0000000..e31239f --- /dev/null +++ b/src/app/header/header.component.css @@ -0,0 +1,9 @@ +header { + display: flex; + width: 100%; +} + +.header { + height: 60px; + background-color: greenyellow; +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html new file mode 100644 index 0000000..f45fd70 --- /dev/null +++ b/src/app/header/header.component.html @@ -0,0 +1,2 @@ +
+
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts new file mode 100644 index 0000000..f572069 --- /dev/null +++ b/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 { + +} diff --git a/src/app/home-component/home-component.css b/src/app/home/home.component.css similarity index 100% rename from src/app/home-component/home-component.css rename to src/app/home/home.component.css diff --git a/src/app/home-component/home-component.html b/src/app/home/home.component.html similarity index 100% rename from src/app/home-component/home-component.html rename to src/app/home/home.component.html diff --git a/src/app/home-component/home-component.ts b/src/app/home/home.component.ts similarity index 50% rename from src/app/home-component/home-component.ts rename to src/app/home/home.component.ts index b1ebe07..906862d 100644 --- a/src/app/home-component/home-component.ts +++ b/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', - styleUrl: './home-component.css' + templateUrl: './home.component.html', + styleUrl: './home.component.css' }) export class HomeComponent { diff --git a/src/app/layouts/main-layout/main-layout.component.css b/src/app/layouts/main-layout/main-layout.component.css new file mode 100644 index 0000000..efa3db6 --- /dev/null +++ b/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%; +} diff --git a/src/app/layouts/main-layout/main-layout.component.html b/src/app/layouts/main-layout/main-layout.component.html new file mode 100644 index 0000000..b65e80a --- /dev/null +++ b/src/app/layouts/main-layout/main-layout.component.html @@ -0,0 +1,9 @@ + + +
+ + +
+ +
+
diff --git a/src/app/layouts/main-layout/main-layout.component.ts b/src/app/layouts/main-layout/main-layout.component.ts new file mode 100644 index 0000000..c0e90c9 --- /dev/null +++ b/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 { + +} diff --git a/src/app/main-page/main-page.html b/src/app/main-page/main-page.html deleted file mode 100644 index 9720622..0000000 --- a/src/app/main-page/main-page.html +++ /dev/null @@ -1 +0,0 @@ -

main-page works!

diff --git a/src/app/main-page/main-page.ts b/src/app/main-page/main-page.ts deleted file mode 100644 index 06f806e..0000000 --- a/src/app/main-page/main-page.ts +++ /dev/null @@ -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 { - -} diff --git a/src/app/main-page/main-page.css b/src/app/main/main.component.css similarity index 100% rename from src/app/main-page/main-page.css rename to src/app/main/main.component.css diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html new file mode 100644 index 0000000..17c1228 --- /dev/null +++ b/src/app/main/main.component.html @@ -0,0 +1 @@ +

main works!

diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts new file mode 100644 index 0000000..f8c59d0 --- /dev/null +++ b/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 { + +} diff --git a/src/app/navbar/navbar.component.css b/src/app/navbar/navbar.component.css new file mode 100644 index 0000000..5eb3454 --- /dev/null +++ b/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; +} diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html new file mode 100644 index 0000000..137ca2d --- /dev/null +++ b/src/app/navbar/navbar.component.html @@ -0,0 +1,2 @@ + diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts new file mode 100644 index 0000000..2541140 --- /dev/null +++ b/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 { + +} diff --git a/src/app/schedule/schedule.component.css b/src/app/schedule/schedule.component.css new file mode 100644 index 0000000..eb1eb2e --- /dev/null +++ b/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; +} diff --git a/src/app/schedule/schedule.component.html b/src/app/schedule/schedule.component.html new file mode 100644 index 0000000..0b4b913 --- /dev/null +++ b/src/app/schedule/schedule.component.html @@ -0,0 +1 @@ +

schedule works!

diff --git a/src/app/schedule/schedule.component.ts b/src/app/schedule/schedule.component.ts new file mode 100644 index 0000000..631b3ca --- /dev/null +++ b/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 { + +}