check all change left with format make it look nice

U22/src/app/nav-toolbar/nav-toolbar.component.html

@@ -17,8 +17,11 @@
     <div class="font-bold text-white">
       {{currentUserName}}
     </div>
-    <button (click)="onToggle()"  type="button">
-      <svg data-p-icon="angle-down" [size]="20"></svg>
+       <p-menu #menu [model]="items" [popup]="true"></p-menu>
+       <button pButton variant="text" variant="outlined"   (click)="menu.toggle($event)">
+        <svg data-p-icon="bars"></svg>
        </button>
+
+     
   </div>
 </div>

U22/src/app/nav-toolbar/nav-toolbar.component.ts

@@ -3,17 +3,21 @@ import { Subscription } from 'rxjs'
 import { Component, EventEmitter, Output, OnInit, OnDestroy, inject, signal } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { Utils } from '../shares';
-import { AngleDown } from '@primeicons/angular/angle-down';
-import { SidebarModule } from 'primeng/sidebar';
+import { Bars } from '@primeicons/angular/bars';
+
+import { MenuModule } from 'primeng/menu';
+import { ButtonModule } from 'primeng/button';
+import { MenuItem } from 'primeng/api';
 
 @Component({
   selector: 'app-nav-toolbar',
-  imports: [RouterModule, AngleDown, SidebarModule],
+  imports: [RouterModule, Bars, MenuModule, ButtonModule],
   templateUrl: './nav-toolbar.component.html',
   styleUrls: ['./nav-toolbar.component.css']
 })
 export class NavToolarComponent implements OnInit, OnDestroy {
   isExpanded = false;
+  items: MenuItem[] | undefined;
   isAuth = signal(false);
   isAdmin = signal(false);
   currentUserName = "";
@@ -31,11 +35,65 @@ export class NavToolarComponent implements OnInit, OnDestroy {
     if (currentUser.firstName != '') {
       this.isAuth.set(Utils.getIsAuth());
       this.isAdmin.set(Utils.getIsAdmin());
+      this.initValue();
       this.currentUserName = currentUser.firstName + ' ' + currentUser.lastName;
     }
+    else {
+      this.initValue();
+    }
 
   }
 
+  initValue(): void {
+    this.items = [
+      {
+        label: 'Concession Validation',
+        icon: 'pi pi-user-edit',
+        command: () => {
+          this.router.navigate(['/concessionvalidation']);
+        }
+      },
+      {
+        label: 'Report',
+        icon: 'pi pi-user-edit',
+        command: () => {
+          this.router.navigate(['/app-concessionvalidation-report']);
+        }
+      }
+    ];
+    if (this.isAdmin() == true) {
+      this.items.push({
+        label: 'Admin User',
+        icon: 'pi pi-user-edit',
+        command: () => {
+          this.router.navigate(['/adminuser']);
+        }
+      });
+      this.items.push({
+        label: 'Concession Type',
+        icon: 'pi pi-user-edit',
+        command: () => {
+          this.router.navigate(['/concessiontype']);
+        }
+      });
+      this.items.push({
+        label: 'Validation Point',
+        icon: 'pi pi-user-edit',
+        command: () => {
+          this.router.navigate(['/validationpoint']);
+        }
+      });
+    }
+    this.items.push({
+      label: 'Logout',
+      icon: 'pi pi-user-edit',
+      command: () => {
+        this.authService.logout();
+        this.router.navigate(['/login']);
+      }
+    });
+  }
+
   ngOnDestroy() {
     if (this.authSubscription) {
       this.authSubscription.unsubscribe();