Profile Drawer Component - Copy this Angular, Tailwind Component to your project

Please enhance the drawer , create a menu profile dawer with icons, sections, profile picture and title to show the name of the client. This is my antigous drawer: @Component({ selector: 'app profile details', standalone: true, imports: [CommonModule, MatIconModule, MatBadgeModule, MatButtonModule], template: ` <! Overlay for Drawer > <div *ngIf="isOpen" class="fixed inset 0 bg black bg opacity 50 z 40" (click)="toggleDrawer()"></div> <! Panel Drawer with flex layout > <div class="fixed left 0 top 0 h full w 80 bg white dark:bg gray 800 shadow 2xl transform transition transform duration 300 z 50 flex flex col" [class. translate x full]="!isOpen" [class.translate x 0]="isOpen"> <! Header > <div class="p 4 flex justify between items center border b border gray 200 "> <h2 class="text 2xl font semibold text gray 900 ">Perfil</h2> <button mat button class="custom button red" (click)="toggleDrawer()" > <mat icon class="m 0">close</mat icon> </button> </div> </div> <! Floating Button to Open Drawer > <button (click)="toggleDrawer()" *ngIf="!isOpen" class="fixed top 12 left 8 bg black hover:bg red 700 text white p 3 rounded full shadow xl z 50 focus:outline none"> <mat icon aria hidden="false" class="example tab icon mat icon element w 3" >home</mat icon> </button> `,