feat(cxl-ui): re-implement navigation bar

packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss

@@ -1,4 +1,6 @@
-:host([theme~="cxl-marketing-nav"].section-header) {
+@use "../mq";
+
+:host([theme~="cxl-navigation"].section-header) {
   font-weight: 600;
   color: var(--lumo-body-text-color);
   text-transform: uppercase;
@@ -8,14 +10,14 @@
   }
 }
 
-:host([theme~="cxl-marketing-nav"].has-description) {
+:host([theme~="cxl-navigation"].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]) {
+:host([theme~="cxl-navigation"]:not(.section-header):hover),
+:host([theme~="cxl-navigation"]:not(.section-header)[expanded]) {
   color: var(--lumo-primary-color);
 
   &::after {
@@ -33,12 +35,12 @@
 }
 
 @media screen and (min-width: 768px) and (min-height: 768px) {
-  :host([theme~="cxl-marketing-nav"].vaadin-menu-item.back-button-menu-item) {
+  :host([theme~="cxl-navigation"].vaadin-menu-item.back-button-menu-item) {
     display: none;
   }
 }
 
-:host([theme~="cxl-marketing-nav"]) [part="checkmark"][aria-hidden="true"] {
+:host([theme~="cxl-maerketing-nav"]) [part="checkmark"][aria-hidden="true"] {
   display: none;
 }
 
@@ -53,3 +55,32 @@
 ::slotted(a:hover) {
   color: var(--lumo-primary-color) !important; /* stylelint-disable-line declaration-no-important */
 }
+
+/* stylelint-disable-next-line selector-no-qualifying-type */
+::slotted(h5.cxl-navigation-item) {
+  margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+:host {
+  ::slotted(.vaadin-context-menu-item--description) {
+    margin-top: var(--lumo-space-s);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-s);
+    font-weight: 400;
+    color: var(--lumo-secondary-text-color);
+  }
+
+  ::slotted(.vaadin-context-menu-item--label) {
+    margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  ::slotted(.vaadin-context-menu-item--icon) {
+    visibility: hidden;
+  }
+
+  @media (min-width: 568px) and (min-height: 568px) {
+    ::slotted(.vaadin-context-menu-item--icon) {
+      visibility: visible;
+    }
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss

@@ -13,31 +13,26 @@
   }
 }
 
-: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:not(.section-header):hover:not([disabled])) {
+:host([theme~="cxl-navigation"].vaadin-menu-list-box) {
+  [part="items"]
+    ::slotted(.section-header.vaadin-menu-item:not(.section-header):hover:not([disabled])) {
     /* revert default vaadin-context-menu-list-box hovering style, without losing other styles styles applied */
     background-color: revert-layer;
   }
 
-  [part='items'] ::slotted(.vaadin-menu-item.section-header:hover) {
+  [part="items"] ::slotted(.vaadin-menu-item.section-header:hover) {
     background-color: unset;
   }
-
 }
 
 @media screen and (min-width: 768px) and (min-height: 768px) {
-  :host([theme~="cxl-marketing-nav"]) {
+  :host([theme~="cxl-markting-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) {
+:host([theme~="cxl-navigation"]) [part="items"] ::slotted(.vaadin-menu-item) {
   border-radius: 0;
 }

packages/cxl-lumo-styles/scss/themes/vaadin-menu-bar.scss

@@ -0,0 +1,35 @@
+[part="container"] {
+
+  .menu-item-split-nav {
+    /* stylelint-disable-next-line declaration-no-important */
+    margin-left: auto !important;
+  }
+
+  [part="overflow-button"] {
+    ::before {
+      content: none;
+    }
+
+    vaadin-icon {
+      height: var(--lumo-icon-size-s);
+
+      svg {
+        fill: var(--lumo-shade);
+      }
+
+      &.close-icon {
+        display: none;
+      }
+    }
+
+    &[expanded] {
+      vaadin-icon.close-icon {
+        display: block;
+      } 
+
+      vaadin-icon.menu-icon {
+        display: none;
+      }
+    }
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss

@@ -79,3 +79,28 @@
     display: none;
   }
 }
+
+:host([theme~="cxl-navigation"]) {
+  &::part(overlay),
+  &::part(content) {
+    height: calc(100vh - 40px);
+    max-height: calc(100vh - 40px);
+  }
+
+  &::part(backdrop) {
+    display: none;
+  }
+
+  @media (min-width: 568px) and (min-height: 568px) {
+    &::part(overlay),
+    &::part(content) {
+      height: initial;
+      max-height: initial;
+    }
+  }
+
+  &::part(overlay) {
+    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), 0 2px 6px -1px var(--lumo-shade-5pct),
+      0 8px 24px -4px var(--lumo-shade-5pct);
+  }
+}

packages/cxl-lumo-styles/src/themes.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import cxlAccordionCardStyles from './styles/themes/cxl-accordion-card-css.js';
 import cxlCheckoutDetailsStyles from './styles/themes/cxl-checkout-details-css.js';
@@ -6,6 +7,7 @@ import cxlVaadinAccordionStyles from './styles/themes/vaadin-accordion-css.js';
 import cxlVaadinAccordionPanelStyles from './styles/themes/vaadin-accordion-panel-css.js';
 import cxlVaadinContextMenuItemStyles from './styles/themes/vaadin-context-menu-item-css.js';
 import cxlVaadinContextMenuListBoxStyles from './styles/themes/vaadin-context-menu-list-box-css.js';
+import cxlVaadinMenuBarStyles from './styles/themes/vaadin-menu-bar-css.js';
 import cxlVaadinDetailsStyles from './styles/themes/vaadin-details-css.js';
 import cxlVaadinIconStyles from './styles/themes/vaadin-icon-css.js';
 import cxlVaadinHorizontalLayoutStyles from './styles/themes/vaadin-horizontal-layout-css.js';
@@ -37,6 +39,9 @@ registerStyles('vaadin-context-menu-item', cxlVaadinContextMenuItemStyles, {
 registerStyles('vaadin-context-menu-list-box', cxlVaadinContextMenuListBoxStyles, {
   moduleId: 'cxl-vaadin-context-menu-list-box-styles',
 });
+registerStyles('vaadin-menu-bar', cxlVaadinMenuBarStyles, {
+  moduleId: 'cxl-vaadin-menu-bar-styles',
+});
 registerStyles('vaadin-details', cxlVaadinDetailsStyles, {
   moduleId: 'cxl-vaadin-details-styles',
 });

packages/cxl-ui/package.json

@@ -26,6 +26,7 @@
     "@vaadin/icon": "^23.3.7",
     "@vaadin/notification": "^23.3.7",
     "@vaadin/progress-bar": "^23.3.7",
+    "@vaadin/menu-bar": "^23.3.7",
     "@vaadin/tabs": "^23.3.7",
     "@vaadin/text-field": "^23.3.7",
     "@vaadin/tooltip": "^23.3.7",

packages/cxl-ui/scss/cxl-navigation.scss

@@ -0,0 +1,75 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+:host {
+  --lumo-clickable-cursor: pointer;
+
+  ::part(menu-bar-button) {
+    color: var(--lumo-shade);
+    margin-inline: var(--lumo-space-s);
+  }
+
+  ::part(overflow-button) {
+    margin-left: auto;
+  }
+
+  nav {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 100vw;
+    padding: 0 var(--lumo-space-m);
+
+    &[minimal] {
+      vaadin-menu-bar {
+        max-width: 64px;
+      }
+
+      .container {
+        justify-content: space-between;
+
+        .search-button {
+          width: 140px;
+          color: var(--lumo-shade);
+        }
+      }
+    }
+
+    .container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      max-width: var(--cxl-content-max-width-wide, none);
+    }
+
+    vaadin-menu-bar {
+      width: 100%;
+    }
+
+    ::part(menu-bar-button),
+    ::slotted(.menu-item),
+    .menu-item {
+      min-width: min-content;
+      white-space: nowrap;
+    }
+
+    /* stylelint-disable-next-line selector-no-qualifying-type */
+    &#menu-global-items {
+      background-color: var(--lumo-shade);
+
+      /* stylelint-disable-next-line selector-no-qualifying-type */
+      ::part(menu-bar-button),
+      ::slotted(.menu-item) {
+        color: var(--lumo-tint);
+      }
+    }
+
+    /* 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);
+    }
+  }
+}