fix: add nav items (#37339)

* fix: add nav items

* fix: clean up

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

@@ -23,16 +23,16 @@ describe('<NavLinks />', () => {
     return acc;
   }, []);
 
-  const expectedLinks = ['/learn', '/portfolio'];
+  const expectedLinks = ['/learn', '/portfolio', '/news', '/forum'];
 
   it('renders to the DOM', () => {
     expect(root).toBeTruthy();
   });
   it('has 2 links', () => {
-    expect(aTags.length === 2).toBeTruthy();
+    expect(aTags.length === 4).toBeTruthy();
   });
 
-  it('has links to learn and portfolio', () => {
+  it('has links to news, forum, learn and portfolio', () => {
     // checks if all links in expected links exist in links
     expect(expectedLinks.every(elem => links.indexOf(elem) > -1)).toBeTruthy();
   });

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

@@ -14,6 +14,16 @@ function NavLinks({ displayMenu }) {
         className={'nav-list' + (displayMenu ? ' display-flex' : '')}
         role='menu'
       >
+        <li className='nav-news' role='menuitem'>
+          <Link external={true} to='/news'>
+            News
+          </Link>
+        </li>
+        <li className='nav-forum' role='menuitem'>
+          <Link external={true} to='/forum'>
+            Forum
+          </Link>
+        </li>
         <li className='nav-projects' role='menuitem'>
           <Link to='/learn'>Projects</Link>
         </li>

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

@@ -86,10 +86,6 @@
   height: 38px;
 }
 
-.nav-list li:hover {
-  background: var(--gray-00);
-}
-
 .nav-list li a:hover {
   color: var(--theme-color);
   text-decoration: none;
@@ -101,6 +97,11 @@
   color: white;
 }
 
+.nav-list li a:focus:hover {
+  color: var(--theme-color);
+  background: white;
+}
+
 .universal-nav-right {
   flex-shrink: 0;
   display: flex;
@@ -128,13 +129,14 @@
   border: 1px solid var(--gray-00);
 }
 
-@media (max-width: 265px) {
+@media (max-width: 355px) {
   .nav-list li a {
     width: 50vw;
+    text-align: center;
   }
 }
 
-@media (max-width: 799px) {
+@media (max-width: 999px) {
   .site-header {
     padding-right: 0;
     padding-left: 0;
@@ -200,7 +202,7 @@
   }
 }
 
-@media (min-width: 800px) {
+@media (min-width: 1000px) {
   .universal-nav-middle {
     flex: 1 0 30%;
     margin-right: 0px;

client/src/components/search/searchBar/searchbar.css

@@ -30,7 +30,7 @@
 }
 
 .fcc_searchBar .ais-Hits {
-  top: 71px;
+  top: 70px;
   width: calc(100vw - 30px);
   left: 15px;
 }
@@ -122,7 +122,7 @@ and arrow keys */
   right: 15px;
 }
 
-@media (min-width: 800px) {
+@media (min-width: 1000px) {
   .ais-SearchBox-input {
     width: 100%;
     max-width: 500px;