kitten.sh
1import React, { useState, useCallback } from 'react';
2import styled from 'styled-components';
3
4import Article, { ArticleStyling } from './article';
5import Header from './header';
6import Sidebar from '../../components/sidebar';
7
8import burger from '../../assets/burger.svg';
9import closeButton from '../../assets/close.svg';
10
11const Container = styled.div`
12 position: relative;
13 display: flex;
14 flex-direction: row;
15
16 width: 100%;
17 max-width: ${p => p.theme.layout.page};
18 margin: 0 auto;
19 margin-top: ${p => p.theme.layout.header};
20`;
21
22const OpenCloseSidebar = styled.img.attrs(props => ({
23 src: props.sidebarOpen ? closeButton : burger,
24}))`
25 cursor: pointer;
26 display: block;
27 margin: ${p => p.theme.spacing.sm} ${p => p.theme.spacing.md};
28 position: fixed;
29 right: 0;
30 top: 0;
31 z-index: 1;
32
33 @media ${p => p.theme.media.sm} {
34 display: none;
35 }
36`;
37
38const Docs = ({ isLoading, children }) => {
39 const [sidebarOpen, setSidebarOpen] = useState(false);
40
41 const closeSidebar = useCallback(() => {
42 setSidebarOpen(false);
43 }, [setSidebarOpen]);
44
45 return (
46 <>
47 <Header />
48 <Container>
49 <OpenCloseSidebar
50 sidebarOpen={sidebarOpen}
51 onClick={() => setSidebarOpen(prev => !prev)}
52 />
53 {/* load just the styles if Suspense fallback in use */}
54 <Sidebar sidebarOpen={sidebarOpen} closeSidebar={closeSidebar} />
55 {isLoading ? (
56 <ArticleStyling>{children}</ArticleStyling>
57 ) : (
58 <Article>{children}</Article>
59 )}
60 </Container>
61 </>
62 );
63};
64
65export default Docs;