From a57e6ba1f2dfc8faef5baa7bc7eb878da3ca51ca Mon Sep 17 00:00:00 2001 From: AdamBtech <60339324+AdamBtech@users.noreply.github.com> Date: Mon, 19 May 2025 17:07:09 +0200 Subject: [PATCH] Added layout components to main-layout components and then main-layout to app --- src/app/app.component.html | 345 +----------------- src/app/app.component.spec.ts | 29 -- src/app/app.component.ts | 5 +- .../components/footer/footer.component.html | 4 +- .../components/header/header.component.html | 4 +- .../main-layout/main-layout.component.html | 4 +- .../main-layout/main-layout.component.ts | 9 +- .../components/sidebar/sidebar.component.html | 8 +- src/styles.css | 13 +- 9 files changed, 43 insertions(+), 378 deletions(-) delete mode 100644 src/app/app.component.spec.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..793f8a7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,13 @@ - - - - - - - - - - - -
-
-
- -

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 }} - - - - - } -
- -
-
-
- - - - - - - - - + + + + + + {{title}} + + + + + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index 44e8e5e..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have the 'angularPortfolio' title`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('angularPortfolio'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angularPortfolio'); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e9b519a..c0bd92f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,13 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import {MainLayoutComponent} from './layout/components/main-layout/main-layout.component'; @Component({ selector: 'app-root', - imports: [RouterOutlet], + imports: [RouterOutlet, MainLayoutComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { - title = 'angularPortfolio'; + title = 'Adam Benyekkou Portfolio'; } diff --git a/src/app/layout/components/footer/footer.component.html b/src/app/layout/components/footer/footer.component.html index 28c0d7d..c7e5f4b 100644 --- a/src/app/layout/components/footer/footer.component.html +++ b/src/app/layout/components/footer/footer.component.html @@ -1 +1,3 @@ -

footer works!

+
+

footer works!

+
diff --git a/src/app/layout/components/header/header.component.html b/src/app/layout/components/header/header.component.html index 4f5a95d..29388f7 100644 --- a/src/app/layout/components/header/header.component.html +++ b/src/app/layout/components/header/header.component.html @@ -1 +1,3 @@ -

header works!

+
+

header works!

+
diff --git a/src/app/layout/components/main-layout/main-layout.component.html b/src/app/layout/components/main-layout/main-layout.component.html index 78c44f9..aeeeb7f 100644 --- a/src/app/layout/components/main-layout/main-layout.component.html +++ b/src/app/layout/components/main-layout/main-layout.component.html @@ -1 +1,3 @@ -

main-layout works!

+ + + diff --git a/src/app/layout/components/main-layout/main-layout.component.ts b/src/app/layout/components/main-layout/main-layout.component.ts index 7c2b194..2829a11 100644 --- a/src/app/layout/components/main-layout/main-layout.component.ts +++ b/src/app/layout/components/main-layout/main-layout.component.ts @@ -1,8 +1,15 @@ import { Component } from '@angular/core'; +import {FooterComponent} from '../footer/footer.component'; +import {SidebarComponent} from '../sidebar/sidebar.component'; +import {HeaderComponent} from '../header/header.component'; @Component({ selector: 'app-main-layout', - imports: [], + imports: [ + FooterComponent, + SidebarComponent, + HeaderComponent + ], templateUrl: './main-layout.component.html', styleUrl: './main-layout.component.css' }) diff --git a/src/app/layout/components/sidebar/sidebar.component.html b/src/app/layout/components/sidebar/sidebar.component.html index 52a8ffc..76a279f 100644 --- a/src/app/layout/components/sidebar/sidebar.component.html +++ b/src/app/layout/components/sidebar/sidebar.component.html @@ -1 +1,7 @@ -

sidebar works!

+
+ +
diff --git a/src/styles.css b/src/styles.css index 145c43e..0e18569 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,24 +1,21 @@ @import "tailwindcss"; @import "tailwindcss-primeui"; -@import "primeicons/primeicons.css"; /* You can add global styles to this file, and also import other style files */ -/* Configuration des layers CSS pour garantir la priorité correcte */ +@import "primeicons/primeicons.css"; @layer tailwind-base, primeng, tailwind-utilities; @config "./tailwind.config.js"; -/* Import du plugin PrimeUI */ -/* Configuration des layers pour compatibilité PrimeNG */ @layer tailwind-base { - /* Tailwind base styles */ + } @layer primeng { - /* PrimeNG s'injectera ici */ + } @layer tailwind-utilities { - /* Tailwind utilities s'injecteront ici */ + } -/* Import des icônes PrimeNG */ +