feat(dees-appui): add visibility toggles for main/secondary menus and ability to show/hide content tabs; expose corresponding setters and appconfig entries

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2025-12-29 - 3.6.0 - feat(dees-appui)
+add visibility toggles for main/secondary menus and ability to show/hide content tabs; expose corresponding setters and appconfig entries
+
+- ts_web/elements/00group-appui/dees-appui-base: added boolean properties mainmenuVisible, secondarymenuVisible, maincontentTabsVisible; render main and secondary menus conditionally; pass showTabs to dees-appui-maincontent; added setter methods: setMainMenuVisible, setSecondaryMenuCollapsed, setSecondaryMenuVisible, setContentTabsVisible.
+- ts_web/elements/00group-appui/dees-appui-maincontent: added showTabs property, support for a notabs attribute via styles, updated() and firstUpdated() to apply notabs state so tabs can be hidden/shown dynamically.
+- ts_web/elements/interfaces/appconfig.ts: expanded appconfig interface to include setMainMenuVisible, setSecondaryMenuCollapsed, setSecondaryMenuVisible, setContentTabsVisible so host app can control visibility programmatically.
+- No breaking changes: defaults preserve existing behavior (menus and tabs remain visible by default).
+
 ## 2025-12-29 - 3.5.1 - fix(dees-appui-view)
 remove DeesAppuiView component, its demo, documentation snippet, and related exports
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.5.1',
+  version: '3.6.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

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

@@ -110,6 +110,16 @@ export class DeesAppuiBase extends DeesElement {
   @property({ type: Boolean })
   accessor secondarymenuCollapsed: boolean = false;
 
+  // Visibility states
+  @property({ type: Boolean })
+  accessor mainmenuVisible: boolean = true;
+
+  @property({ type: Boolean })
+  accessor secondarymenuVisible: boolean = true;
+
+  @property({ type: Boolean })
+  accessor maincontentTabsVisible: boolean = true;
+
   // Properties for maincontent
   @property({ type: Array })
   accessor maincontentTabs: interfaces.IMenuItem[] = [];
@@ -213,28 +223,33 @@ export class DeesAppuiBase extends DeesElement {
         @profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
       ></dees-appui-appbar>
       <div class="maingrid">
-        <dees-appui-mainmenu
+        ${this.mainmenuVisible ? html`
-          .logoIcon=${this.mainmenuLogoIcon}
+          <dees-appui-mainmenu
-          .logoText=${this.mainmenuLogoText}
+            .logoIcon=${this.mainmenuLogoIcon}
-          .menuGroups=${this.mainmenuGroups}
+            .logoText=${this.mainmenuLogoText}
-          .bottomTabs=${this.mainmenuBottomTabs}
+            .menuGroups=${this.mainmenuGroups}
-          .tabs=${this.mainmenuTabs}
+            .bottomTabs=${this.mainmenuBottomTabs}
-          .selectedTab=${this.mainmenuSelectedTab}
+            .tabs=${this.mainmenuTabs}
-          .collapsed=${this.mainmenuCollapsed}
+            .selectedTab=${this.mainmenuSelectedTab}
-          @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
+            .collapsed=${this.mainmenuCollapsed}
-          @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
+            @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
-        ></dees-appui-mainmenu>
+            @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
-        <dees-appui-secondarymenu
+          ></dees-appui-mainmenu>
-          .heading=${this.secondarymenuHeading}
+        ` : ''}
-          .groups=${this.secondarymenuGroups}
+        ${this.secondarymenuVisible ? html`
-          .selectedItem=${this.secondarymenuSelectedItem}
+          <dees-appui-secondarymenu
-          .collapsed=${this.secondarymenuCollapsed}
+            .heading=${this.secondarymenuHeading}
-          @item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
+            .groups=${this.secondarymenuGroups}
-          @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
+            .selectedItem=${this.secondarymenuSelectedItem}
-        ></dees-appui-secondarymenu>
+            .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}
           .selectedTab=${this.maincontentSelectedTab}
+          .showTabs=${this.maincontentTabsVisible}
           @tab-select=${(e: CustomEvent) => this.handleContentTabSelect(e)}
         >
           <div class="view-container"></div>
@@ -425,6 +440,34 @@ export class DeesAppuiBase extends DeesElement {
     this.mainmenuCollapsed = collapsed;
   }
 
+  /**
+   * Set main menu visibility
+   */
+  public setMainMenuVisible(visible: boolean): void {
+    this.mainmenuVisible = visible;
+  }
+
+  /**
+   * Set secondary menu collapsed state
+   */
+  public setSecondaryMenuCollapsed(collapsed: boolean): void {
+    this.secondarymenuCollapsed = collapsed;
+  }
+
+  /**
+   * Set secondary menu visibility
+   */
+  public setSecondaryMenuVisible(visible: boolean): void {
+    this.secondarymenuVisible = visible;
+  }
+
+  /**
+   * Set content tabs visibility
+   */
+  public setContentTabsVisible(visible: boolean): void {
+    this.maincontentTabsVisible = visible;
+  }
+
   /**
    * Set a badge on a main menu item
    */

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

@@ -43,6 +43,9 @@ export class DeesAppuiMaincontent extends DeesElement {
   @property({ type: Object })
   accessor selectedTab: interfaces.IMenuItem | null = null;
 
+  @property({ type: Boolean })
+  accessor showTabs: boolean = true;
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -78,6 +81,14 @@ export class DeesAppuiMaincontent extends DeesElement {
         bottom: 0;
         overflow: auto;
       }
+
+      :host([notabs]) .topbar {
+        display: none;
+      }
+
+      :host([notabs]) .content-area {
+        top: 0;
+      }
     `,
   ];
 
@@ -112,8 +123,23 @@ export class DeesAppuiMaincontent extends DeesElement {
     }));
   }
 
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('showTabs')) {
+      if (this.showTabs) {
+        this.removeAttribute('notabs');
+      } else {
+        this.setAttribute('notabs', '');
+      }
+    }
+  }
+
   async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     await super.firstUpdated(_changedProperties);
+    // Apply initial notabs state
+    if (!this.showTabs) {
+      this.setAttribute('notabs', '');
+    }
     // Tab selection is now handled by the dees-appui-tabs component
     // But we need to ensure the tabs component is ready
     const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;

ts_web/elements/interfaces/appconfig.ts

@@ -18,6 +18,10 @@ export type TDeesAppuiBase = HTMLElement & {
   removeMainMenuItem: (groupName: string, tabKey: string) => void;
   setMainMenuSelection: (tabKey: string) => void;
   setMainMenuCollapsed: (collapsed: boolean) => void;
+  setMainMenuVisible: (visible: boolean) => void;
+  setSecondaryMenuCollapsed: (collapsed: boolean) => void;
+  setSecondaryMenuVisible: (visible: boolean) => void;
+  setContentTabsVisible: (visible: boolean) => void;
   setMainMenuBadge: (tabKey: string, badge: string | number) => void;
   clearMainMenuBadge: (tabKey: string) => void;
   setSecondaryMenu: (config: { heading?: string; groups: IMenuGroup[] }) => void;