Adding external icons

hlxsites · Dec 19, 2023 · 5fd837f · 5fd837f
1 parent f09db99
commit 5fd837f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -399,7 +399,7 @@ header nav .nav-sections .nav-drop[aria-expanded="true"] a.icon-arrow {
 
   header nav .nav-sections > ul > li {
     font-weight: 500;
-    font-size: 1.3125rem;
+    font-size: 1.208rem;
     line-height: 1.938rem;
     padding: 0;
     padding-right: 2rem;
@@ -638,3 +638,11 @@ header nav > .nav-secondary .language-selector > ul > li > a {
   animation-name: slide-down;
   transform: translateY(0);
 }
+
+.icon-external:after {
+  display: inline-block;
+  content: url('/blog/fragments/external-link-icon.svg');
+  width: 10px;
+  height: 10px;
+  padding-left: 10px;
+}
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -253,6 +253,19 @@ function addCanadaToLinks(header) {
   }
 }
 
+/**
+ * Adds external link icons to links
+ * @param {Element} header 
+ */
+function addExternalLinkIcons(header) {
+  header.querySelectorAll('a').forEach((anchor) => {
+    const url = new URL(anchor.href);
+    if (url.hostname !== window.location.hostname) {
+      anchor.classList.add('icon-external');
+    }
+  });
+}
+
 /**
  * decorates the header, mainly the nav
  * @param {Element} block The header block element
@@ -340,6 +353,7 @@ export default async function decorate(block) {
     removeTargetBlank(nav);
     addCanadaToLinks(nav);
     addLinkToLogo(nav);
+    addExternalLinkIcons(nav);
 
     const navWrapper = document.createElement('div');
     navWrapper.className = 'nav-wrapper';