diff --git a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss index f8aca02b5..c0274cfa0 100644 --- a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss +++ b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss @@ -117,3 +117,14 @@ vaadin-context-menu-list-box { display: none; } } + +/* stylelint-disable order/properties-order */ +.can-scroll { + background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); + bottom: 0; + cursor: pointer; + 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 e38167004..3b9352978 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,35 @@ 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'); + + menuItem.addEventListener('click', () => { + overlay.shadowRoot.querySelector('[part="overlay"]').scrollTop += 100; + }); + + render(html``, menuItem); + overlay.appendChild(menuItem); + } + } } /**