feat(UI): added freeCodeCamp podcast link to nav menu (#52482)

Co-authored-by: Sem Bauke <semboot699@gmail.com>

client/i18n/locales/english/links.json

@@ -21,7 +21,8 @@
   "nav": {
     "contribute": "https://contribute.freecodecamp.org/#/",
     "forum": "https://forum.freecodecamp.org/",
-    "news": "https://freecodecamp.org/news/"
+    "news": "https://freecodecamp.org/news/",
+    "podcast": "https://freecodecamp.libsyn.com/"
   },
   "help": {
     "HTML-CSS": "HTML-CSS",

client/i18n/locales/english/translations.json

@@ -30,6 +30,7 @@
     "sign-out": "Sign out",
     "curriculum": "Curriculum",
     "contribute": "Contribute",
+    "podcast": "Podcast",
     "forum": "Forum",
     "radio": "Radio",
     "profile": "Profile",

client/src/components/Header/components/nav-links.tsx

@@ -242,6 +242,19 @@ function NavLinks({
           <FontAwesomeIcon icon={faExternalLinkAlt} />
         </Link>
       </li>
+      <li key='podcast'>
+        <Link
+          className='nav-link nav-link-flex'
+          external={true}
+          onKeyDown={handleMenuKeyDown}
+          sameTab={false}
+          to={t('links:nav.podcast')}
+        >
+          <span>{t('buttons.podcast')}</span>
+          <span className='sr-only'>, {t('aria.opens-new-window')}</span>
+          <FontAwesomeIcon icon={faExternalLinkAlt} />
+        </Link>
+      </li>
       <li className='nav-line' key='theme'>
         <button
           {...(!currentUserName && { 'aria-describedby': 'theme-sign-in' })}

e2e/header.spec.ts

@@ -120,7 +120,7 @@ test('Clicking the menu button should open the menu', async ({ page }) => {
   await expect(menu).toBeVisible();
 });
 
-test('The menu should contain links to: donate, curriculum, forum, news, radio, and contribute', async ({
+test('The menu should contain links to: donate, curriculum, forum, news, radio, contribute, and podcast', async ({
   page
 }) => {
   const menuButton = page.getByTestId(headerComponentElements.menuButton);
@@ -153,6 +153,10 @@ test('The menu should contain links to: donate, curriculum, forum, news, radio,
     {
       name: translations.buttons.contribute,
       href: links.nav.contribute
+    },
+    {
+      name: translations.buttons.podcast,
+      href: links.nav.podcast
     }
   ];