feat: Add profile dropdown component and integrate with appbar for user menu

ts_web/elements/dees-appui-base.ts

@@ -9,6 +9,7 @@ import {
   state,
 } from '@design.estate/dees-element';
 import * as interfaces from './interfaces/index.js';
+import * as plugins from './00plugins.js';
 import type { DeesAppuiBar } from './dees-appui-appbar.js';
 import type { DeesAppuiMainmenu } from './dees-appui-mainmenu.js';
 import type { DeesAppuiMainselector } from './dees-appui-mainselector.js';
@@ -44,10 +45,14 @@ export class DeesAppuiBase extends DeesElement {
   @property({ type: Object })
   public appbarUser?: {
     name: string;
+    email?: string;
     avatar?: string;
     status?: 'online' | 'offline' | 'busy' | 'away';
   };
 
+  @property({ type: Array })
+  public appbarProfileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+
   @property({ type: Boolean })
   public appbarShowSearch: boolean = false;
 
@@ -115,11 +120,13 @@ export class DeesAppuiBase extends DeesElement {
         .breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
         .showWindowControls=${this.appbarShowWindowControls}
         .user=${this.appbarUser}
+        .profileMenuItems=${this.appbarProfileMenuItems}
         .showSearch=${this.appbarShowSearch}
         @menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
         @breadcrumb-navigate=${(e: CustomEvent) => this.handleAppbarBreadcrumbNavigate(e)}
         @search-click=${() => this.handleAppbarSearchClick()}
         @user-menu-open=${() => this.handleAppbarUserMenuOpen()}
+        @profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
       ></dees-appui-appbar>
       <div class="maingrid">
         <dees-appui-mainmenu
@@ -182,6 +189,14 @@ export class DeesAppuiBase extends DeesElement {
     }));
   }
 
+  private handleAppbarProfileMenuSelect(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-profile-menu-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   // Event handlers for mainmenu
   private handleMainmenuTabSelect(e: CustomEvent) {
     this.mainmenuSelectedTab = e.detail.tab;