Add category nav menu (#2682)

Adapted from @chris48s’ work from #1842.

frontend/components/category-headings.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+import { Link, NavLink } from 'react-router-dom'
 import { H3 } from './common'
 
 const CategoryHeading = ({ category }) => {
@@ -30,4 +31,52 @@ CategoryHeadings.propTypes = {
   categories: PropTypes.arrayOf(CategoryHeading.propTypes.category).isRequired,
 }
 
-export { CategoryHeading, CategoryHeadings }
+const StyledNav = styled.nav`
+  ul {
+    display: flex;
+
+    min-width: 50%;
+    max-width: 500px;
+
+    margin: 0 auto 20px;
+    padding-inline-start: 0;
+
+    flex-wrap: wrap;
+    justify-content: center;
+
+    list-style-type: none;
+  }
+
+  @media screen and (max-width: 768px) {
+    ul {
+      display: none;
+    }
+  }
+
+  li {
+    margin: 4px 10px;
+  }
+
+  .active {
+    font-weight: 900;
+  }
+`
+
+const CategoryNav = ({ categories }) => (
+  <StyledNav>
+    <ul>
+      {categories.map(({ id, name }) => (
+        <li key={id}>
+          <NavLink to={`/examples/${id}`} activeClassName="active">
+            {name}
+          </NavLink>
+        </li>
+      ))}
+    </ul>
+  </StyledNav>
+)
+CategoryNav.propTypes = {
+  categories: PropTypes.arrayOf(CategoryHeading.propTypes.category).isRequired,
+}
+
+export { CategoryHeading, CategoryHeadings, CategoryNav }

frontend/components/main.js

@@ -17,7 +17,7 @@ import DonateBox from './donate'
 import MarkupModal from './markup-modal'
 import Usage from './usage'
 import Footer from './footer'
-import { CategoryHeading, CategoryHeadings } from './category-headings'
+import { CategoryHeadings, CategoryNav } from './category-headings'
 import BadgeExamples from './badge-examples'
 import { BaseFont } from './common'
 
@@ -99,7 +99,7 @@ export default class Main extends React.Component {
 
     return (
       <div key={id}>
-        <CategoryHeading category={category} />
+        <CategoryNav categories={categories} />
         <BadgeExamples
           definitions={definitions}
           onClick={this.handleExampleSelected}