diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss index e517eccba..3cfd19a80 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -36,7 +36,7 @@ html { 0 #{$cxl-box-shadow-width} 0 0 #{$cxl-box-shadow-color} inset; // cxl-marketing-nav height on desktop - --cxl-marketing-nav-height: 88px; + --cxl-marketing-nav-height: 76px; } // @see https://github.com/conversionxl/aybolit/blob/490e58e71f13c2e8a398959f91b938f9309b41f8/packages/cxl-ui/src/components/cxl-marketing-nav.js#L46 diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss index 44c3d14c2..bdb0073b5 100644 --- a/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss @@ -1,10 +1,57 @@ +:host([theme~="cxl-marketing-nav"]:not(.has-description)) { + padding-top: 0; + padding-bottom: 0; +} + +:host([theme~="cxl-marketing-nav"].section-header) { + color: var(--lumo-body-text-color); + background: var(--lumo-shade-10pct); + font-weight: 600; + text-transform: uppercase; + + ::slotted(.vaadin-context-menu-item--description) { + text-transform: none; + } +} + +:host([theme~="cxl-marketing-nav"].has-description) { + [part="content"] ::slotted(.vaadin-context-menu-item--description) { + font-weight: 400; + } +} + +:host([theme~="cxl-marketing-nav"]:not(.section-header):hover), +:host([theme~="cxl-marketing-nav"]:not(.section-header)[expanded]) { + color: var(--lumo-primary-color); + + &::after { + color: var(--lumo-primary-color); + } +} + +:host([theme~="cxl-marketing-nav"].vaadin-menu-item.vaadin-context-menu-parent-item)::after { + margin-right: 0; + font-size: var(--lumo-icon-size); +} + +@media screen and (min-width: 750px) { + :host([theme~="cxl-marketing-nav"].vaadin-menu-item.back-button-menu-item) { + display: none; + } +} + +:host([theme~="cxl-marketing-nav"]) [part='checkmark'][aria-hidden='true'] { + display: none; +} + ::slotted(a) { // Increase link click surface. display: block; color: inherit !important; /* stylelint-disable-line declaration-no-important */ + text-decoration: none !important; /* stylelint-disable-line declaration-no-important */ } -::slotted(a:not(:hover)) { - text-decoration: none !important; /* stylelint-disable-line declaration-no-important */ +::slotted(a:hover) { + color: var(--lumo-primary-color) !important; /* stylelint-disable-line declaration-no-important */ } diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss index 44ced3165..a746aff66 100644 --- a/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss @@ -12,3 +12,27 @@ box-shadow: inset 0 0 0 ($vaadin-focus-ring-thickness * 0.5) var(--lumo-primary-color); } } + +:host([theme~="cxl-marketing-nav"].vaadin-menu-list-box) { + [part='items'] ::slotted(.vaadin-menu-item) { + padding-right: var(--lumo-space-m); + padding-left: var(--lumo-space-m); + } + + [part="items"] ::slotted(.section-header.vaadin-menu-item:hover:not([disabled])) { + /* revert default vaadin-context-menu-list-box hovering style, without losing other styles styles applied */ + background-color: revert-layer; + } +} + +@media screen and (min-width: 783px) { + :host([theme~="cxl-marketing-nav"]) { + display: block; + width: var(--cxl-vaadin-context-menu-item-max-width); + padding: 0 var(--lumo-space-s); + } +} + +:host([theme~="cxl-marketing-nav"]) [part='items'] ::slotted(.vaadin-menu-item) { + border-radius: 0; +} diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss index 8c5850636..834c585a7 100644 --- a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss @@ -17,16 +17,16 @@ // Theme: cxl-course-dialog :host([theme="cxl-course-dialog"]) { - [part='backdrop'] { + [part="backdrop"] { background-color: var(--cxl-color-black-50pct); } - [part='overlay'] { + [part="overlay"] { width: 100%; max-width: var(--cxl-content-max-width); } - [part='content'] { + [part="content"] { padding: var(--lumo-space-m) var(--lumo-space-m) 0 var(--lumo-space-m); @media #{mq.$small} { @@ -34,7 +34,7 @@ } } - [part='footer'] { + [part="footer"] { background-color: unset; box-shadow: var(--lumo-box-shadow-m); @@ -44,3 +44,34 @@ } } } + +:host([theme~="cxl-marketing-nav"]) [part="content"] { + padding-left: 0; + padding-right: 0; +} + +@media screen and (min-width: 750px) { + :host([theme~="cxl-marketing-nav"]) { + position: relative; + top: 0 !important; /* stylelint-disable-line declaration-no-important */ + right: 0; + bottom: 0; + left: 0 !important; /* stylelint-disable-line declaration-no-important */ + align-items: unset !important; /* stylelint-disable-line declaration-no-important */ + justify-content: unset !important; /* stylelint-disable-line declaration-no-important */ + width: 376px; + margin: 0; + overflow: auto; + visibility: hidden; + opacity: 0; // hide while in the body, to avoid flickering render, show after being moved to the overlays-wrapper element + transition: opacity 0.1s; + } + + :host([theme~="cxl-marketing-nav"]) [part="content"] { + padding: 0; + } + + :host([theme~="cxl-marketing-nav"]) [part="overlay"] { + box-shadow: none; + } +} diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss index 39322f353..0a86cdbde 100644 --- a/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss @@ -1,5 +1,6 @@ :host([theme~="cxl-marketing-nav"]) ::slotted(a[href]:hover) { - text-decoration: underline !important; /* stylelint-disable-line declaration-no-important */ + // text-decoration: underline !important; /* stylelint-disable-line declaration-no-important */ + color: var(--lumo-primary-color) !important; /* stylelint-disable-line declaration-no-important */ } :host([theme~="cxl-marketing-nav"][hidden]) { diff --git a/packages/cxl-ui/scss/cxl-marketing-nav.scss b/packages/cxl-ui/scss/cxl-marketing-nav.scss index 7c537610a..5054b44a1 100644 --- a/packages/cxl-ui/scss/cxl-marketing-nav.scss +++ b/packages/cxl-ui/scss/cxl-marketing-nav.scss @@ -15,7 +15,7 @@ bottom: 0; position: fixed; } - */ +*/ /** * Menu bar containers configuration. @@ -39,12 +39,17 @@ #menu-shadow-items, ::slotted(#menu-global-items) { background-color: var(--lumo-base-color); + + :host([wide]) & { + height: 32px; + background-color: var(--lumo-shade); + } } // Light on dark. ::slotted(#menu-primary-items) { --lumo-tertiary-text-color: var(--lumo-base-color); - background-color: var(--lumo-shade); + background-color: var(--lumo-base-color); } /** diff --git a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss index f8aca02b5..21cdd890b 100644 --- a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss +++ b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss @@ -1,6 +1,24 @@ cxl-marketing-nav { + #menu-global-items { + min-height: 0; + } + + #menu-global-items .menu-item { + color: var(--lumo-shade); + } + #menu-primary-items .menu-item { - color: var(--lumo-tint); + color: var(--lumo-shade); + } + + &[wide] { + #menu-global-items .menu-item { + color: var(--lumo-base-color); + } + + #menu-global-items .menu-item a { + opacity: 0.6; + } } &:not([wide]) { @@ -10,6 +28,46 @@ cxl-marketing-nav { } } +#overlays-wrapper { + display: none; +} + +@media screen and (min-width: 750px) { + #overlays-wrapper { + position: fixed; + z-index: 200; + display: flex; + background-color: var(--lumo-base-color); + border: 1px solid var(--lumo-base-color); + // Use top and bottom border prevent panel divider from reaching full height. + border-top-width: var(--lumo-space-m); + border-bottom-width: var(--lumo-space-m); + border-radius: 6px; + // Second shadow set to emulate border + box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.25), 0 0 1px 1px #d2d5da; + opacity: 1; + transition: opacity 0.2s, left 0.2s; + + vaadin-context-menu-overlay[theme~="cxl-marketing-nav"] { + display: flex; + visibility: visible; + background-color: var(--lumo-base-color); + opacity: 1; // show after being moved to the overlays-wrapper element + transition: all 0.25s; + + + vaadin-context-menu-overlay[theme~="cxl-marketing-nav"] { + border-left: 1px solid var(--lumo-shade-20pct); + } + } + + &[hidden] { + visibility: hidden; + opacity: 0; + transition: all 0.1s; + } + } +} + /** * PARTIALLY CORRECT * Apparently our element styles get hoisted also into `vaadin-overlay` shadow parts. @@ -77,7 +135,7 @@ vaadin-context-menu-item[theme~="cxl-marketing-nav"] { // Restricts menu item description width to max of parent width. vaadin-context-menu-list-box { - --cxl-vaadin-context-menu-item-max-width: fit-content; + --cxl-vaadin-context-menu-item-max-width: 360px; } /** diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js index e38167004..6a83ea531 100644 --- a/packages/cxl-ui/src/components/cxl-marketing-nav.js +++ b/packages/cxl-ui/src/components/cxl-marketing-nav.js @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import { LitElement, html, render } from 'lit'; import { customElement, property, query } from 'lit/decorators.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; @@ -59,6 +60,11 @@ export class CXLMarketingNavElement extends LitElement { return [cxlMarketingNavStyles]; } + // eslint-disable-next-line class-methods-use-this + get overlaysWrapperElement() { + return document.body.querySelector('#overlays-wrapper'); + } + render() { return html` `; } @@ -130,6 +136,21 @@ export class CXLMarketingNavElement extends LitElement { ); } + connectedCallback() { + super.connectedCallback(); + this._boundOnOverlayOpen = this._onOverlayOpen.bind(this); + const overlaysWrapper = document.createElement('div'); + overlaysWrapper.id = 'overlays-wrapper'; + document.body.appendChild(overlaysWrapper); + this._boundSetupSlottedMenuItems = this._setupSlottedMenuItems.bind(this); + } + + disconnectedCallback() { + super.disconnectedCallback(); + document.body.removeEventListener('vaadin-overlay-open', this._boundOnOverlayOpen); + document.body.removeChild(this.overlaysWrapperElement); + } + firstUpdated(changedProperties) { /** * Global styles. @@ -157,24 +178,6 @@ export class CXLMarketingNavElement extends LitElement { */ // eslint-disable-next-line no-param-reassign contextMenu.closeOn = 'backBtnClose'; - - /** - * @todo Needs docblock. - */ - contextMenu.addEventListener('opened-changed', () => { - const listBox = document.querySelector('vaadin-context-menu-list-box'); - let listBoxWidth = parseFloat(getComputedStyle(listBox).getPropertyValue('width')); - - const vaadinMenuItemComputedStyle = getComputedStyle( - listBox.querySelector('.vaadin-menu-item') - ); - - listBoxWidth -= - parseFloat(vaadinMenuItemComputedStyle.paddingLeft) + - parseFloat(vaadinMenuItemComputedStyle.paddingRight) * 2; - - listBox.style.setProperty('--cxl-vaadin-context-menu-item-max-width', `${listBoxWidth}px`); - }); }); /** @@ -221,11 +224,62 @@ export class CXLMarketingNavElement extends LitElement { }, 1000) ); - document.body.addEventListener('vaadin-overlay-open', this._onOverlayOpen.bind(this)); + document.body.addEventListener('vaadin-overlay-open', this._boundOnOverlayOpen); super.firstUpdated(changedProperties); } + /** + * Adjusts the target element's position to fit within the available width. + * + * @param {HTMLElement} target - The target element to adjust. + * @return {string|boolean} The adjusted position value in pixels or `false` if no adjustment is needed. + */ + static _adjustToWidth(target) { + if (target.clientWidth + target.offsetLeft > visualViewport.width) { + return `${ + target.offsetLeft - (target.clientWidth + target.offsetLeft - visualViewport.width) + }px`; + } + return false; + } + + /* + * Setup listeners on nav items to handle overlays events. + */ + _setupSlottedMenuItems() { + const navItems = this.querySelectorAll('vaadin-tab'); + const overlaysWrapper = this.overlaysWrapperElement; + + navItems.forEach((tab) => + tab.addEventListener('click', (e) => { + const overlays = overlaysWrapper.querySelectorAll( + 'vaadin-context-menu-overlay[theme="cxl-marketing-nav"]' + ); + const parentOffset = tab.parentElement.getBoundingClientRect(); + overlaysWrapper.style.top = `${ + parentOffset.y + 0.75 * tab.clientHeight + }px`; + overlaysWrapper.style.left = `${e.clientX}px`; + + [...overlays].forEach((overlay) => { + overlay.close(); + }); + }) + ); + } + + _onOverlayClose(e) { + const overlay = e.target; + if (overlay.parentElement !== this.overlaysWrapperElement) return; + + this.overlaysWrapperElement.removeChild(overlay); + document.body.appendChild(overlay); + if (!this.overlaysWrapperElement.children.length) { + this.overlaysWrapperElement.toggleAttribute('hidden', true); + } + } + /** * Store overlay when triggered for `vaadin-context-menu-item` sub menu. * @@ -235,28 +289,28 @@ export class CXLMarketingNavElement extends LitElement { */ _onOverlayOpen(e) { const overlay = e.target; + overlay.addEventListener('opened-changed', this._onOverlayClose.bind(this)); + + if (window.matchMedia(this._wideMediaQuery).matches) { + const overlays = document.querySelectorAll( + 'vaadin-context-menu-overlay[theme="cxl-marketing-nav"]' + ); + const firstOverlay = overlays[0]; + + if (this.overlaysWrapperElement) { + this.overlaysWrapperElement.style.maxHeight = `${ + window.innerHeight - + (this.overlaysWrapperElement.style?.maxHeight || firstOverlay.offsetTop) + }px`; + + this.overlaysWrapperElement.appendChild(overlay); + this.overlaysWrapperElement.toggleAttribute('hidden', false); + } - /** - * 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; - } - }); + // check if position needs adjusting + this.overlaysWrapperElement.style.left = + this.constructor._adjustToWidth(this.overlaysWrapperElement) || + this.overlaysWrapperElement.style.left; } /** @@ -329,47 +383,56 @@ export class CXLMarketingNavElement extends LitElement { this._createContextMenuItems(item.children); } - if (item.component === 'a') { - const menuItem = document.createElement('vaadin-context-menu-item'); + const menuItem = document.createElement('vaadin-context-menu-item'); + + if (item.sectionheader) { + menuItem.classList.add('section-header'); + + const label = document.createTextNode(item.text); + menuItem.appendChild(label); + + // eslint-disable-next-line no-param-reassign + self[i] = { component: menuItem }; + } else if (item.component === 'a') { const link = document.createElement('a'); - link.href = item.href; - link.text = item.text; + if (item.href) { + link.href = item.href; + link.innerHTML = item.text; + } menuItem.appendChild(link); + // eslint-disable-next-line no-param-reassign + self[i] = { component: menuItem }; + } + + if (item.description) { + const descriptionItem = document.createElement('div'); - // Add `description` element, if WordPress Menu Item has `description` field set. - if (item.description) { - const descriptionItem = document.createElement('div'); - - descriptionItem.classList.add('vaadin-context-menu-item--description'); - - // Set to hidden, to calculate currently opened menu width and use it for description. - descriptionItem.hidden = true; + descriptionItem.classList.add('vaadin-context-menu-item--description'); - render(html`${unsafeHTML(item.description)}`, descriptionItem); + // Set to hidden, to calculate currently opened menu width and use it for description. + descriptionItem.hidden = true; - menuItem.appendChild(descriptionItem); - } + render(html`${unsafeHTML(item.description)}`, descriptionItem); - // eslint-disable-next-line no-param-reassign - self[i] = { component: menuItem }; + menuItem.appendChild(descriptionItem); + menuItem.classList.add('has-description'); } - + if (item.component === 'back') { - const menuItemBack = document.createElement('vaadin-context-menu-item'); const backBtn = document.createElement('vaadin-button'); backBtn.classList.add('context-menu-item-back-button'); backBtn.innerHTML = ' Back'; - menuItemBack.classList.add('back-button-menu-item'); - menuItemBack.appendChild(backBtn); + menuItem.classList.add('back-button-menu-item'); + menuItem.appendChild(backBtn); - menuItemBack.addEventListener('click', this._onBackBtnClick.bind(this)); + menuItem.addEventListener('click', this._onBackBtnClick.bind(this)); // eslint-disable-next-line no-param-reassign - self[i] = { component: menuItemBack }; + self[i] = { component: menuItem }; } }); diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json index cd067bb3c..e5ff95ebe 100644 --- a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json +++ b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json @@ -34,22 +34,20 @@ "component": "a", "href": "https:\/\/conversionxl.com\/institute\/dashboard\/", "id": 35, - "parent": 0, "children": [ { "depth": 1, "text": "See my roadmap", "component": "a", "href": "https:\/\/conversionxl.com\/institute\/dashboard\/roadmap\/", - "id": 43, - "parent": 35 + "id": 351 }, { "depth": 1, "text": "Edit my roadmap", "component": "a", "href": "https:\/\/conversionxl.com\/institute\/roadmap\/individual\/", - "id": 44, + "id": 352, "parent": 35 }, { @@ -57,7 +55,7 @@ "text": "Edit team roadmap", "component": "a", "href": "https:\/\/conversionxl.com\/institute\/roadmap\/team\/", - "id": 45, + "id": 353, "parent": 35 }, { @@ -65,50 +63,177 @@ "text": "See team progress", "component": "a", "href": "https:\/\/conversionxl.com\/institute\/dashboard\/team\/", - "id": 46, + "id": 354, "parent": 35 } ] }, { "depth": 0, - "text": "Minidegrees <\/vaadin-icon>", + "text": "Training <\/vaadin-icon>", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/online-courses\/?_categories=minidegree-programs", + "href": "#", "id": 36, "parent": 0, "children": [ + { + "depth": 1, + "text": "Deep skills", + "description": "Core fundamentals of marketing", + "id": 361, + "parent": 36, + "sectionheader": true + }, { "depth": 1, "text": "Conversion optimization", + "id": 362, + "parent": 36, + "children": [ + { + "depth": 2, + "text": "Brands marketing certificate", + "description": "Lorem ipsum dolor sit amet", + "component": "a", + "href": "#", + "parent": 362 + }, + { + "component": "hr" + }, + { + "depth": 2, + "text": "Audience building", + "component": "a", + "href": "#", + "parent": 362 + }, + { + "depth": 2, + "text": "Brand strategy", + "component": "a", + "href": "#", + "parent": 362 + } + ] + }, + { + "depth": 1, + "text": "Digital analytics", + "id": 363, + "parent": 36, + "children": [ + { + "depth": 2, + "text": "Lorem ipsum", + "description": "Lorem ipsum dolor sit amet", + "component": "a", + "href": "#", + "parent": 363 + }, + { + "component": "hr" + }, + { + "depth": 2, + "text": "Digital Audience building", + "component": "a", + "href": "#", + "parent": 363 + }, + { + "depth": 2, + "text": "Digital Brand strategy", + "component": "a", + "href": "#", + "parent": 363 + } + ] + }, + { + "depth": 1, + "text": "Growth marketing", + "component": "a", + "href": "#", + "id": 364, + "parent": 36, + "children": [] + }, + { + "component": "hr" + }, + { + "depth": 1, + "text": "Broad skills", + "component": "a", + "href": "#", + "description": "Supporting knowledge base for wider success", + "id": 365, + "parent": 36, + "sectionheader": true + }, + { + "depth": 1, + "text": "Brand marketing", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-conversion-optimization\/", - "id": 47, - "parent": 36 + "href": "#", + "id": 366, + "parent": 36, + "children": [] + }, + { + "depth": 1, + "text": "Digital marketing", + "component": "a", + "href": "#", + "id": 367, + "parent": 36, + "children": [] }, { "depth": 1, "text": "Digital psychology and persuasion", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-psychology-persuasion\/", - "id": 48, - "parent": 36 + "href": "#", + "id": 368, + "parent": 36, + "children": [] }, { "depth": 1, - "text": "Growth marketing", + "text": "Ecommerce marketing", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-growth-marketing\/", - "id": 49, - "parent": 36 + "href": "#", + "id": 369, + "parent": 36, + "children": [] }, { "depth": 1, - "text": "Digital analytics", + "text": "Product marketing", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-digital-analytics\/", - "id": 50, - "parent": 36 + "href": "#", + "id": 370, + "parent": 36, + "children": [] + }, + { + "depth": 1, + "text": "Technical content marketing", + "component": "a", + "href": "#", + "id": 371, + "parent": 36, + "children": [] + }, + { + "depth": 1, + "text": "Technical marketing", + "component": "a", + "href": "#", + "id": 372, + "parent": 36, + "children": [] } ] }, diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js b/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js index a4dccfe97..9364ba692 100644 --- a/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js +++ b/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js @@ -8,7 +8,7 @@ export default { title: 'CXL UI/cxl-marketing-nav', }; -export const CXLMarketingNav = () => { +export const CXLMarketingNav = (args) => { useEffect(() => { // Populate `` context menus. const cxlMarketingNavElement = document.querySelector('cxl-marketing-nav'); @@ -16,9 +16,32 @@ export const CXLMarketingNav = () => { cxlMarketingNavElement.contextMenuItems = contextMenuItems; cxlMarketingNavElement.initHeadroom(Headroom); - }, []); + + const htmlEl = document.querySelector('html'); + if (args?.loggedIn) { + htmlEl.classList.add('loggedIn'); + } else { + htmlEl.classList.remove('loggedIn'); + } + }, [args?.loggedIn]); return html` + +