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

conversionxl · May 2, 2023 · ea065ba · ea065ba
1 parent 4f66ea9
commit ea065ba
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 9 deletions.
diff --git a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss
@@ -117,3 +117,13 @@ vaadin-context-menu-list-box {
     display: none;
   }
 }
+
+/* stylelint-disable order/properties-order */
+.can-scroll {
+  background-color: var(--lumo-shade-10pct);
+  bottom: 0;
+  position: sticky;
+  text-align:center;
+  width: 100%;
+}
+/* stylelint-enable order/properties-order */
diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -235,23 +235,21 @@ export class CXLMarketingNavElement extends LitElement {
    */
   _onOverlayOpen(e) {
     const overlay = e.target;
+    const overlays = document.querySelectorAll(
+      'vaadin-context-menu-overlay[theme="cxl-marketing-nav"]'
+    );
+    const topLevelOverlay = overlays[0];
+    const listBox = overlay.querySelector('vaadin-context-menu-list-box');
+    const previousOverlay = overlays[overlays.length - 2];
+    const previousListBox = previousOverlay.querySelector('vaadin-context-menu-list-box');
 
     /**
      * Vertically align context menu panels.
      * Check if the child overlay is larger than the top level overlay.
      *
      * @since 2023.02.11
      */
-    const overlays = document.querySelectorAll(
-      'vaadin-context-menu-overlay[theme="cxl-marketing-nav"]'
-    );
-
     if (overlays.length > 1) {
-      const topLevelOverlay = overlays[0];
-      const listBox = overlay.querySelector('vaadin-context-menu-list-box');
-      const previousOverlay = overlays[overlays.length - 2];
-      const previousListBox = previousOverlay.querySelector('vaadin-context-menu-list-box');
-
       requestAnimationFrame(() => {
         if (listBox.offsetHeight > previousListBox.offsetHeight) {
           overlay.style.top = topLevelOverlay.style.top;
@@ -269,6 +267,42 @@ export class CXLMarketingNavElement extends LitElement {
     }
 
     this.submenuOverlay = overlay;
+
+    /**
+     * Add a scroll indicator to let the user know that there are more items in the list.
+     *
+     * @since 2023.05.01
+     * @see https://app.clickup.com/t/861mkj72q
+     */
+
+    // Make sure we are on a desktop
+    if (this.wide) {
+      const canScroll = overlay.querySelector('.can-scroll');
+
+      // Remove the scroll indicator if it exists
+      if (canScroll) {
+        overlay.removeChild(canScroll);
+      }
+
+      if (listBox.offsetHeight > overlay.offsetHeight) {
+        const menuItem = document.createElement('vaadin-context-menu-item');
+
+        menuItem.classList.add('can-scroll');
+        render(html`<vaadin-icon icon="lumo:angle-down"></vaadin-icon>`, menuItem);
+        overlay.appendChild(menuItem);
+
+        // Check if we have scrolled to the bottom
+        overlay.shadowRoot
+          .querySelector("[part='overlay']")
+          .addEventListener('scroll', ({ target }) => {
+            if (Math.ceil(target.scrollTop) === target.scrollHeight - target.offsetHeight) {
+              menuItem.hidden = true;
+            } else {
+              menuItem.hidden = false;
+            }
+          });
+      }
+    }
   }
 
   /**