feat: add back the forum nav item (#40060)

client/src/components/Header/Header.test.js

@@ -30,31 +30,14 @@ describe('<NavLinks />', () => {
     const shallow = new ShallowRenderer();
     shallow.render(<AuthOrProfile {...landingPageProps} />);
     const result = shallow.getRenderOutput();
-    // expect(result.props.children).toEqual('Sign In');
-
-    expect(deepChildrenProp(result, 0).children === 'Curriculum').toBeTruthy();
 
     expect(
-      result.props.children[1].props['data-test-label'] === 'landing-small-cta'
+      hasForumNavItem(result) &&
+        hasCurriculumNavItem(result) &&
+        hasSignInButton(result)
     ).toBeTruthy();
   });
 
-  it('has Curriculum and Portfolio links when user signed in on /learn', () => {
-    const defaultUserProps = {
-      user: {
-        username: 'test-user',
-        picture: 'https://freecodecamp.org/image.png'
-      },
-      pending: false
-    };
-    const shallow = new ShallowRenderer();
-    shallow.render(<AuthOrProfile {...defaultUserProps} />);
-    const result = shallow.getRenderOutput();
-
-    expect(hasCurriculumNavItem(result)).toBeTruthy();
-    expect(hasProfileNavItem(result)).toBeTruthy();
-  });
-
   it('has avatar with default border for default users', () => {
     const defaultUserProps = {
       user: {
@@ -120,28 +103,30 @@ describe('<NavLinks />', () => {
   });
 });
 
-const deepChildrenProp = (component, childNumber) =>
-  component.props.children[childNumber].props.children.props;
+const navigationLinks = (component, navItem) => {
+  return component.props.children[0].props.children[navItem].props.children
+    .props;
+};
 
-const hasProfileNavItem = component => {
-  const profileElement = deepChildrenProp(component, 1);
-  return (
-    profileElement.children[0] === 'Profile' &&
-    profileElement.to === '/test-user'
-  );
+const profileNavItem = component => component[2].children[0];
+
+const hasForumNavItem = component => {
+  const { children, to } = navigationLinks(component, 0);
+  return children === 'Forum' && to === 'https://forum.freecodecamp.org';
 };
 
 const hasCurriculumNavItem = component => {
-  const curriculumElement = deepChildrenProp(component, 0);
-  return (
-    curriculumElement.children === 'Curriculum' &&
-    curriculumElement.to === '/learn'
-  );
+  const { children, to } = navigationLinks(component, 1);
+  return children === 'Curriculum' && to === '/learn';
 };
 
+const hasSignInButton = component =>
+  component.props.children[1].props.children === 'Sign In';
+
 const avatarHasClass = (componentTree, classes) => {
+  // componentTree[1].children[0].children[1].props.className
   return (
-    componentTree[1].children[0].children[1].props.className ===
+    profileNavItem(componentTree).children[1].props.className ===
     'avatar-container ' + classes
   );
 };

client/src/components/Header/components/NavLinks.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link, SkeletonSprite, AvatarRenderer } from '../../helpers';
 import PropTypes from 'prop-types';
 import Login from '../components/Login';
+import { forumLocation } from '../../../../../config/env.json';
 
 const propTypes = {
   displayMenu: PropTypes.bool,
@@ -15,6 +16,26 @@ export function AuthOrProfile({ user, pending }) {
   const isTopContributor =
     user && user.yearsTopContributor && user.yearsTopContributor.length > 0;
 
+  const CurriculumAndForumLinks = (
+    <>
+      <li>
+        <Link
+          className='nav-link'
+          external={true}
+          sameTab={true}
+          to={forumLocation}
+        >
+          Forum
+        </Link>
+      </li>
+      <li>
+        <Link className='nav-link' to='/learn'>
+          Curriculum
+        </Link>
+      </li>
+    </>
+  );
+
   if (pending) {
     return (
       <div className='nav-skeleton'>
@@ -24,22 +45,14 @@ export function AuthOrProfile({ user, pending }) {
   } else if (!isUserSignedIn) {
     return (
       <>
-        <li>
-          <Link className='nav-link' to='/learn'>
-            Curriculum
-          </Link>
-        </li>
+        {CurriculumAndForumLinks}
         <Login data-test-label='landing-small-cta'>Sign In</Login>
       </>
     );
   } else {
     return (
       <>
-        <li>
-          <Link className='nav-link' to='/learn'>
-            Curriculum
-          </Link>
-        </li>
+        {CurriculumAndForumLinks}
         <li>
           <Link className='nav-link' to={`/${user.username}`}>
             Profile

client/src/components/Header/components/universalNav.css

@@ -127,7 +127,7 @@
 .nav-skeleton {
   height: var(--header-height);
   margin-right: 15px;
-  width: 200px;
+  width: 350px;
 }
 
 .nav-list .fcc-loader {
@@ -208,7 +208,7 @@
   }
 }
 
-@media (max-width: 999px) {
+@media (max-width: 1079px) {
   .site-header {
     padding-right: 0;
     padding-left: 0;
@@ -274,7 +274,7 @@
   }
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 1080px) {
   .universal-nav-middle {
     flex: 1 0 30%;
     margin-right: 0px;