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 4d2c3ab98..f8f331bd5 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,4 +1,4 @@
-:host([theme~="cxl-marketing-nav"].section-header) {
+:host([theme~="menu-bar-item"].section-header) {
font-weight: 600;
color: var(--lumo-body-text-color);
text-transform: uppercase;
@@ -8,14 +8,14 @@
}
}
-:host([theme~="cxl-marketing-nav"].has-description) {
+:host([theme~="menu-bar-item"].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~="menu-bar-item"]:not(.section-header):hover),
+:host([theme~="menu-bar-item"]:not(.section-header)[expanded]) {
color: var(--lumo-primary-color);
&::after {
@@ -23,7 +23,7 @@
}
}
-:host([theme~="cxl-marketing-nav"].vaadin-menu-item.vaadin-context-menu-parent-item) {
+:host([theme~="menu-bar-item"].vaadin-menu-item.vaadin-context-menu-parent-item) {
padding-block: 0;
&::after {
@@ -33,12 +33,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~="menu-bar-item"].vaadin-menu-item.back-button-menu-item) {
display: none;
}
}
-:host([theme~="cxl-marketing-nav"]) [part="checkmark"][aria-hidden="true"] {
+:host([theme~="menu-bar-item"]) [part="checkmark"][aria-hidden="true"] {
display: none;
}
@@ -67,4 +67,8 @@
font-weight: 400;
color: var(--lumo-secondary-text-color);
}
+
+ ::slotted(.vaadin-context-menu-item--label) {
+ margin-top: 0 !important;
+ }
}
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
index 7e8e8a854..fedf8df94 100644
--- a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
+++ b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
@@ -79,3 +79,12 @@
display: none;
}
}
+
+:host([theme~="cxl-navigation"]) {
+
+ &::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);
+ }
+}
diff --git a/packages/cxl-ui/scss/cxl-navigation.scss b/packages/cxl-ui/scss/cxl-navigation.scss
index 8450de4fb..73eaa042d 100644
--- a/packages/cxl-ui/scss/cxl-navigation.scss
+++ b/packages/cxl-ui/scss/cxl-navigation.scss
@@ -6,19 +6,39 @@
}
nav {
+ box-sizing: border-box;
display: flex;
+ justify-content: center;
align-items: center;
max-width: 100vw;
+ width: 100%;
padding: 0 var(--lumo-space-m);
+ .container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ max-width: var(--cxl-content-max-width-wide, none);
+ }
+
vaadin-menu-bar {
- max-width: 100%;
+ width: 100%;
+ }
+
+ ::part(menu-bar-button), ::slotted(.menu-item) {
+ white-space: nowrap;
+ }
+
+ ::slotted(.menu-item-split-nav) {
+ margin-left: auto;
}
/* stylelint-disable-next-line selector-no-qualifying-type */
&#menu-global-items {
background-color: var(--lumo-shade);
- ::part(menu-bar-button) {
+
+ ::part(menu-bar-button), ::slotted(.menu-item) {
color: var(--lumo-tint);
}
}
@@ -27,12 +47,5 @@
&#menu-primary-items {
background-color: var(--lumo-base-color);
}
-
- vaadin-context-menu-overlay {
-
- h5 {
- margin-top: 0;
- }
- }
}
}
diff --git a/packages/cxl-ui/src/components/cxl-navigation.js b/packages/cxl-ui/src/components/cxl-navigation.js
index 4563cde9a..a2570dcc1 100644
--- a/packages/cxl-ui/src/components/cxl-navigation.js
+++ b/packages/cxl-ui/src/components/cxl-navigation.js
@@ -1,6 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import { LitElement, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
+import '@conversionxl/cxl-lumo-styles';
import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
import cxlNavigationStyles from '../styles/cxl-navigation-css.js';
import cxlMarketingNavGlobalStyles from '../styles/global/cxl-marketing-nav-css.js';
@@ -47,14 +48,20 @@ export class CXLNavigationElement extends LitElement {
this.requestUpdate('groups')
}
- static createItem({ text, description, sectionheader, component, href }) {
+ static createItem({ text, description, sectionheader, component, icon, href, children, depth }) {
const item = document.createElement('vaadin-context-menu-item');
if (component === 'hr') {
return document.createElement('hr');
}
- if (href) {
+ if (icon) {
+ const vaadinIcon = document.createElement('vaadin-icon');
+ vaadinIcon.setAttribute('icon', `lumo:${icon}`);
+ item.appendChild(vaadinIcon);
+ }
+
+ if (href && !children) {
const link = document.createElement('a');
link.href = href;
link.innerText = text;
@@ -74,6 +81,13 @@ export class CXLNavigationElement extends LitElement {
descriptiondiv.appendChild(document.createTextNode(description));
item.appendChild(descriptiondiv);
}
+
+ if (children?.length && depth === 0) {
+ const vaadinIcon = document.createElement('vaadin-icon');
+ vaadinIcon.setAttribute('icon', 'lumo:dropdown');
+ item.appendChild(vaadinIcon);
+ }
+
return item;
}
@@ -93,9 +107,12 @@ export class CXLNavigationElement extends LitElement {
const { name, items } = group;
return html`
`
})}
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
index 7eda31778..cd5c14fd2 100644
--- 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,23 @@ export const CXLNavigation = (args) => {
}
-
+
-
+
+
+
+
+
wp-admin bar: test nav menu placement