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 7321fd04f1a87123152fe04e05d5858689ae5be3..2113b48f62ccb0b7b09f374578cbf2004d060e78 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
@@ -90,6 +90,7 @@
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
+ flex-direction: row;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
@@ -111,7 +112,9 @@
a {
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
+ align-items: flex-start;
background-color: var(--grayscale-background-box);
+ flex-direction: column;
letter-spacing: -0.75px;
margin-bottom: 4px;
padding-left: 32px;
@@ -131,6 +134,14 @@
border: none;
margin-left: 14px;
}
+ .hy-menu-item__description {
+ @include font-size(16px, 24px);
+ @include font-weight($semibold);
+ color: var(--grayscale-dark);
+ letter-spacing: 0;
+ margin-left: 14px;
+ margin-bottom: 28px;
+ }
span.heading-icon-first {
position: absolute;
@@ -154,6 +165,8 @@
a {
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
+ align-items: center;
+ flex-direction: row;
letter-spacing: -0.47px;
padding-left: 24px;
padding-right: 24px;
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 c31477cc30a3ffea39f883ca20cbf597d7774f3d..b13b5d9efb90a7d1fe5a76d3a7e36a873ca440e9 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
@@ -1,8 +1,17 @@
+export interface ShortcutLinks {
+ shortcut_title: string;
+ shortcut_url: string;
+ shortcut_is_external: string;
+ shortcut_aria_label: string;
+}
+
export interface DesktopLinks {
label: string;
url: string;
+ description: string;
menuLinkId: string;
items: Array<DesktopLinks>;
+ shortcuts: Array<ShortcutLinks>;
}
import {ColorVariant} from '../../../utils/utils';
@@ -109,69 +118,89 @@ export class HyDesktopMenuLinks {
render() {
return (
- <nav role={'navigation'} class="hy-site-header__menu-desktop">
- <ul>
- {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 (
- <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>
- );
- })}
- </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>
+ <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>
+ </a>
+ </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>
);
}
}