101 lines
2.6 KiB
JavaScript
101 lines
2.6 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { StaticQuery, graphql } from 'gatsby';
|
|
import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
|
|
|
|
import { NavigationContext } from '../../contexts/GuideNavigationContext';
|
|
import SideNav from './components/guide/SideNav';
|
|
import Spacer from '../helpers/Spacer';
|
|
|
|
import 'prismjs/themes/prism.css';
|
|
import './guide.css';
|
|
|
|
const propTypes = {
|
|
children: PropTypes.any,
|
|
data: PropTypes.shape({
|
|
allNavigationNode: PropTypes.shape({
|
|
edges: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
node: PropTypes.shape({
|
|
dashedName: PropTypes.string,
|
|
isStubbed: PropTypes.bool,
|
|
path: PropTypes.string,
|
|
title: PropTypes.string
|
|
})
|
|
})
|
|
)
|
|
})
|
|
}),
|
|
location: PropTypes.object
|
|
};
|
|
|
|
const Layout = ({ children }) => (
|
|
<StaticQuery
|
|
query={graphql`
|
|
query LayoutQuery {
|
|
allNavigationNode {
|
|
edges {
|
|
node {
|
|
dashedName
|
|
hasChildren
|
|
isStubbed
|
|
parentPath
|
|
path
|
|
title
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`}
|
|
render={data => {
|
|
const { edges } = data.allNavigationNode;
|
|
const pages = edges.map(edge => edge.node);
|
|
return (
|
|
<NavigationContext>
|
|
{({
|
|
toggleDisplaySideNav,
|
|
displaySideNav,
|
|
expandedState,
|
|
toggleExpandedState
|
|
}) => (
|
|
<Fragment>
|
|
<Spacer size={2} />
|
|
<Grid>
|
|
<Row>
|
|
<Col
|
|
md={4}
|
|
smHidden={!displaySideNav}
|
|
xsHidden={!displaySideNav}
|
|
>
|
|
<SideNav
|
|
expandedState={expandedState}
|
|
pages={pages}
|
|
toggleDisplaySideNav={toggleDisplaySideNav}
|
|
toggleExpandedState={toggleExpandedState}
|
|
/>
|
|
</Col>
|
|
<Col
|
|
className='content'
|
|
md={8}
|
|
smHidden={displaySideNav}
|
|
xsHidden={displaySideNav}
|
|
>
|
|
<main className='main' id='main' tabIndex='-1'>
|
|
{children}
|
|
</main>
|
|
</Col>
|
|
</Row>
|
|
</Grid>
|
|
</Fragment>
|
|
)}
|
|
</NavigationContext>
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
|
|
Layout.displayName = 'Layout';
|
|
Layout.propTypes = propTypes;
|
|
|
|
export default Layout;
|