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 8a6ace3535423ac38a748b620da44a969fed8eb9..0ffa09cfae5bbe97169f95db5373801fd063780e 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 @@ -225,4 +225,44 @@ right: 10px; top: 10px; } + + .shortcuts-panel { + &__title { + @include font-size(18px, 22px); + @include font-weight($bold); + //border-bottom: 1px solid var(--grayscale-medium-dark); + color: var(--grayscale-black); + font-family: var(--main-font-family); + letter-spacing: -0.56px; + margin-bottom: 18px; + text-transform: uppercase; + } + &__shortcut-item { + border-bottom: 1px solid var(--grayscale-medium-dark); + &__first { + border-top: 1px solid var(--grayscale-medium-dark); + } + + a { + @include font-size(16px, 22px); + @include font-weight($semibold); + color: var(--grayscale-black); + display: flex; + flex-direction: row; + font-family: var(--main-font-family); + letter-spacing: -0.5px; + padding: 19px 0; + text-decoration: none; + } + + span.shortcut-item__icon { + position: absolute; + right: 0; + + svg { + padding: 4px; + } + } + } + } } 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 c1fd45358156c74c93b2a4609f4a65b01cb3729e..323d9b3720fcd7fdac52cfe9bdac0d9c8706071c 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,11 +118,17 @@ export class HyDesktopMenuLinks { </ul> {shortcuts.length > 0 && ( <ul class="shortcuts-panel"> - {shortcuts.map(({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}) => { + <h2 class="shortcuts-panel__title">{'Shortcuts'}</h2> + {shortcuts.map(({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}, index) => { let target = shortcut_is_external ? '_blank' : '_self'; + let shortcutClass = [ + 'shortcuts-panel__shortcut-item', + index == 0 ? 'shortcuts-panel__shortcut-item__first' : '', + ].join(' '); + return ( - <li class="shortcut-item"> + <li class={shortcutClass}> <a aria-current={shortcut_aria_label} href={shortcut_url} @@ -131,6 +137,9 @@ export class HyDesktopMenuLinks { aria-label={shortcut_aria_label} > <span class="shortcut-item__label">{shortcut_title}</span> + <span class="shortcut-item__icon"> + <hy-icon icon={'hy-icon-arrow-right'} size={24} /> + </span> </a> </li> );