fix: fixes an issue where nothing was being rendered in the mobile br…

…eakpoint when the `main` menu was empty
inventage · Mar 11, 2024 · 5599c3a · 5599c3a
1 parent da228a2
commit 5599c3a
Show file tree

Hide file tree

Showing 5 changed files with 258 additions and 21 deletions.
diff --git a/.changeset/poor-points-happen.md 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
@@ -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
@@ -559,27 +559,25 @@ export class PortalNavigation extends LitElement {
         </div>
       </header>
 
-      ${mainMenusEmpty
-        ? nothing
-        : html` <main class="main" part="main">
-            ${!this.isMobileBreakpoint && (menuMain !== nothing || menuSettings !== nothing)
-              ? html` <div class="container-max-width inner">
-                  ${menuMain !== nothing ? html` <div class="menu-main menu" part="menu-main menu">${menuMain}</div>` : nothing}
-                  ${menuSettings !== nothing ? html` <div class="menu-settings menu" part="menu-settings menu">${menuSettings}</div>` : nothing}
-                </div>`
-              : nothing}
-            ${this.isMobileBreakpoint && this.hamburgerMenuExpanded
-              ? html` <!-- Meta bar -->
-                  ${this.renderMetaBar(menuLogout)}
-                  <!-- Hamburger Menu Tree Elements -->
-                  <div class="tree-container" part="tree-container">
-                    ${this._createTreeTemplate()}
-                    <div class="slot-tree-bottom">
-                      <slot name="tree-bottom"></slot>
-                    </div>
-                  </div>`
-              : nothing}
-          </main>`}
+      ${html` <main class="main" part="main">
+        ${!this.isMobileBreakpoint && (menuMain !== nothing || menuSettings !== nothing)
+          ? html` <div class="container-max-width inner">
+              ${menuMain !== nothing ? html` <div class="menu-main menu" part="menu-main menu">${menuMain}</div>` : nothing}
+              ${menuSettings !== nothing ? html` <div class="menu-settings menu" part="menu-settings menu">${menuSettings}</div>` : nothing}
+            </div>`
+          : nothing}
+        ${this.isMobileBreakpoint && this.hamburgerMenuExpanded
+          ? html` <!-- Meta bar -->
+              ${this.renderMetaBar(menuLogout)}
+              <!-- Hamburger Menu Tree Elements -->
+              <div class="tree-container" part="tree-container">
+                ${this._createTreeTemplate()}
+                <div class="slot-tree-bottom">
+                  <slot name="tree-bottom"></slot>
+                </div>
+              </div>`
+          : nothing}
+      </main>`}
       ${!this.isMobileBreakpoint && currentItems !== nothing
         ? html` <div class="current" part="current">
             <div class="container-max-width inner">

diff --git 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<ArgTypes> = (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
@@ -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('<portal-navigation>', () => {
       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` <portal-navigation src="${WITHOUT_MAIN_DATA_JSON_PATH}" mobilebreakpoint="600" currentapplication="app1" internalrouting></portal-navigation>`
+      );
+
+      el.hamburgerMenuExpanded = true;
+      await childrenRendered(el, '[part~="menu-tree-meta"]');
+
+      expect(<HTMLElement>el.shadowRoot!.querySelector('[part~="menu-tree-meta"]')!).to.be.visible;
+      expect(<HTMLElement>el.shadowRoot!.querySelector('[part~="menu-tree-profile"]')!).to.be.visible;
+      expect(<HTMLElement>el.shadowRoot!.querySelector('[part~="menu-tree-logout"]')!).to.be.visible;
+    });
   });
 
   describe('Structure', () => {