feat(dees-appui): Add collapsible/compact mode to AppUI sidebars (mainmenu & secondarymenu) with toggles, tooltips and improved z-index stacking

ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts

@@ -89,6 +89,13 @@ export class DeesAppuiBase extends DeesElement {
   @property({ type: Array })
   accessor secondarymenuOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
 
+  // Collapse states
+  @property({ type: Boolean })
+  accessor mainmenuCollapsed: boolean = false;
+
+  @property({ type: Boolean })
+  accessor secondarymenuCollapsed: boolean = false;
+
   // Properties for maincontent
   @property({ type: Array })
   accessor maincontentTabs: interfaces.ITab[] = [];
@@ -124,9 +131,30 @@ export class DeesAppuiBase extends DeesElement {
         height: calc(100% - 40px);
         width: 100%;
         display: grid;
-        grid-template-columns: 200px 240px 1fr 240px;
+        grid-template-columns: auto auto 1fr 240px;
         grid-template-rows: 1fr;
       }
+
+      /* Z-index layering for proper stacking (position: relative required for z-index to work) */
+      .maingrid > dees-appui-mainmenu {
+        position: relative;
+        z-index: 3;
+      }
+
+      .maingrid > dees-appui-secondarymenu {
+        position: relative;
+        z-index: 2;
+      }
+
+      .maingrid > dees-appui-maincontent {
+        position: relative;
+        z-index: 1;
+      }
+
+      .maingrid > dees-appui-activitylog {
+        position: relative;
+        z-index: 1;
+      }
     `,
   ];
 
@@ -156,14 +184,18 @@ export class DeesAppuiBase extends DeesElement {
           .bottomTabs=${this.mainmenuBottomTabs}
           .tabs=${this.mainmenuTabs}
           .selectedTab=${this.mainmenuSelectedTab}
+          .collapsed=${this.mainmenuCollapsed}
           @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
+          @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
         ></dees-appui-mainmenu>
         <dees-appui-secondarymenu
           .heading=${this.secondarymenuHeading}
           .groups=${this.secondarymenuGroups}
           .selectionOptions=${this.secondarymenuOptions}
           .selectedItem=${this.secondarymenuSelectedItem}
+          .collapsed=${this.secondarymenuCollapsed}
           @item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
+          @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
         ></dees-appui-secondarymenu>
         <dees-appui-maincontent
           .tabs=${this.maincontentTabs}
@@ -244,4 +276,23 @@ export class DeesAppuiBase extends DeesElement {
       composed: true
     }));
   }
+
+  // Event handlers for collapse state changes
+  private handleMainmenuCollapseChange(e: CustomEvent) {
+    this.mainmenuCollapsed = e.detail.collapsed;
+    this.dispatchEvent(new CustomEvent('mainmenu-collapse-change', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleSecondarymenuCollapseChange(e: CustomEvent) {
+    this.secondarymenuCollapsed = e.detail.collapsed;
+    this.dispatchEvent(new CustomEvent('secondarymenu-collapse-change', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
 }