From 5599c3a8ad28d8bdb7e376759fbe3c981de50903 Mon Sep 17 00:00:00 2001 From: Peter Siska <63866+peschee@users.noreply.github.com> Date: Mon, 11 Mar 2024 16:29:51 +0100 Subject: [PATCH] fix: fixes an issue where nothing was being rendered in the mobile breakpoint when the `main` menu was empty --- .changeset/poor-points-happen.md | 7 + .../data/data-without-main.json | 200 ++++++++++++++++++ .../portal-navigation/src/PortalNavigation.ts | 40 ++-- .../stories/portal-navigation.stories.ts | 17 ++ .../test/PortalNavigation.test.ts | 15 ++ 5 files changed, 258 insertions(+), 21 deletions(-) create mode 100644 .changeset/poor-points-happen.md create mode 100644 packages/portal-navigation/data/data-without-main.json diff --git a/.changeset/poor-points-happen.md b/.changeset/poor-points-happen.md new file mode 100644 index 00000000..5e27d563 --- /dev/null +++ b/.changeset/poor-points-happen.md @@ -0,0 +1,7 @@ +--- +'@inventage-web-components/portal-navigation': minor +--- + +Fixes an issue where nothing was being rendered in the mobile breakpoint when the `main` menu was empty. + +Released as a minor instead of patch since this also add a new behaviour to the mobile breakpoint. diff --git a/packages/portal-navigation/data/data-without-main.json b/packages/portal-navigation/data/data-without-main.json new file mode 100644 index 00000000..52a23bcb --- /dev/null +++ b/packages/portal-navigation/data/data-without-main.json @@ -0,0 +1,200 @@ +{ + "menus": [ + { + "id": "meta", + "items": [ + { + "id": "meta.urgent", + "label": "[!!!]", + "items": [ + { + "label": "Urgent Messages", + "url": "/ebanking/show-urgent-messages", + "application": "ebanking" + }, + { + "label": "Warnings", + "url": "/ebanking/show-warnings", + "application": "ebanking" + } + ] + }, + { + "id": "meta.messages", + "defaultItem": "meta.messages.inbox", + "label": { + "de": "Nachrichten", + "en": "Messages" + }, + "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-mail' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z'/%3E%3Crect x='3' y='5' width='18' height='14' rx='2' /%3E%3Cpolyline points='3 7 12 13 21 7' /%3E%3C/svg%3E", + "items": [ + { + "id": "meta.messages.inbox", + "label": { + "de": "Posteingang", + "en": "Inbox" + }, + "url": "/ebanking/show-messages-inbox", + "application": "ebanking" + }, + { + "label": { + "de": "Postausgang", + "en": "Outbox" + }, + "url": "/ebanking/show-messages-outbox", + "application": "ebanking" + }, + { + "label": { + "de": "Nachricht erfassen", + "en": "Create message" + }, + "url": "/ebanking/create-message", + "application": "ebanking" + } + ] + } + ] + }, + { + "id": "profile", + "dropdown": true, + "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-user' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z'/%3E%3Ccircle cx='12' cy='7' r='4' /%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /%3E%3C/svg%3E", + "label": { + "en": "1001/usr", + "de": "1001/usr" + }, + "items": [ + { + "url": "/ebanking/preferences", + "application": "ebanking", + "label": { + "de": "Einstellungen", + "en": "Preferences" + }, + "items": [ + { + "id": "profile.preferences.userSettings", + "label": { + "de": "Benutzereinstellungen", + "en": "User Settings" + }, + "url": "/ebanking/preferences/user", + "application": "ebanking" + }, + { + "label": { + "de": "Sicherheit", + "en": "Security" + }, + "url": "/ebanking/preferences/security", + "application": "ebanking" + }, + { + "label": { + "de": "Darstellung", + "en": "Presentation" + }, + "url": "/ebanking/preferences/presentation", + "application": "ebanking" + }, + { + "label": { + "de": "Benachrichtigungen", + "en": "Notifications" + }, + "url": "/ebanking/preferences/notification", + "application": "ebanking" + }, + { + "label": { + "de": "Mobiles Banking", + "en": "Mobile Banking" + }, + "url": "/ebanking/preferences/mobile", + "application": "ebanking" + } + ] + }, + { + "defaultItem": "profile.manageCustomerGroups.customerGroups", + "label": { + "de": "Kundengruppen verwalten", + "en": "Manage customer groups" + }, + "items": [ + { + "id": "profile.manageCustomerGroups.customerGroups", + "label": { + "de": "Kundengruppen", + "en": "Customer groups" + }, + "url": "/ebanking/show-customer-groups", + "application": "ebanking" + }, + { + "label": { + "de": "Kundengruppe erstellen", + "en": "Create customer group" + }, + "url": "/ebanking/create-customer-group", + "application": "ebanking" + } + ] + }, + { + "label": { + "de": "Alias verwalten", + "en": "Manage alias" + }, + "url": "/ebanking/show-alias", + "application": "ebanking" + }, + { + "label": { + "de": "Zugriffe Dritter", + "en": "Third party access" + }, + "url": "/ebanking/tpp-access", + "application": "ebanking" + }, + { + "label": { + "de": "Kontakt & Support", + "en": "Contact & support" + }, + "url": "/node/226", + "application": "portal", + "internalRouting": false, + "destination": "extern" + } + ] + }, + { + "id": "logout", + "dropdown": true, + "label": "Logout", + "items": [ + { + "label": { + "de": "Erscheine Offline", + "en": "Appear Offline" + }, + "url": "/portal/api/offline", + "internalRouting": true, + "internalRoutingApplications": ["ebanking"] + }, + { + "label": { + "de": "Logout", + "en": "Logout" + }, + "url": "/portal/api/logout", + "internalRouting": true, + "internalRoutingApplications": ["ebanking"] + } + ] + } + ] +} diff --git a/packages/portal-navigation/src/PortalNavigation.ts b/packages/portal-navigation/src/PortalNavigation.ts index d96a4cd6..8f3ae7b8 100644 --- a/packages/portal-navigation/src/PortalNavigation.ts +++ b/packages/portal-navigation/src/PortalNavigation.ts @@ -559,27 +559,25 @@ export class PortalNavigation extends LitElement { - ${mainMenusEmpty - ? nothing - : html`
- ${!this.isMobileBreakpoint && (menuMain !== nothing || menuSettings !== nothing) - ? html`
- ${menuMain !== nothing ? html`
${menuMain}
` : nothing} - ${menuSettings !== nothing ? html`
${menuSettings}
` : nothing} -
` - : nothing} - ${this.isMobileBreakpoint && this.hamburgerMenuExpanded - ? html` - ${this.renderMetaBar(menuLogout)} - -
- ${this._createTreeTemplate()} -
- -
-
` - : nothing} -
`} + ${html`
+ ${!this.isMobileBreakpoint && (menuMain !== nothing || menuSettings !== nothing) + ? html`
+ ${menuMain !== nothing ? html`
${menuMain}
` : nothing} + ${menuSettings !== nothing ? html`
${menuSettings}
` : nothing} +
` + : nothing} + ${this.isMobileBreakpoint && this.hamburgerMenuExpanded + ? html` + ${this.renderMetaBar(menuLogout)} + +
+ ${this._createTreeTemplate()} +
+ +
+
` + : nothing} +
`} ${!this.isMobileBreakpoint && currentItems !== nothing ? html`
diff --git a/packages/portal-navigation/stories/portal-navigation.stories.ts b/packages/portal-navigation/stories/portal-navigation.stories.ts index 8b77ab74..09ef75e2 100644 --- a/packages/portal-navigation/stories/portal-navigation.stories.ts +++ b/packages/portal-navigation/stories/portal-navigation.stories.ts @@ -145,6 +145,23 @@ Mobile.parameters = { }, }; +/** + * Mobile breakpoint for a menu structure where the main menu is empty. + * + * @param args + * @constructor + */ +export const Mobile_Without_Main: Story = (args: ArgTypes) => Template(args); +Mobile_Without_Main.args = { + src: './data/data-without-main.json', + hamburgerMenuExpanded: true, +}; +Mobile_Without_Main.parameters = { + viewport: { + defaultViewport: 'mobile2', + }, +}; + /** * Story showing all slots. * diff --git a/packages/portal-navigation/test/PortalNavigation.test.ts b/packages/portal-navigation/test/PortalNavigation.test.ts index 185ad89e..16c3b04c 100644 --- a/packages/portal-navigation/test/PortalNavigation.test.ts +++ b/packages/portal-navigation/test/PortalNavigation.test.ts @@ -17,6 +17,7 @@ const configurationData = dataJson as ConfigurationData; const TEST_DATA_JSON_PATH = '/packages/portal-navigation/data/test-data.json!'; const EMPTY_DATA_JSON_PATH = '/packages/portal-navigation/data/empty-data.json!'; +const WITHOUT_MAIN_DATA_JSON_PATH = '/packages/portal-navigation/data/data-without-main.json!'; type WaitUntilOptions = { interval?: number; @@ -218,6 +219,20 @@ describe('', () => { expect(el.shadowRoot!.querySelectorAll('[part~="icon"]').length, 'Renders part="icon"').to.eq(1); expect(el.shadowRoot!.querySelectorAll('[part~="icon-menu-meta"]').length, 'Renders part="icon-menu-meta"').to.eq(1); }); + + it('renders all menus when main menu is missing or empty', async () => { + await setViewport({ width: 600, height: 400 }); + const el: PortalNavigation = await fixture( + html` ` + ); + + el.hamburgerMenuExpanded = true; + await childrenRendered(el, '[part~="menu-tree-meta"]'); + + expect(el.shadowRoot!.querySelector('[part~="menu-tree-meta"]')!).to.be.visible; + expect(el.shadowRoot!.querySelector('[part~="menu-tree-profile"]')!).to.be.visible; + expect(el.shadowRoot!.querySelector('[part~="menu-tree-logout"]')!).to.be.visible; + }); }); describe('Structure', () => {