title: Display different sidebar for each navbar item in React
body: <p>Using gatsby, I want to have different sidebars for each section of the navbar just like in documentation sites like <a href="https://reactjs.org/docs/getting-started.html" rel="nofollow noreferrer">react</a> and <a href="https://docusaurus.io/docs" rel="nofollow noreferrer">docusaurus</a>.</p>
  <p>My MD files are stored in the contents folder where each section has their own folder and I have created subfolders for their categories, like this:</p>
  <pre><code>    |---contents
      |   |---section1
      |   |   |---categoryA
      |   |   |   |---introduction.md
      |   |   |---categoryB
      |   |   |   |---item1.md
      |   |---section2
      |   |   |---categoryC
      |   |   |   |---item2.md
      |   |---section3
      |   |   |---categoryD
      |   |   |   |---item3.md
  </code></pre>
  <p>Here's my code for the navbar menu (I'm using ant design):</p>
  <pre><code>import React, {useEffect} from 'react'
  import { Link } from 'gatsby'
  import { Affix, Menu, Switch } from 'antd'
  import '../styles/app.css'
  
  const Header = () =&gt; {
    return (
      &lt;Affix offsetTop={0}&gt;
        &lt;Menu mode='horizontal' style={{width: '100vw'}}&gt;
          &lt;Menu.Item&gt;
            &lt;Link to='/section1/categoryA/introduction'&gt;
              Section 1
            &lt;/Link&gt;
          &lt;/Menu.Item&gt;
          &lt;Menu.Item&gt;
            &lt;Link to='/section2/categoryC/item2'&gt;
              Section 2
            &lt;/Link&gt;
          &lt;/Menu.Item&gt;
          &lt;Menu.Item&gt;
            &lt;Link to='/section3/categoryD/item3'&gt;
              Section 3
            &lt;/Link&gt;
          &lt;/Menu.Item&gt; 
        &lt;/Menu&gt;
      &lt;/Affix&gt;
    );
  }
   
  export default Header;
  </code></pre>
  <p>The code for generating the sidebar using graphql, and it currently shows all of the categories and its contents:</p>
  <pre><code>import React from 'react';
  import { useStaticQuery, graphql, Link } from 'gatsby';
  import { Affix, Menu } from 'antd';
  import { pathPrefix } from '../../gatsby-config'
  import '../styles/app.css'
  
  
  const Sidebar = () =&gt; {
      const data = useStaticQuery(graphql`
          {
              allMdx(sort: {fields: frontmatter___date, order: DESC}) {
                  distinct(field: frontmatter___category)
                  edges {
                      node {
                          id
                          frontmatter {
                              category
                              path
                              title
                              root
                          }
                      }
                  }
              }
          }
      `)
  
      const { SubMenu } = Menu
  
      const currentPath =
            typeof window !== 'undefined'
              ? window.location.pathname.replace(pathPrefix, '')
              : '/'
  
      const checkCategory = (category) =&gt; {
          let children = []
        
          data.allMdx.edges.map((child) =&gt; {
              if(child.node.frontmatter.category === category) {
                  children.push(child)
              }
          })
        
          return(
              children.map((c) =&gt; (
                  &lt;Menu.Item key={c.node.frontmatter.path} style={{ fontWeight: 400 }}&gt;
                      &lt;Link to={c.node.frontmatter.path}&gt;
                          &lt;div&gt;{c.node.frontmatter.title}&lt;/div&gt;
                      &lt;/Link&gt;
                  &lt;/Menu.Item&gt;
              ))
          )
      }
  
      return (
          &lt;Affix offsetTop={46}&gt;
              &lt;Menu
                  mode=&quot;inline&quot;
                  style={{ minWidth: 250, height: '100%', borderRight: 0 }}
                  selectedKeys={[currentPath]}
              &gt;
                  {data.allMdx.distinct.map((category, i) =&gt;(
                      &lt;SubMenu 
                          key={i} 
                          title={category}
                          style={{ fontWeight: 700 }}&gt;
                              {checkCategory(category)}
                      &lt;/SubMenu&gt;
                  ))}
              &lt;/Menu&gt;
          &lt;/Affix&gt;
      )
  }
   
  export default Sidebar;
  </code></pre>