add collapse functionality to the sidebar

app.config.ts

+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { ApplicationConfig } from '@angular/core';
+import { provideProtractorTestingSupport } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { DevAuthInterceptor } from 'src/app/shared/interceptors/dev-auth-interceptor.service';
+import routeConfig from 'src/app/routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideProtractorTestingSupport(),
+    provideRouter(routeConfig),
+    provideAnimations(),
+    { provide: HTTP_INTERCEPTORS, useClass: DevAuthInterceptor, multi: true },
+    provideHttpClient(withInterceptorsFromDi()),
+  ],
+};

src/app/features/dashboard/dashboard.component.html

-<div class="container">
-  <div><gp-navbar></gp-navbar></div>
-  <div class="sidebar-content-container">
-    <div class="sidebar-container"><gp-sidebar></gp-sidebar></div>
-    <div class="content-container"><ng-content></ng-content></div>
-  </div>
-  <div><gp-footer></gp-footer></div>
-</div>
+<mat-toolbar class="mat-elevation-z3">
+  <button mat-icon-button (click)="collapsed.set(!collapsed())">
+    <mat-icon>menu</mat-icon>
+  </button>
+</mat-toolbar>
+<mat-sidenav-container>
+  <mat-sidenav mode="side" opened [style.width]="sidenavWidth()">
+    <gp-sidebar [collapsed]="collapsed()"></gp-sidebar>
+  </mat-sidenav>
+  <mat-sidenav-content [style.margin-left]="sidenavWidth()">
+    <div class="content">
+      <router-outlet></router-outlet>
+    </div>
+    <!-- Add Content Here -->
+    <mat-toolbar class="footer">
+      <gp-footer></gp-footer>
+    </mat-toolbar> </mat-sidenav-content
+></mat-sidenav-container>

src/app/features/dashboard/dashboard.component.scss

-.container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+mat-toolbar {
+  position: relative;
+  z-index: 5;
 }
-
-.sidebar-content-container {
-  display: flex;
-  flex: 1;
+.content {
+  padding: 24px;
 }
 
-.sidebar-container {
-  flex-shrink: 0;
+mat-sidenav-container {
+  height: calc(100vh - 64px);
 }
 
-.content-container {
-  flex-grow: 1;
+.footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
 }

src/app/features/dashboard/dashboard.component.ts

 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { HomeComponent } from '../home/home.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { FooterComponent } from './footer/footer.component';
 import { RouterModule } from '@angular/router';
-
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
 @Component({
   selector: 'gp-dashboard',
   standalone: true,
@@ -17,6 +19,12 @@ import { RouterModule } from '@angular/router';
     SidebarComponent,
     FooterComponent,
     RouterModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatSidenavModule,
   ],
 })
-export class DashboardComponent {}
+export class DashboardComponent {
+  collapsed = signal(false);
+  sidenavWidth = computed(() => (this.collapsed() ? '65px' : '250px'));
+}

src/app/features/dashboard/sidebar/sidebar.component.html

 <mat-list role="list">
   <mat-list-item><a routerLink="home">home</a></mat-list-item>
-  <mat-list-item role="listitem"> <a routerLink="marketplace">Marketplace</a></mat-list-item> 
-  <mat-list-item role="listitem"> <a routerLink="catalog">Catalog</a></mat-list-item> 
+  <mat-list-item role="listitem">
+    <a routerLink="marketplace">Marketplace</a></mat-list-item
+  >
+  <mat-list-item role="listitem">
+    <a routerLink="catalog">Catalog</a></mat-list-item
+  >
   <mat-list-item role="listitem">My models</mat-list-item>
   <mat-list-item role="listitem">On-boarding model</mat-list-item>
   <mat-list-item role="listitem">Design studio</mat-list-item>

src/app/features/dashboard/sidebar/sidebar.component.ts

 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Input, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { MatListModule } from '@angular/material/list';
 
@@ -10,4 +10,9 @@ import { MatListModule } from '@angular/material/list';
   standalone: true,
   imports: [CommonModule, RouterModule, MatListModule],
 })
-export class SidebarComponent {}
+export class SidebarComponent {
+  sideNavCollapsed = signal(false);
+  @Input() set collapsed(val: boolean) {
+    this.sideNavCollapsed.set(val);
+  }
+}

src/main.ts

-import {
-  bootstrapApplication,
-  provideProtractorTestingSupport,
-} from '@angular/platform-browser';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
-import { provideRouter } from '@angular/router';
-import routeConfig from './app/routes';
-import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { provideAnimations } from '@angular/platform-browser/animations';
+import { appConfig } from 'app.config';
 
-import { DevAuthInterceptor } from './app/shared/interceptors/dev-auth-interceptor.service';
-
-
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideProtractorTestingSupport(), 
-    provideRouter(routeConfig),
-    provideAnimations(),
-    { provide: HTTP_INTERCEPTORS, useClass: DevAuthInterceptor, multi: true },
-    provideHttpClient(withInterceptorsFromDi())
-    
-  ],
-}).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);