feat(cxl-ui): near feature parity with old nav component

conversionxl · Oct 10, 2023 · f621126 · f621126
1 parent fcec2a9
commit f621126
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 17 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
@@ -83,8 +83,8 @@
 :host([theme~="cxl-navigation"]) {
   &::part(overlay),
   &::part(content) {
-    height: calc(100vh - 44px);
-    max-height: calc(100vh - 44px);
+    height: calc(100vh - 40px);
+    max-height: calc(100vh - 40px);
   }
 
   &::part(backdrop) {

diff --git a/packages/cxl-ui/scss/cxl-navigation.scss b/packages/cxl-ui/scss/cxl-navigation.scss
@@ -2,7 +2,6 @@
 
 :host {
   --lumo-clickable-cursor: pointer;
-  border-bottom: 1px solid var(--lumo-shade-10pct);
 
   ::part(menu-bar-button) {
     color: var(--lumo-shade);
@@ -51,12 +50,22 @@
     ::part(menu-bar-button),
     ::slotted(.menu-item) {
       white-space: nowrap;
+      min-width: min-content;
+
+      &.menu-item-split-nav {
+        margin-left: auto;
+      }
     }
 
-    ::slotted(.menu-item-split-nav) {
-      margin-left: auto;
+    ::part(menu-bar-button) {
+      ::slotted(.menu-item-split-nav) & {
+        margin-left: auto;
+      }
     }
 
+
+
+
     /* stylelint-disable-next-line selector-no-qualifying-type */
     &#menu-global-items {
       background-color: var(--lumo-shade);
@@ -71,6 +80,7 @@
     /* stylelint-disable-next-line selector-no-qualifying-type */
     &#menu-primary-items {
       background-color: var(--lumo-base-color);
+      border-bottom: 1px solid var(--lumo-shade-10pct);
     }
   }
 }
diff --git a/packages/cxl-ui/src/components/cxl-navigation.js b/packages/cxl-ui/src/components/cxl-navigation.js
@@ -85,14 +85,18 @@ export class CXLNavigationElement extends LitElement {
         return html`
           <nav id="menu-${name}-items" ?minimal=${this._isMobile}>
             <div class="container">
+              ${name === "primary" ? html`
+                <vaadin-menu-bar-button theme="tertiary cxl-navigation">
+                  <a href="https://cxl.com">
+                    <vaadin-icon icon="cxl:logo" style="width: var(--lumo-icon-size-xl, 48px);">
+                    </vaadin-icon>
+                  </a>
+                </vaadin-menu-bar-button>
+                ` 
+                : ''
+              }
               ${this._isMobile
                 ? html`
-                    <vaadin-menu-bar-button theme="tertiary cxl-navigation">
-                      <a href="https://cxl.com">
-                        <vaadin-icon icon="cxl:logo" style="width: var(--lumo-icon-size-xl, 48px);">
-                        </vaadin-icon>
-                      </a>
-                    </vaadin-menu-bar-button>
                     <vaadin-menu-bar-button theme="tertiary cxl-navigation" class="search-button">
                       <a>
                         <vaadin-icon icon="lumo:search"></vaadin-icon> Search
@@ -124,9 +128,13 @@ export class CXLNavigationElement extends LitElement {
     [...document.body.querySelectorAll('vaadin-context-menu-overlay')].at(-1).close();
   }
 
-  createItem({ text, description, sectionheader, component, icon, href, children, depth }) {
+  createItem({ text, description, sectionheader, component, icon, href, children, depth, split }) {
     const item = document.createElement('vaadin-context-menu-item');
 
+    if (split) {
+      item.classList.add('menu-item-split-nav');
+    }
+
     if (component === 'hr') {
       return document.createElement('hr');
     }

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json
@@ -672,6 +672,7 @@
       "text": "Invite team",
       "icon": "plus",
       "component": "a",
+      "split": true,
       "href": "https://conversionxl.com/institute/my-account/teams/",
       "id": 40,
       "parent": 0

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav/cxl.navigation.stories.js b/packages/storybook/cxl-ui/cxl-marketing-nav/cxl.navigation.stories.js
@@ -34,11 +34,6 @@ export const CXLNavigation = (args) => {
       }
     </style>
     <cxl-navigation .contextMenuItems=${contextMenuItems}>
-      <vaadin-menu-bar-button slot="global-before">
-        <a href="https://cxl.com">
-          <vaadin-icon icon="cxl:logo" style="width: var(--lumo-icon-size-xl, 48px);"></vaadin-icon>
-        </a>
-      </vaadin-menu-bar-button>
       <vaadin-menu-bar-button class="menu-item" slot="global-after">
         <a href="https://speero.com/case-studies">Agency case studies</a>
       </vaadin-menu-bar-button>