From a95a0815e00e71e5e8a18942a6a5b205c07c990c Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Tue, 14 Jan 2025 17:44:33 +0000
Subject: [PATCH] fix(cxl-ui): cxl-marketing-nav menu bar button alignment on
 desktop

https://app.clickup.com/t/86b2hv84w
---
 packages/cxl-ui/scss/cxl-marketing-nav.scss   | 30 ++++++++-----------
 .../cxl-ui/scss/global/cxl-marketing-nav.scss |  5 ++++
 .../src/components/cxl-marketing-nav.js       |  8 ++---
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/cxl-ui/scss/cxl-marketing-nav.scss b/packages/cxl-ui/scss/cxl-marketing-nav.scss
index bd296d79..ccdc8278 100644
--- a/packages/cxl-ui/scss/cxl-marketing-nav.scss
+++ b/packages/cxl-ui/scss/cxl-marketing-nav.scss
@@ -3,6 +3,10 @@
 :host {
   --lumo-clickable-cursor: pointer;
 
+  display: block;
+  background-color: var(--lumo-base-color);
+  border-bottom: 1px solid var(--lumo-shade-5pct);
+
   ::part(menu-bar-button),
   vaadin-menu-bar-button[theme~="cxl-marketing-nav"] {
     min-width: auto;
@@ -11,7 +15,13 @@
   }
 
   ::part(overflow-button) {
+    padding-right: 0;
+    margin-right: 0;
     margin-left: auto;
+
+    &::before {
+      background-color: unset;
+    }
   }
 
   nav {
@@ -22,7 +32,7 @@
     width: 100%;
     max-width: 100vw;
     min-height: var(--cxl-marketing-nav-min-height, 44px);
-    padding: 0 var(--lumo-space-m);
+    padding: 0 var(--cxl-wrap-padding, none);
     overflow: hidden;
 
     &:not([wide]) {
@@ -33,20 +43,10 @@
       .container {
         justify-content: space-between;
 
-        .cxl-logo{
-          margin-left: 0;
-          padding-left: 0;
-        }
-
         .search-button {
           width: 140px;
           color: var(--lumo-shade);
         }
-
-        vaadin-menu-bar::part(overflow-button) {
-          margin-right: 0;
-          padding-right: 0;
-        }
       }
     }
 
@@ -59,6 +59,8 @@
       /* stylelint-disable-next-line selector-no-qualifying-type */
       vaadin-menu-bar-button.cxl-logo {
         min-width: auto;
+        padding-left: 0;
+        margin-left: 0;
       }
     }
 
@@ -82,12 +84,6 @@
       white-space: nowrap;
     }
 
-    /* stylelint-disable-next-line selector-no-qualifying-type */
-    &#menu-global-items, &#menu-primary-items {
-      background-color: var(--lumo-base-color);
-      border-bottom: 1px solid var(--lumo-shade-5pct);
-    }
-
     .vaadin-context-menu-item--dropdown-icon {
       display: none;
     }
diff --git a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss
index c68eded9..4d622328 100644
--- a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss
+++ b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss
@@ -131,3 +131,8 @@ vaadin-context-menu-list-box {
     display: none;
   }
 }
+
+cxl-app-layout[layout="1c-w"] cxl-marketing-nav::part(nav) {
+  max-width: var(--cxl-content-max-width-wide);
+  margin: 0 auto;
+}
diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
index e814faa3..5497015c 100644
--- a/packages/cxl-ui/src/components/cxl-marketing-nav.js
+++ b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -139,7 +139,7 @@ export class CXLMarketingNavElement extends LitElement {
         const { name, items } = group;
 
         return html`
-          <nav id="menu-${name}-items" ?minimal=${this.minimal} ?wide=${this.wide}>
+          <nav id="menu-${name}-items" ?minimal=${this.minimal} part="nav" ?wide=${this.wide}>
             <div class="container">
               ${this.logoBar === name || !this.wide
                 ? html`
@@ -193,12 +193,12 @@ export class CXLMarketingNavElement extends LitElement {
   _renderSearch(group) {
     /**
      * Disable search on mobile.
-     * 
+     *
      * @since 2024.02.14
      * @see https://app.clickup.com/t/86azbhf2a
      */
     return '';
-    
+
     // eslint-disable-next-line no-unreachable
     if (this.minimal || 'primary' !== group.name) return '';
 
@@ -286,7 +286,7 @@ export class CXLMarketingNavElement extends LitElement {
 
       if (classes?.includes('menu-item-help')) {
         menuItemElement.addEventListener('click', () => {
-          Intercom('show');
+          window.Intercom('show');
         });
       }
     }