Added Research to Header and updated color of reports dropdown with underline

client/Routes.jsx

@@ -14,6 +14,7 @@ import Reports from '@components/main/Reports';
 import Privacy from '@components/main/Privacy';
 import Faqs from '@components/main/Faqs';
 import About from '@components/main/About';
+import Research from '@components/main/Research';
 import Contact from '@components/contact/Contact';
 import ContentBottom from '@components/common/ContentBottom';
 
@@ -38,6 +39,7 @@ export default function Routes() {
             <Route path="/reports" component={Reports} />
             <Route path="/privacy" component={Privacy} />
             <Route path="/faqs" component={Faqs} />
+            <Route path="/research" component={Research} />
             <Route path="/about" component={About} />
             <Route path="/contact" component={Contact} />
             <Route path="/">

client/components/Header.jsx

@@ -40,6 +40,12 @@ const useStyles = makeStyles(theme => ({
   menuPaper: {
     backgroundColor: colors.textPrimaryDark,
   },
+  menuItem: {
+    color: 'white',
+    '&:hover': {
+      textDecoration: 'underline',
+    },
+  },
 }));
 
 const activeStyle = {
@@ -89,12 +95,12 @@ const Header = () => {
           classes={{ paper: classes.menuPaper }}
         >
           <Link to="/reports/overview-combined">
-            <MenuItem onClick={handleClose}>
+            <MenuItem onClick={handleClose} className={classes.menuItem}>
               Overview
             </MenuItem>
           </Link>
           <Link to="/reports/nc-summary-comparison">
-            <MenuItem onClick={handleClose}>
+            <MenuItem onClick={handleClose} className={classes.menuItem}>
               Compare Two Neighborhoods
             </MenuItem>
           </Link>
@@ -105,6 +111,9 @@ const Header = () => {
         <NavLink to="/about" className={classes.link} activeStyle={activeStyle}>
           <Button className={classes.button}>About</Button>
         </NavLink>
+        <NavLink to="/research" className={classes.link} activeStyle={activeStyle}>
+          <Button className={classes.button}>Research</Button>
+        </NavLink>
         <NavLink to="/privacy" className={classes.link} activeStyle={activeStyle}>
           <Button className={classes.button}>Privacy</Button>
         </NavLink>

client/components/main/Research.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import {
+  makeStyles,
+  Container,
+  Box,
+  Grid,
+  List,
+  ListItem,
+} from '@material-ui/core';
+import TextHeading from '@components/common/TextHeading';
+import useContentful from '../../hooks/useContentful';
+
+const query = `
+  query {
+    blogPostCollection(order: publishDate_DESC) {
+      items {
+        sys { id }
+        slug
+        title
+        body
+        publishDate
+      }
+    }
+  }
+`;
+
+const useStyles = makeStyles({
+  root: {
+    color: 'black',
+    backgroundColor: 'white',
+    padding: '2em',
+    '& h1': {
+      fontSize: '2.5em',
+    },
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+      display: 'block',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    },
+  },
+});
+
+const Research = () => {
+  const { data, errors } = useContentful(query);
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    if (errors) console.log(errors);
+  }, [errors]);
+
+  return (
+    <>
+      <TextHeading>
+        Research
+      </TextHeading>
+      { data
+        && (
+          <Container className={classes.root} maxWidth="md">
+            <Grid container spacing={2}>
+              <Grid item xs={9}>
+                { data.blogPostCollection.items.map(item => (
+                  <Box key={item.sys.id} style={{ marginBottom: '3em' }}>
+                    <h1 id={`${item.slug}`}>{item.title}</h1>
+                    <h4>
+                      {new Date(item.publishDate).toLocaleDateString()}
+                    </h4>
+                    <ReactMarkdown>{item.body}</ReactMarkdown>
+                  </Box>
+                ))}
+              </Grid>
+              <Grid item xs={3}>
+                <List dense>
+                  { data.blogPostCollection.items.map(item => (
+                    <ListItem key={item.sys.id} component="a" href={`#${item.slug}`}>
+                      {item.title}
+                    </ListItem>
+                  ))}
+                </List>
+              </Grid>
+            </Grid>
+          </Container>
+        )}
+    </>
+  );
+};
+
+export default Research;