Add menu items for resources and project ideas

components/roadmap-header/index.js

@@ -2,10 +2,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft, faClock, faEnvelope, faHandshake } from '@fortawesome/free-solid-svg-icons';
 import { BadgeLink, BadgesList, DarkBadge, PrimaryBadge, SecondaryBadge } from 'components/badges';
 import siteConfig from "content/site";
-import { Description, Header, Title, VersionList } from './style';
+import { Description, Header, Title, MenuItemLink, MenuItems } from './style';
+import Link from 'next/link';
+import classNames from 'classnames';
 
 const RoadmapHeader = ({ roadmap }) => (
-  <Header className="border-bottom">
+  <Header>
     <Title>{ roadmap.title }</Title>
     <Description>{ roadmap.description }</Description>
     <BadgesList className="mt-4">
@@ -39,6 +41,19 @@ const RoadmapHeader = ({ roadmap }) => (
         </PrimaryBadge>
       </BadgeLink>
     </BadgesList>
+
+    <MenuItems className="border-bottom">
+      <Link href={ `${roadmap.url}` } passHref>
+        <MenuItemLink className={ classNames({ active: true, }) }>Landscape</MenuItemLink>
+      </Link>
+      <Link href={ `${roadmap.url}/resources` } passHref>
+        <MenuItemLink className={ classNames({ active: false, }) }>Resources</MenuItemLink>
+      </Link>
+      <Link href={ `${roadmap.url}/resources` } passHref>
+        <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>
+      </Link>
+    </MenuItems>
+
   </Header>
 );
 

components/roadmap-header/style.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const Header = styled.div`
   text-align: center;
-  padding: 45px 30px 30px;
+  padding: 45px 30px 10px;
 `;
 
 export const Title = styled.h1`
@@ -15,3 +15,37 @@ export const Description = styled.p`
   font-size: 16px;
   color: #444444;
 `;
+
+export const MenuItems = styled.div`
+  margin: 35px 0 15px;
+`;
+
+export const MenuItemLink = styled.a`
+  display: inline-block;
+  position: relative;
+  padding: 5px 10px 8px;
+  text-decoration: none;
+  color: rgb(102, 102, 102);
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: capitalize;
+  &.active, &.active:hover {
+    color: #2d2d2d;
+    
+    &:after {
+      position: absolute;
+      content: "";
+      display: block;
+      height: 0;
+      left: 9px;
+      right: 9px;
+      bottom: -1px;
+      border-bottom: 2px solid currentColor;
+    }
+  }
+  
+  &:hover {
+    text-decoration: none;
+    color: #111111;
+  }
+`;