From 975d4ffe6ff6bbd37227b5988ed820a14c513a7b Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 25 Jan 2021 15:12:46 +0200
Subject: [PATCH] external menu links
---
.../hy-desktop-menu-links.scss | 23 +++++++++++--
.../hy-desktop-menu-links.tsx | 32 +++++++++++++------
2 files changed, 42 insertions(+), 13 deletions(-)
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 6ea5f7d3..79c57eca 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
@@ -266,9 +266,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;
@@ -308,12 +307,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;
}
@@ -327,6 +332,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 03d02953..7b40f935 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;
@@ -307,6 +308,7 @@ export class HyDesktopMenuLinks {
description,
label,
labelExtra,
+ isExternal,
isActive,
shortcutsTitle,
closeButtonTitle,
@@ -319,6 +321,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>
@@ -341,6 +344,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}
>
@@ -351,16 +355,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 && (
--
GitLab