Skip to content

Commit

Permalink
Add category nav menu (#2682)
Browse files Browse the repository at this point in the history
Adapted from @chris48s’ work from #1842.
  • Loading branch information
paulmelnikow authored Jan 9, 2019
1 parent 7e1b112 commit 06c6f13
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 4 deletions.
53 changes: 51 additions & 2 deletions frontend/components/category-headings.js
Original file line number Diff line number Diff line change
@@ -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 }) => {
Expand Down Expand Up @@ -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 }
4 changes: 2 additions & 2 deletions frontend/components/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 06c6f13

Please sign in to comment.