feat: updated components

src/app/app.component.html

@@ -1,7 +1,13 @@
-<!-- <ngx-loading-bar [includeSpinner]="false"></ngx-loading-bar> -->
-<div class="container mx-auto p-2 flex justify-end">
-    <ui-switch [(ngModel)]="isDark" (change)="toggle()"></ui-switch>
-</div>
-<app-header></app-header>
-<router-outlet></router-outlet>
-<app-footer></app-footer>
+<mat-sidenav-container>
+    <mat-sidenav #sidenav>
+        <app-sidebar (closeSideNav)="sidenav.close()"></app-sidebar>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <app-header (SideNavToggle)="sidenav.toggle()"></app-header>
+        <main>
+            <router-outlet></router-outlet>
+            <app-wip></app-wip>
+            <app-footer></app-footer>
+        </main>
+    </mat-sidenav-content>
+</mat-sidenav-container>

src/app/app.component.scss

@@ -0,0 +1,10 @@
+mat-sidenav-container,
+mat-sidenav-content,
+mat-sidenav {
+  height: 100%;
+}
+
+mat-sidenav {
+  width: 200px;
+  background-color: #f4f4f4;
+}

src/app/app.module.ts

@@ -6,24 +6,33 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { NgOptimizedImage } from '@angular/common';
-import { UiSwitchModule } from 'ngx-ui-switch';
 import { HomeComponent } from './pages/home/home.component';
 import { WipComponent } from './pages/wip/wip.component';
 import { UsesComponent } from './pages/uses/uses.component';
 import { BlogsComponent } from './pages/blogs/blogs.component';
 import { AboutComponent } from './pages/about/about.component';
-import { HeaderComponent } from './header/header.component';
-import { FooterComponent } from './footer/footer.component';
+import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
 import { ErrorComponent } from './pages/error/error.component';
 import { ProjectsComponent } from './pages/projects/projects.component';
 import { ProjectDetailsComponent } from './pages/projects/project-details/project-details.component';
 import { environment } from '../environments/environment';
-import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
-import { provideAuth,getAuth } from '@angular/fire/auth';
-import { provideDatabase,getDatabase } from '@angular/fire/database';
-import { provideFirestore,getFirestore } from '@angular/fire/firestore';
-import { AngularMaterialModule } from './angular-material.module';
-
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { provideAuth, getAuth } from '@angular/fire/auth';
+import { provideDatabase, getDatabase } from '@angular/fire/database';
+import { provideFirestore, getFirestore } from '@angular/fire/firestore';
+import { MatInputModule } from '@angular/material/input';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav'
+import { SidebarComponent } from './components/sidebar/sidebar.component';
+import { MatListModule } from '@angular/material/list';
 @NgModule({
   declarations: [
     AppComponent,
@@ -36,16 +45,26 @@ import { AngularMaterialModule } from './angular-material.module';
     FooterComponent,
     ErrorComponent,
     ProjectsComponent,
-    ProjectDetailsComponent
+    ProjectDetailsComponent,
+    SidebarComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
     NgOptimizedImage,
-    UiSwitchModule,
-    AngularMaterialModule,
+    MatInputModule,
+    MatCardModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatExpansionModule,
+    MatProgressSpinnerModule,
+    MatPaginatorModule,
+    MatDialogModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule,
     provideFirebaseApp(() => initializeApp(environment.firebase)),
     provideAuth(() => getAuth()),
     provideDatabase(() => getDatabase()),

src/app/header/header.component.html → src/app/components/header/header.component.html

@@ -1,3 +1,11 @@
+<mat-toolbar color="primary">
+    <div>
+        <button mat-icon-button (click)="openSidenav()">
+            <mat-icon>menu</mat-icon>
+        </button>
+    </div>
+</mat-toolbar>
+
 <div class="flex flex-row justify-center gap-4 m-4">
     <div class="text-lg font-semibold">
         <a routerLink="">Home</a>

src/app/components/header/header.component.ts

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+  @Output() SideNavToggle = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() { }
+
+  openSidenav() {
+    this.SideNavToggle.emit();
+  }
+}

src/app/pages/home/home.component.html

@@ -1,2 +1 @@
 <!-- <ngx-loading-bar [includeSpinner]="false"></ngx-loading-bar> -->
-<app-wip></app-wip>

src/app/pages/home/home.component.ts

@@ -8,13 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  data: any;
-
-  constructor(private http: HttpClient){}
+  constructor(private http: HttpClient) { }
 
   ngOnInit(): void {
-    this.http.get('/assets/data.json').subscribe(data => {
-      this.data = data;
-    })
   }
 }

src/styles.scss

@@ -6,11 +6,11 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-    background-color: #f9f3f3;
+html {
+    height: 100%;
+}
 
-    &.dark {
-        color: #f9f3f3;
-        background-color: #393e46;
-    }
+body {
+    height: 100%;
+    margin: 0;
 }