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 369c64011d514b6863aa09c8ae6ae7c9aad44905..a17bbe74a2a66780a5d3a95f758dd7ee79fc666f 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 @@ -274,9 +274,8 @@ } } - // menu item links + // Second level menu item links &__second-level-menu { - //background-color: var(--grayscale-background-box); background-color: var(--grayscale-white); list-style: none; margin: 0; @@ -316,12 +315,18 @@ &:hover, &:focus { color: var(--link-blue); + + span.external-icon { + svg { + fill: var(--link-blue); + } + } } .label { @include breakpoint($extrawide) { border: none; - margin-left: 12px; + margin: 0 5px 0 12px; padding-top: 12px; padding-bottom: 12px; } @@ -335,6 +340,18 @@ } } } + + span.external-icon { + svg { + fill: var(--brand-main-nearly-black); + transform: rotate(-45deg); + + &:hover, + &:focus { + fill: var(--link-blue); + } + } + } } } } 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 df3bf4afe0ddd8b4a25d5cf343f764cf924fed49..51b48e7d5ef026126ab9383706413afa0d287deb 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 @@ -11,6 +11,7 @@ export interface DesktopLinks { url: string; description: string; menuLinkId: string; + isExternal: string; isActive: string; shortcutsTitle: string; closeButtonTitle: string; @@ -331,6 +332,7 @@ export class HyDesktopMenuLinks { description, label, labelExtra, + isExternal, isActive, shortcutsTitle, closeButtonTitle, @@ -343,6 +345,7 @@ export class HyDesktopMenuLinks { 'desktop-menu-link__label', isActive === 'true' ? 'desktop-menu-link__label--is-active-trail' : '', ].join(' '); + let target = isExternal ? '_blank' : '_self'; menuLinkItems.push( <li> @@ -365,6 +368,7 @@ export class HyDesktopMenuLinks { <a aria-current={label} href={url} + target={target} class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item" menu-link-id={id} > @@ -375,16 +379,24 @@ export class HyDesktopMenuLinks { {description && <span class="description">{description}</span>} </a> <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}> - {items.map(({label, url}) => ( - <li> - <a href={url}> - <span class="heading-icon"> - <hy-icon icon={'hy-icon-caret-right'} size={12} /> - </span> - <span class="label">{label}</span> - </a> - </li> - ))} + {items.map(({label, url, isExternal}) => { + let subitemTarget = isExternal ? '_blank' : '_self'; + return ( + <li> + <a href={url} target={subitemTarget}> + <span class="heading-icon"> + <hy-icon icon={'hy-icon-caret-right'} size={12} /> + </span> + <span class="label">{label}</span> + {isExternal && ( + <span class="external-icon"> + <hy-icon icon={'hy-icon-arrow-right'} size={12} /> + </span> + )} + </a> + </li> + ); + })} </ul> </div> {shortcuts.length > 0 && (