feat: add layout core components

Author: Diogo-Ferraz

angular.json

@@ -35,7 +35,6 @@
               "src/styles.scss",
               "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
               "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
               "node_modules/primeflex/primeflex.css"
             ],
             "scripts": []
@@ -45,13 +44,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "1.5mb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kB",
-                  "maximumError": "4kB"
+                  "maximumWarning": "10kb",
+                  "maximumError": "50kb"
                 }
               ],
               "outputHashing": "all"
@@ -102,5 +101,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app.component.html

@@ -1 +1,11 @@
-<app-home-login></app-home-login>
+<div class="layout-wrapper" [ngClass]="containerClass">
+    <app-topbar></app-topbar>
+    <app-sidebar></app-sidebar>
+    <div class="layout-main-container">
+        <div class="layout-main">
+            <router-outlet></router-outlet>
+        </div>
+        <app-footer></app-footer>
+    </div>
+    <div class="layout-mask animate-fadein"></div>
+</div> 

src/app/app.component.scss

@@ -0,0 +1,22 @@
+@use '../assets//layout/variables/_light';
+@use '../assets/layout/variables/_dark';
+@use '../assets/layout/variables/common';
+@use '../assets/layout/responsive';
+
+.layout-wrapper {
+  min-height: 100vh;
+}
+
+.layout-main-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: space-between;
+  padding: 6rem 2rem 0 2rem;
+  transition: margin-left .2s;
+}
+
+.layout-main {
+  flex: 1 1 auto;
+  padding-bottom: 2rem;
+}

src/app/app.component.ts

@@ -1,17 +1,38 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { HomeLoginComponent } from "./features/login/components/home-login/home-login.component";
+import { MenuItem, PrimeNGConfig } from 'primeng/api';
+import { SharedModule } from './shared/shared.module';
+import { AppTopbarComponent } from "./core/layout/component/app-topbar/app-topbar.component";
+import { AppFooterComponent } from "./core/layout/component/app-footer/app-footer.component";
+import { AppSidebarComponent } from './core/layout/component/app-sidebar/app-sidebar.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [
+    SharedModule,
     RouterOutlet,
-    HomeLoginComponent
+    AppTopbarComponent,
+    AppFooterComponent,
+    AppSidebarComponent
 ],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   title = 'TaskManagementClient';
+  constructor(private primengConfig: PrimeNGConfig) {
+    this.primengConfig.ripple = true;
+  }
+
+  get containerClass() {
+    return {
+        'layout-overlay': false,
+        'layout-static': true,
+        'layout-static-inactive': false,
+        'layout-overlay-active': false,
+        'layout-mobile-active': false
+    };
+}
 }

src/app/app.config.ts

@@ -1,8 +1,14 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
 
 import { routes } from './app.routes';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(),
+    provideAnimations()]
 };

src/app/app.routes.ts

@@ -1,3 +1,10 @@
 import { Routes } from '@angular/router';
+import { HomeLoginComponent } from './features/login/components/home-login/home-login.component';
+import { ProjectListComponent } from './features/projects/components/project-list/project-list.component';
+import { DashboardComponent } from './features/dashboard/components/dashboard/dashboard.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', component: DashboardComponent },
+  { path: 'projects', component: ProjectListComponent },
+  { path: 'login', component: HomeLoginComponent },
+];

src/app/core/core.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { StyleClassModule } from 'primeng/styleclass';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    SharedModule,
+    StyleClassModule
+  ]
+})
+export class CoreModule { }

src/app/core/layout/component/app-footer/app-footer.component.html

@@ -0,0 +1,4 @@
+<div class="layout-footer">
+    Task Management by
+    <a href="https://github.com/Diogo-Ferraz" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">Diogo Ferraz</a>
+</div>`

src/app/core/layout/component/app-footer/app-footer.component.scss

@@ -0,0 +1,8 @@
+.layout-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem 0 1rem 0;
+    gap: 0.5rem;
+    border-top: 1px solid var(--surface-border);
+}

src/app/core/layout/component/app-footer/app-footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppFooterComponent } from './app-footer.component';
+
+describe('AppFooterComponent', () => {
+  let component: AppFooterComponent;
+  let fixture: ComponentFixture<AppFooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppFooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AppFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});