Order Issues Table - Copy this Angular, Css Component to your project
<mat-toolbar class="mat-elevation-z8"> <button mat-icon-button *ngIf="sidenav.mode === 'over'" (click)="sidenav.toggle()" class="nav-button"> <mat-icon *ngIf="!sidenav.opened"> menu </mat-icon> <mat-icon *ngIf="sidenav.opened"> close </mat-icon> </button> <img class="nav-img" src="assets/images/Logo.png"> <div class="display-right"> <button routerLink="tasks"> <mat-icon style="color: white;">assignment</mat-icon> </button> <button [matMenuTriggerFor]="notificationsMenu"> <mat-icon style="color: white">notifications</mat-icon> <span *ngIf="unreadNotificationsCount > 0" class="notification-badge"> {{ unreadNotificationsCount }} </span> </button> <button> <mat-icon style="color: white;">settings_power</mat-icon> </button> </div> </mat-toolbar> <mat-menu #notificationsMenu="matMenu" class="notification-dropdown"> <div *ngIf="notifications.length === 0" class="empty-notifications"> No new notifications. </div> <div *ngFor="let notification of notifications" class="notification-item"> <div class="notification-content">{{ notification.message }}</div> <div class="notification-timestamp">{{ notification.createdAt | date: 'short' }}</div> <button (click)="markAsRead(notification.notificationId)" *ngIf="!notification.isRead" class="mark-read-btn">Mark as read</button> </div> </mat-menu> <mat-sidenav-container> <mat-sidenav class="mat-elevation-z8" #sidenav="matSidenav" class="mat-elevation-z8"> <div class="image-container" (mouseenter)="onHover(true)" (mouseleave)="onHover(false)"> <img [src]="imageUrl" alt="image" class="avatar mat-elevation-z8" (click)="onImageClick()"> <div *ngIf="isHovered" class="edit-button" (click)="triggerFileInput($event)">Edit</div> <input type="file" #fileInput accept="image/*" (change)="onFileSelected($event)" style="display: none;" /> </div> <h4 class="name">Ponnuru Rishitha</h4> <p class="designation">Software Engineer</p> <mat-divider></mat-divider> <!-- <mat-nav-list> --> <mat-list-item> <a class="menu-icons" routerLink="home"> <mat-icon>house</mat-icon> <span>Home</span> </a> </mat-list-item> <mat-list-item> <a class="menu-icons" routerLink="profile"> <mat-icon>person</mat-icon> <span>Profile</span> </a> </mat-list-item> <mat-list-item> <a class="menu-icons" routerLink="orders"> <mat-icon>info</mat-icon> <span>Orders</span> </a> </mat-list-item> <mat-list-item> <a class="menu-icons" routerLink="shipping"> <mat-icon>local_shipping</mat-icon> <span>Shipping</span> </a> </mat-list-item> </mat-sidenav> <mat-sidenav-content> <div class="content mat-elevation-z8"> <router-outlet></router-outlet> </div> </mat-sidenav-content> </mat-sidenav-container> I need a profile page for this page when I click on profile
