diff --git a/content/menu.yml b/content/menu.yml new file mode 100644 index 00000000..8abb38bd --- /dev/null +++ b/content/menu.yml @@ -0,0 +1,5 @@ +- title: Photos + link: /photos + +- title: Goodies + link: /tag/goodies diff --git a/src/components/molecules/Menu.jsx b/src/components/molecules/Menu.jsx index 3d9ac089..e97c37cc 100644 --- a/src/components/molecules/Menu.jsx +++ b/src/components/molecules/Menu.jsx @@ -6,12 +6,11 @@ import styles from './Menu.module.scss' const query = graphql` query { - allMarkdownRemark(sort: { fields: [fields___date], order: DESC }) { + allMenuYaml { edges { node { - frontmatter { - type - } + title + link } } } @@ -40,21 +39,12 @@ export default class Menu extends PureComponent { { - const posts = data.allMarkdownRemark.edges - const typeSet = new Set() + const { edges } = data.allMenuYaml - posts.forEach(post => { - if (post.node.frontmatter.type) { - typeSet.add(post.node.frontmatter.type) - } - }) - - const typeList = Array.from(typeSet) - - const Types = typeList.map(type => ( -
  • - - {type}s + const MenuItems = edges.map(({ node }) => ( +
  • + + {node.title}
  • )) @@ -62,7 +52,7 @@ export default class Menu extends PureComponent { return ( -
      {Types}
    +
      {MenuItems}
    ) }} diff --git a/src/components/molecules/Menu.module.scss b/src/components/molecules/Menu.module.scss index e435d202..5159c38f 100644 --- a/src/components/molecules/Menu.module.scss +++ b/src/components/molecules/Menu.module.scss @@ -2,11 +2,16 @@ @import 'mixins'; .menu { + @include divider-top; + + margin-top: 0; + padding-top: $spacer / 2; position: absolute; - top: calc(100% + #{$spacer}); + top: calc(100% + #{$spacer / 2}); left: 0; display: flex; flex-wrap: wrap; + justify-content: center; width: 100%; li {