feat(cxl-ui): [cxl-marketing-nav] add scroll indicator for large menus

conversionxl · May 2, 2023 · ee5534b · ee5534b
1 parent 05141de
commit ee5534b
Showing 1 changed file with 26 additions and 24 deletions.
diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -274,32 +274,34 @@ export class CXLMarketingNavElement extends LitElement {
      * @since 2023.05.01
      * @see https://app.clickup.com/t/861mkj72q
      */
-    const canScroll = overlay.querySelector('.can-scroll');
 
-    // Remove the scroll indicator if it exists
-    if (canScroll) {
-      overlay.removeChild(canScroll);
-    }
+    // Make sure we are on a desktop
+    if (this.wide) {
+      const canScroll = overlay.querySelector('.can-scroll');
 
-    const menuItem = document.createElement('vaadin-context-menu-item');
-
-    if (listBox.offsetHeight > overlay.offsetHeight) {
-      menuItem.classList.add('can-scroll');
-      render(html`<vaadin-icon icon="lumo:angle-down"></vaadin-icon>`, menuItem);
-      overlay.appendChild(menuItem);
-
-      overlay.shadowRoot
-        .querySelector("[part='overlay'")
-        .addEventListener('scroll', ({ target }) => {
-          // Check if we have scrolled to the bottom
-          if (Math.ceil(target.scrollTop) === target.scrollHeight - target.offsetHeight) {
-            menuItem.hidden = true;
-          } else {
-            menuItem.hidden = false;
-          }
-        });
-    } else {
-      overlay.removeChild(menuItem);
+      // Remove the scroll indicator if it exists
+      if (canScroll) {
+        overlay.removeChild(canScroll);
+      }
+
+      const menuItem = document.createElement('vaadin-context-menu-item');
+
+      if (listBox.offsetHeight > overlay.offsetHeight) {
+        menuItem.classList.add('can-scroll');
+        render(html`<vaadin-icon icon="lumo:angle-down"></vaadin-icon>`, menuItem);
+        overlay.appendChild(menuItem);
+
+        overlay.shadowRoot
+          .querySelector("[part='overlay']")
+          .addEventListener('scroll', ({ target }) => {
+            // Check if we have scrolled to the bottom
+            if (Math.ceil(target.scrollTop) === target.scrollHeight - target.offsetHeight) {
+              menuItem.hidden = true;
+            } else {
+              menuItem.hidden = false;
+            }
+          });
+      }
     }
   }