From ea065bace32a6de7a2553709ca4c6aa6aa132398 Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Tue, 2 May 2023 05:33:53 -0400
Subject: [PATCH] feat(cxl-ui): [cxl-marketing-nav] add scroll indicator for
 large menus

---
 .../cxl-ui/scss/global/cxl-marketing-nav.scss | 10 ++++
 .../src/components/cxl-marketing-nav.js       | 52 +++++++++++++++----
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss
index f8aca02b..c74a1687 100644
--- 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
index e3816700..fc779374 100644
--- a/packages/cxl-ui/src/components/cxl-marketing-nav.js
+++ b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -235,6 +235,13 @@ 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.
@@ -242,16 +249,7 @@ export class CXLMarketingNavElement extends LitElement {
      *
      * @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;
+            }
+          });
+      }
+    }
   }
 
   /**