feat: update navigation

https://app.clickup.com/t/861mx0nwm
conversionxl · Jul 5, 2023 · c842a00 · c842a00
1 parent 3bdb785
commit c842a00
Show file tree

Hide file tree

Showing 10 changed files with 260 additions and 108 deletions.
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -30,7 +30,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
@@ -1,3 +1,11 @@
+:host([theme~="cxl-marketing-nav"]:hover) {
+  color: var(--lumo-primary-color);
+}
+
+:host([theme~="cxl-marketing-nav"]:not([dir='rtl']).vaadin-menu-item.vaadin-context-menu-parent-item:hover)::after {
+  color: var(--lumo-primary-color);
+}
+
 ::slotted(a) {
   // Increase link click surface.
   display: block;
@@ -8,3 +16,8 @@
 ::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 */
+  text-decoration: none !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
@@ -12,3 +12,25 @@
     box-shadow: inset 0 0 0 ($vaadin-focus-ring-thickness * 0.5) var(--lumo-primary-color);
   }
 }
+
+:host([theme~="cxl-marketing-nav"]) {
+  box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
+  // box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
+}
+
+@media screen and (min-width: 782px) {
+  :host([theme~="cxl-marketing-nav"]) {
+    width: var(--cxl-vaadin-context-menu-item-max-width);
+    padding: 0 10px;
+  }
+
+  :host([theme~="cxl-marketing-nav"].vaadin-menu-list-box--submenu)::before {
+    position: absolute;
+    content: '';
+    top: 16px;
+    left: 0;
+    bottom: 16px;
+    width: 1px;
+    background-color: var(--lumo-shade-20pct);
+  }
+}
diff --git 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
@@ -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
@@ -1,6 +1,20 @@
 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);
+    }
   }
 
   &:not([wide]) {
@@ -77,7 +91,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: 310px;
 }
 
 /**

diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -157,24 +157,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`);
-      });
     });
 
     /**
@@ -248,14 +230,17 @@ export class CXLMarketingNavElement extends LitElement {
 
     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;
-        }
+        overlay.style.top = topLevelOverlay.style.top;
+
+        const overlayListBox = overlay.getFirstChild();
+        const topLevelOverlayListBox = topLevelOverlay.getFirstChild();
+
+        overlayListBox.classList.add('vaadin-menu-list-box--submenu');
+
+        overlayListBox.style.left = `${ topLevelOverlayListBox.offsetLeft + topLevelOverlayListBox.offsetWidth }px`;
+        overlayListBox.style.height = `${ topLevelOverlayListBox.offsetHeight }px`;
       });
     }
 
@@ -334,7 +319,7 @@ export class CXLMarketingNavElement extends LitElement {
         const link = document.createElement('a');
 
         link.href = item.href;
-        link.text = item.text;
+        link.innerHTML = item.text;
 
         menuItem.appendChild(link);
 

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json
@@ -34,80 +34,193 @@
       "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
         },
         {
           "depth": 1,
           "text": "Edit team roadmap",
           "component": "a",
           "href": "https:\/\/conversionxl.com\/institute\/roadmap\/team\/",
-          "id": 45,
+          "id": 353,
           "parent": 35
         },
         {
           "depth": 1,
           "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 icon=\"lumo:dropdown\"><\/vaadin-icon>",
+      "text": "Training <vaadin-icon icon=\"lumo:dropdown\"><\/vaadin-icon>",
       "component": "a",
-      "href": "https:\/\/conversionxl.com\/institute\/online-courses\/?_categories=minidegree-programs",
+      "href": "#",
       "id": 36,
       "parent": 0,
       "children": [
         {
           "depth": 1,
-          "text": "Conversion optimization",
+          "text": "<b>Deep skills<b>",
+          "description": "Core fundamentals of marketing",
           "component": "a",
-          "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-conversion-optimization\/",
-          "id": 47,
+          "href": "#",
+          "id": 361,
           "parent": 36
         },
         {
           "depth": 1,
-          "text": "Digital psychology and persuasion",
+          "text": "Conversion optimization",
+          "id": 362,
+          "parent": 36,
+          "children": [
+            {
+              "depth": 2,
+              "text": "<b>Brands marketing certificate</b>",
+              "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",
           "component": "a",
-          "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-psychology-persuasion\/",
-          "id": 48,
-          "parent": 36
+          "href": "#",
+          "id": 363,
+          "parent": 36,
+          "children": []
         },
         {
           "depth": 1,
           "text": "Growth marketing",
           "component": "a",
-          "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-growth-marketing\/",
-          "id": 49,
+          "href": "#",
+          "id": 364,
+          "parent": 36,
+          "children": []
+        },
+        {
+          "component": "hr"
+        },
+        {
+          "depth": 1,
+          "text": "<b>Broad skills</b>",
+          "component": "a",
+          "href": "#",
+          "description": "Supporting knowledge base for wider success",
+          "id": 365,
           "parent": 36
         },
         {
           "depth": 1,
-          "text": "Digital analytics",
+          "text": "Brand marketing",
           "component": "a",
-          "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-digital-analytics\/",
-          "id": 50,
+          "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": "#",
+          "id": 368,
+          "parent": 36,
+          "children": []
+        },
+        {
+          "depth": 1,
+          "text": "Ecommerce marketing",
+          "component": "a",
+          "href": "#",
+          "id": 369,
+          "parent": 36,
+          "children": []
+        },
+        {
+          "depth": 1,
+          "text": "Product marketing",
+          "component": "a",
+          "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": []
+        },
+        {
+          "component": "hr"
+        },
+        {
+          "depth": 1,
+          "text": "<b>Fast marketing</b>",
+          "description": "Marketing experimentation - new hot tactics every week, crazy enough they just might work!",
+          "component": "a",
+          "href": "#",
+          "id": 373,
           "parent": 36
         }
       ]