2019-11-12 04:09:29 +01:00
|
|
|
import React, { StatelessComponent, useState, ReactNode } from "react";
|
2019-11-08 03:40:20 +01:00
|
|
|
import Header from './Header';
|
|
|
|
import Sidebar from './Sidebar';
|
2019-12-18 23:54:23 +01:00
|
|
|
import useHierarchy from '../hooks/useHierarchy';
|
2020-06-30 23:14:19 +02:00
|
|
|
import Helmet from 'react-helmet';
|
2019-11-08 03:40:20 +01:00
|
|
|
|
2019-11-12 04:09:29 +01:00
|
|
|
interface LayoutProps {
|
|
|
|
children?: ReactNode
|
|
|
|
pathContext: {
|
|
|
|
slug: string;
|
|
|
|
}
|
|
|
|
}
|
2019-12-18 23:54:23 +01:00
|
|
|
const Layout: StatelessComponent<LayoutProps> = ({ children, pageContext: { slug } }) => {
|
2022-07-22 02:18:04 +02:00
|
|
|
const { setCurrentPath, getVersionPath, getCurrentVersion, getCurrentNode, getDefaultVersion, getVersionMessage } = useHierarchy();
|
2019-11-08 03:40:20 +01:00
|
|
|
const [isToggled, setSidebarOpen] = useState(false);
|
2019-11-12 04:09:29 +01:00
|
|
|
const handleNavigate = () => setSidebarOpen(false);
|
|
|
|
|
2019-12-18 23:54:23 +01:00
|
|
|
setCurrentPath(slug);
|
2020-06-30 23:14:19 +02:00
|
|
|
const ver = getCurrentVersion();
|
|
|
|
const currentNode = getCurrentNode();
|
2022-07-22 02:18:04 +02:00
|
|
|
const versionMessage = getVersionMessage();
|
2019-12-18 23:54:23 +01:00
|
|
|
|
2019-11-08 03:40:20 +01:00
|
|
|
return (
|
|
|
|
<>
|
2022-07-22 02:16:07 +02:00
|
|
|
{currentNode && ver !== getDefaultVersion() && (
|
2020-06-30 23:14:19 +02:00
|
|
|
<Helmet
|
|
|
|
link={[
|
|
|
|
{
|
|
|
|
rel: 'canonical',
|
2022-07-22 02:16:07 +02:00
|
|
|
href: getVersionPath(currentNode, getDefaultVersion()),
|
2020-06-30 23:14:19 +02:00
|
|
|
}
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
)}
|
2019-11-08 03:40:20 +01:00
|
|
|
<Header handleSidebarToggle={() => setSidebarOpen(!isToggled)} />
|
|
|
|
<div className={`docs-wrapper container ${isToggled ? 'sidebar-visible' : ''}`}>
|
2019-11-12 04:09:29 +01:00
|
|
|
<Sidebar onNavigate={handleNavigate} isOpen={isToggled} />
|
|
|
|
<div className="docs-content">
|
|
|
|
<div className="container">
|
2019-11-19 23:46:39 +01:00
|
|
|
<article role="main" className="docs-article">
|
2022-07-22 02:18:04 +02:00
|
|
|
<>
|
|
|
|
{versionMessage}
|
2019-11-12 04:09:29 +01:00
|
|
|
{children}
|
2022-07-22 02:18:04 +02:00
|
|
|
</>
|
2019-11-12 04:09:29 +01:00
|
|
|
</article>
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-11-08 03:40:20 +01:00
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
export default Layout;
|