HomePage Nav Donate Button

Added Donate button to the homepage nagvigation bar pointing to the donate url

Author: VickyAbishek

components/common/header/index.js

@@ -61,6 +61,11 @@ class NavBar extends React.Component {
         path: 'https://coderplex.org/jobs',
         external: true,
       },
+      {
+        title: 'Donate',
+        path: 'https://donate.coderplex.org',
+        external: true,
+      },
     ],
   };
 
@@ -101,22 +106,32 @@ class NavBar extends React.Component {
                 </Link>
               </NavLogo>
               <NavLinks className={this.state.menuOpen ? 'open' : ''}>
-                {this.state.navItems.filter(item => !item.external).map(item => (
-                  <NavLink key={item.path}>
-                    <Link href={item.path}>
-                      <a className={pathName === item.path ? 'active' : ''}>
+                {this.state.navItems
+                  .filter(item => !item.external)
+                  .map(item => (
+                    <NavLink key={item.path}>
+                      <Link href={item.path}>
+                        <a className={pathName === item.path ? 'active' : ''}>
+                          <span>{item.title}</span>
+                        </a>
+                      </Link>
+                    </NavLink>
+                  ))}
+                {this.state.navItems
+                  .filter(item => item.external)
+                  .map(item => (
+                    <NavLink key={item.path}>
+                      <a
+                        href={item.path}
+                        rel="noopener noreferrer"
+                        className={[
+                          pathName === item.path ? 'active' : '',
+                          item.title === 'Donate' ? 'donate_btn' : '',
+                        ].join(' ')}>
                         <span>{item.title}</span>
                       </a>
-                    </Link>
-                  </NavLink>
-                ))}
-                {this.state.navItems.filter(item => item.external).map(item => (
-                  <NavLink key={item.path}>
-                    <a href={item.path} rel="noopener noreferrer" className={pathName === item.path ? 'active' : ''}>
-                      <span>{item.title}</span>
-                    </a>
-                  </NavLink>
-                ))}
+                    </NavLink>
+                  ))}
               </NavLinks>
             </Nav>
           </Container>

components/common/header/index.styles.js

@@ -107,6 +107,11 @@ export const NavLink = styled.li`
         }
       }
     }
+    &.donate_btn {
+      background: #e91e63;
+      color: white;
+      border-radius: 10px;
+    }
     @media(max-width: 885px) {
       width: 100%;
       font-size: 14px;