HomePage Nav Donate Button

VickyAbishek · VickyAbishek · commit 7ed07f43be46 · 2019-08-11T00:04:23.000+05:30
Added Donate button to the homepage nagvigation bar pointing to the donate url
diff --git a/components/common/header/index.js b/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>
diff --git a/components/common/header/index.styles.js b/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;

Original file line number	Diff line number	Diff line change
@@ -107,6 +107,11 @@ export const NavLink = styled.li`
`107`	`107`	`}`
`108`	`108`	`}`
`109`	`109`	`}`
	`110`	`+ &.donate_btn {`
	`111`	`+ background: #e91e63;`
	`112`	`+ color: white;`
	`113`	`+ border-radius: 10px;`
	`114`	`+ }`
`110`	`115`	`@media(max-width: 885px) {`
`111`	`116`	`width: 100%;`
`112`	`117`	`font-size: 14px;`