fix(dees-appui): Extract demos for main and secondary app menus, adjust collapsed styles and toggle placement, bump devDependency

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

@@ -12,6 +12,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from './dees-appui-mainmenu.demo.js';
 
 /**
  * the most left menu
@@ -19,49 +20,7 @@ import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
  */
 @customElement('dees-appui-mainmenu')
 export class DeesAppuiMainmenu extends DeesElement {
-  public static demo = () => html`
-    <style>
-      .demo-mainmenu-container {
-        height: 500px;
-        background: #1a1a1a;
-        border-radius: 8px;
-        overflow: hidden;
-      }
-    </style>
-    <div class="demo-mainmenu-container">
-      <dees-appui-mainmenu
-        .logoIcon=${'lucide:box'}
-        .logoText=${'Acme App'}
-        .menuGroups=${[
-          {
-            tabs: [
-              { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard') },
-              { key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox') },
-            ]
-          },
-          {
-            name: 'Workspace',
-            tabs: [
-              { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects') },
-              { key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks') },
-              { key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents') },
-            ]
-          },
-          {
-            name: 'Analytics',
-            tabs: [
-              { key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports') },
-              { key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights') },
-            ]
-          }
-        ]}
-        .bottomTabs=${[
-          { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
-          { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help') },
-        ]}
-      ></dees-appui-mainmenu>
-    </div>
-  `;
+  public static demo = demoFunc;
 
   // INSTANCE
 
@@ -188,13 +147,12 @@ export class DeesAppuiMainmenu extends DeesElement {
 
       :host([collapsed]) .logoSection {
         justify-content: center;
-        padding: 0 8px;
+        padding: 0;
+        gap: 0;
       }
 
       :host([collapsed]) .logoSection .logoText {
-        opacity: 0;
-        width: 0;
-        overflow: hidden;
+        display: none;
       }
 
       /* Middle Section (scrollable) */
@@ -395,9 +353,6 @@ export class DeesAppuiMainmenu extends DeesElement {
     const allTabs = this.getAllTabs();
 
     return html`
-      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
-        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
-      </button>
       <div class="mainContainer" @contextmenu=${(eventArg: MouseEvent) => {
         DeesContextmenu.openContextMenuWithOptions(eventArg, [{
           name: 'app settings',
@@ -422,6 +377,9 @@ export class DeesAppuiMainmenu extends DeesElement {
           </div>
         ` : ''}
       </div>
+      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
+        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
+      </button>
     `;
   }