diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index 2113b48f62ccb0b7b09f374578cbf2004d060e78..ab52bcf1c34dba087479632dd101f376391a651a 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -3,12 +3,15 @@
}
.hy-site-header {
- &__menu-desktop {
+ &__menu-desktop-container {
align-items: center;
display: flex;
flex-flow: row;
+ list-style: none;
width: 100%;
+ }
+ &__menu-desktop {
.desktop-menu-link {
color: var(--brand-main-nearly-black);
cursor: pointer;
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index b13b5d9efb90a7d1fe5a76d3a7e36a873ca440e9..f889fad19015ca4adcb9b342447bfd804f1c0ed3 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -118,89 +118,92 @@ export class HyDesktopMenuLinks {
render() {
return (
- <div class="hy-site-header__menu-desktop">
- {this.firstLevelLinksList}
- <div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
- <div class="hy-desktop-menu-panel__desktop-menu">
- <nav role={'navigation'}>
- {this._dataDesktopLinks &&
- this._dataDesktopLinks.map((link) => {
- console.log(link.label);
- console.log(link.shortcuts);
- return (
- <div class="hy-desktop-menu-panel__wrapper">
- <ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}>
- <li class={'first'}>
- <a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}>
- <span class="heading-icon-first">
- <hy-icon icon={'hy-icon-arrow-right'} size={40} />
- </span>
- <span class="hy-menu-item__label">{link.label}</span>
- <span class="hy-menu-item__description">{link.description}</span>
- </a>
- {link.items && (
- <ul class="second" menu-link-id={link.menuLinkId}>
- {link.items.map((subitem) => {
- return (
- <li class={'second'}>
- <a
- aria-current={subitem.label}
- href={subitem.url}
- class=""
- menu-link-id={subitem.menuLinkId}
- >
- <span class="heading-icon-second">
- <hy-icon icon={'hy-icon-caret-right'} size={12} />
- </span>
- <span class="hy-menu-item__label">{subitem.label}</span>
- </a>
- </li>
- );
- })}
- </ul>
- )}
- </li>
- </ul>
- {link.shortcuts.length > 0 && (
- <div class="shortcuts-panel">
- <span class="shortcut-panel__title">{'Shortcuts'}</span>
- {link.shortcuts.map((shortcut_item) => {
- let target = shortcut_item.shortcut_is_external ? '_blank' : '_self';
- return (
- <div class="shortcut-item">
- <a
- aria-current={shortcut_item.shortcut_aria_label}
- href={shortcut_item.shortcut_url}
- class="shortcut-item__link"
- target={target}
- aria-label={shortcut_item.shortcut_aria_label}
- >
- <span class="shortcut-item__label">{shortcut_item.shortcut_title}</span>
+ <nav role={'navigation'} class="hy-site-header__menu-desktop">
+ <ul class="hy-site-header__menu-desktop-container">
+ {this.firstLevelLinksList.map((firstLevelLink) => {
+ return (
+ <li>
+ {firstLevelLink}
+ <div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
+ <div class="hy-desktop-menu-panel__desktop-menu">
+ {this._dataDesktopLinks &&
+ this._dataDesktopLinks.map((link) => {
+ return (
+ <div>
+ <ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}>
+ <li class={'first'}>
+ <a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}>
+ <span class="heading-icon-first">
+ <hy-icon icon={'hy-icon-arrow-right'} size={40} />
+ </span>
+ <span class="hy-menu-item__label">{link.label}</span>
</a>
+ {link.items && (
+ <ul class="second" menu-link-id={link.menuLinkId}>
+ {link.items.map((subitem) => {
+ return (
+ <li class={'second'}>
+ <a
+ aria-current={subitem.label}
+ href={subitem.url}
+ class=""
+ menu-link-id={subitem.menuLinkId}
+ >
+ <span class="heading-icon-second">
+ <hy-icon icon={'hy-icon-caret-right'} size={12} />
+ </span>
+ <span class="hy-menu-item__label">{subitem.label}</span>
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ )}
+ </li>
+ </ul>
+ {link.shortcuts.length > 0 && (
+ <div class="shortcuts-panel">
+ <span class="shortcut-panel__title">{'Shortcuts'}</span>
+ {link.shortcuts.map((shortcut_item) => {
+ let target = shortcut_item.shortcut_is_external ? '_blank' : '_self';
+ return (
+ <div class="shortcut-item">
+ <a
+ aria-current={shortcut_item.shortcut_aria_label}
+ href={shortcut_item.shortcut_url}
+ class="shortcut-item__link"
+ target={target}
+ aria-label={shortcut_item.shortcut_aria_label}
+ >
+ <span class="shortcut-item__label">{shortcut_item.shortcut_title}</span>
+ </a>
+ </div>
+ );
+ })}
</div>
- );
- })}
- </div>
- )}
- </div>
- );
- })}
- </nav>
- </div>
- <button
- onClick={() => this.closeDesktopMenuPanel()}
- class={{
- 'hy-desktop-menu-panel__panel-toggle': true,
- }}
- aria-label="close"
- >
- <span class="hy-desktop-menu-panel__panel-toggle__label">
- CLOSE
- <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
- </span>
- </button>
- </div>
- </div>
+ )}
+ </div>
+ );
+ })}
+ </div>
+ <button
+ onClick={() => this.closeDesktopMenuPanel()}
+ class={{
+ 'hy-desktop-menu-panel__panel-toggle': true,
+ }}
+ aria-label="close"
+ >
+ <span class="hy-desktop-menu-panel__panel-toggle__label">
+ CLOSE
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
+ </span>
+ </button>
+ </div>
+ </li>
+ );
+ })}
+ </ul>
+ </nav>
);
}
}