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 41e9340b585f184a20ae1d6ec1686f9fc4eb8f9e..a5894b12f67cae9feaf94478b9f03f3c5ff1ae70 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 @@ -144,6 +144,7 @@ export class HyDesktopMenuLinks { <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}> @@ -170,11 +171,15 @@ export class HyDesktopMenuLinks { </ul> {link.shortcuts.length > 0 && ( <div class="shortcuts-panel"> - <span class="shortcut-panel__title">{'Shortcuts'}</span> - {link.shortcuts.map((shortcut_item) => { + <div class="shortcuts-panel__title">{'Shortcuts'}</div> + {link.shortcuts.map((shortcut_item, index) => { let target = shortcut_item.shortcut_is_external ? '_blank' : '_self'; + let shortcutClass = [ + 'shortcuts-panel__shortcut-item', + index == 0 ? 'shortcuts-panel__shortcut-item__first' : '', + ].join(' '); return ( - <div class="shortcut-item"> + <div class={shortcutClass}> <a aria-current={shortcut_item.shortcut_aria_label} href={shortcut_item.shortcut_url} @@ -183,6 +188,9 @@ export class HyDesktopMenuLinks { aria-label={shortcut_item.shortcut_aria_label} > <span class="shortcut-item__label">{shortcut_item.shortcut_title}</span> + <span class="shortcut-item__icon"> + <hy-icon icon={'hy-icon-arrow-right'} size={24} /> + </span> </a> </div> );