aofolts
11/22/2018 - 4:48 PM

Gatsby/Contentful Menu Component

  • menu.js
  • menu.module.less
import React, {Component} from 'react'

class Menu extends Component {
  render() {
    return (
      <div className={css.menu}>
        <MenuItems/>
      </div>
    )
  }
}

export default Menu

export const query = graphql`
  {
    allContentfulMenuItem {
      edges {
        node {
          ...primaryMenuItem
        }
      }
    }
  }
`

export const menuItemPageFragment = graphql`
  fragment menuItemPage on Contentful {
    id
    title
    slug
  }
`

export const menuItemCourseCategoryFragment = graphql`
  fragment menuItemCourseCategory on ContentfulCourseCategory {
    id
    title
    slug
  }
`

export const primaryMenuItemFragment = graphql`
  fragment primaryMenuItem on ContentfulMenuItem {
    ...menuItem
    subMenuItems {
      ...menuItem
    }
  }
`

export const menuItemFragment = graphql`
  fragment menuItem on ContentfulMenuItem {
    id
    name
    url
    page {
      ...menuItemPage
      ...menuItemCourseCategory
    }
  }
`