design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-29 02:55:03 +00:00
parent 76748a81c9
commit 1f37474d3f
5 changed files with 101 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
View File

@@ -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
.logoIcon=${this.mainmenuLogoIcon}
.logoText=${this.mainmenuLogoText}
.menuGroups=${this.mainmenuGroups}
.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}
.selectedItem=${this.secondarymenuSelectedItem}
.collapsed=${this.secondarymenuCollapsed}
@item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
@collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
></dees-appui-secondarymenu>
${this.mainmenuVisible ? html`
<dees-appui-mainmenu
.logoIcon=${this.mainmenuLogoIcon}
.logoText=${this.mainmenuLogoText}
.menuGroups=${this.mainmenuGroups}
.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>
` : ''}
${this.secondarymenuVisible ? html`
<dees-appui-secondarymenu
.heading=${this.secondarymenuHeading}
.groups=${this.secondarymenuGroups}
.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}
.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
*/