refactor(cxl-ui): cxl-marketing-nav get mobile groups once

conversionxl · Jan 12, 2024 · c44fa6e · c44fa6e
1 parent 3b7c176
commit c44fa6e
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -88,22 +88,7 @@ export class CXLMarketingNavElement extends LitElement {
    * menu items last in the list by sorting the original this.groups array before
    * flat map operation.
    */
-  @property({ type: Array })
-  get mobileGroups() {
-    // eslint-disable-next-line no-nested-ternary
-    const sorter = (a, b) => ('global' === a.name ? 1 : 'global' === b.name ? -1 : 0);
-    const groups = [...this.groups];
-
-    return [
-      {
-        name: 'primary',
-        items: groups
-          .sort(sorter)
-          .map((group) => group.items.filter((item) => !item.isSearch))
-          .flat(1),
-      },
-    ];
-  }
+  @property({ type: Array }) mobileGroups = [];
 
   get menuItemSearchElement() {
     return this.querySelector('.search-button');
@@ -129,7 +114,6 @@ export class CXLMarketingNavElement extends LitElement {
     });
 
     requestAnimationFrame(() => {
-      this._updateContextMenuItems();
       this._replaceMenuIcon();
       this.initHeadroom();
     });
@@ -140,6 +124,10 @@ export class CXLMarketingNavElement extends LitElement {
       this._updateContextMenuItems();
       this._replaceMenuIcon();
     }
+
+    if (changes.has('groups')) {
+      this.mobileGroups = this.getMobileGroups();
+    }
   }
 
   render() {
@@ -442,4 +430,20 @@ export class CXLMarketingNavElement extends LitElement {
 
     headroom.init();
   }
+
+  getMobileGroups() {
+    // eslint-disable-next-line no-nested-ternary
+    const sorter = (a, b) => ('global' === a.name ? 1 : 'global' === b.name ? -1 : 0);
+    const groups = [...this.groups];
+
+    return [
+      {
+        name: 'primary',
+        items: groups
+          .sort(sorter)
+          .map((group) => group.items.filter((item) => !item.isSearch))
+          .flat(1),
+      },
+    ];
+  }
 }