From ba2e989d4952dc56f38614468cefe68681e39c7d Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 18 Dec 2024 09:11:59 +0100 Subject: [PATCH 1/4] feat(navigation): add navigation bar component and update app layout --- src/app/app.component.html | 337 +----------------- src/app/app.component.ts | 3 +- .../navigation-bar.component.css | 0 .../navigation-bar.component.html | 1 + .../navigation-bar.component.spec.ts | 23 ++ .../navigation-bar.component.ts | 12 + 6 files changed, 39 insertions(+), 337 deletions(-) create mode 100644 src/app/components/navigation-bar/navigation-bar.component.css create mode 100644 src/app/components/navigation-bar/navigation-bar.component.html create mode 100644 src/app/components/navigation-bar/navigation-bar.component.spec.ts create mode 100644 src/app/components/navigation-bar/navigation-bar.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..60c0590 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 04ea690..e7e6eed 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { NavigationBarComponent } from './components/navigation-bar/navigation-bar.component'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, NavigationBarComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/src/app/components/navigation-bar/navigation-bar.component.css b/src/app/components/navigation-bar/navigation-bar.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/navigation-bar/navigation-bar.component.html b/src/app/components/navigation-bar/navigation-bar.component.html new file mode 100644 index 0000000..8b82ab9 --- /dev/null +++ b/src/app/components/navigation-bar/navigation-bar.component.html @@ -0,0 +1 @@ +

navigation-bar works!

diff --git a/src/app/components/navigation-bar/navigation-bar.component.spec.ts b/src/app/components/navigation-bar/navigation-bar.component.spec.ts new file mode 100644 index 0000000..50ab2c0 --- /dev/null +++ b/src/app/components/navigation-bar/navigation-bar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavigationBarComponent } from './navigation-bar.component'; + +describe('NavigationBarComponent', () => { + let component: NavigationBarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NavigationBarComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(NavigationBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/navigation-bar/navigation-bar.component.ts b/src/app/components/navigation-bar/navigation-bar.component.ts new file mode 100644 index 0000000..ed53374 --- /dev/null +++ b/src/app/components/navigation-bar/navigation-bar.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-navigation-bar', + standalone: true, + imports: [], + templateUrl: './navigation-bar.component.html', + styleUrl: './navigation-bar.component.css' +}) +export class NavigationBarComponent { + +} From 66472b28f6ae8fcfe7012aae6b3407b75a7ff57f Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 18 Dec 2024 09:23:34 +0100 Subject: [PATCH 2/4] style: add layout styles for app and navigation bar components --- src/app/app.component.css | 6 +++ .../navigation-bar.component.css | 4 ++ .../navigation-bar.component.html | 54 ++++++++++++++++++- src/styles.css | 9 ++++ 4 files changed, 72 insertions(+), 1 deletion(-) diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..b787d44 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,6 @@ + +:host { + display: block; + height: 100vh; + width: 100vw; +} diff --git a/src/app/components/navigation-bar/navigation-bar.component.css b/src/app/components/navigation-bar/navigation-bar.component.css index e69de29..166a2d8 100644 --- a/src/app/components/navigation-bar/navigation-bar.component.css +++ b/src/app/components/navigation-bar/navigation-bar.component.css @@ -0,0 +1,4 @@ +:host { +display: block; + height: 100%; +} diff --git a/src/app/components/navigation-bar/navigation-bar.component.html b/src/app/components/navigation-bar/navigation-bar.component.html index 8b82ab9..1e8392b 100644 --- a/src/app/components/navigation-bar/navigation-bar.component.html +++ b/src/app/components/navigation-bar/navigation-bar.component.html @@ -1 +1,53 @@ -

navigation-bar works!

+
+ + + Sidebar + +
+ +
+
+ + +
+
diff --git a/src/styles.css b/src/styles.css index 90d4ee0..6ee37e1 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,10 @@ /* You can add global styles to this file, and also import other style files */ +.container{ + min-height:100vh; +} + +html, body { + min-height: 100%; + height: auto; + margin: 0; +} From 4f9ca794c41a16ba7be5b965471d187e54168ec5 Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 18 Dec 2024 10:06:38 +0100 Subject: [PATCH 3/4] feat(navigation-bar): add logo and update sidebar styling --- public/logo.svg | 1 + .../navigation-bar.component.html | 43 ++++++------------- 2 files changed, 13 insertions(+), 31 deletions(-) create mode 100644 public/logo.svg diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..4a87af6 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/components/navigation-bar/navigation-bar.component.html b/src/app/components/navigation-bar/navigation-bar.component.html index 1e8392b..00950bb 100644 --- a/src/app/components/navigation-bar/navigation-bar.component.html +++ b/src/app/components/navigation-bar/navigation-bar.component.html @@ -1,52 +1,33 @@ -
- - - Sidebar +
+ + + Hi-Tec GmbH
- -
From 829d289c6dc2321a06ac469f52bde149dd49f296 Mon Sep 17 00:00:00 2001 From: Jan Klattenhoff Date: Wed, 18 Dec 2024 10:16:13 +0100 Subject: [PATCH 4/4] style(navigation-bar): remove unused dropdown HTML elements --- .../navigation-bar/navigation-bar.component.html | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/app/components/navigation-bar/navigation-bar.component.html b/src/app/components/navigation-bar/navigation-bar.component.html index 00950bb..c1e0cbe 100644 --- a/src/app/components/navigation-bar/navigation-bar.component.html +++ b/src/app/components/navigation-bar/navigation-bar.component.html @@ -21,14 +21,4 @@ -
-
- - -