GatsbyJS - How to Add Sidebars
Some of the pages may share the same sidebar, however not sidebars are the same. To select sidebars page-by-page, use the frontmatter.
In markdown, add a sidebar
field to the frontmatter:
---
title: GatsbyJS - Sidebar
sidebar: web
---
Then in page template, first query the sidebar
field:
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
...
frontmatter {
title
sidebar
...
}
...
}
}
`;
Create your sidebars as separate js files in components/sidebars
folder, and make this helper to load them:
const getSidebar = (sidebar) => {
try {
const Sidebar = require("../components/sidebars/" + sidebar + ".js")
.default;
return <Sidebar />;
} catch (e) {
return null;
}
};
Add the sidebar to the template:
export default ({ data }) => {
const sidebar = data.markdownRemark.frontmatter.sidebar;
return (
<Layout>
<div>
<aside id="sidebar">{getSidebar(sidebar)}</aside>
<div id="main">...</div>
</div>
</Layout>
);
};