| 1 | import { useMedia, useMediaLayout } from 'use-media' |
| 2 | import { BreadcrumbProps } from './Breadcrumb' |
| 3 | import { NavigationProps } from './Navigation' |
| 4 | import { Desktop } from './layouts/Desktop' |
| 5 | import { Mobile } from './layouts/Mobile' |
| 6 | import { Layout } from 'components/Layout' |
| 7 | |
| 8 | export type LayoutProps = React.PropsWithChildren< |
| 9 | BreadcrumbProps & NavigationProps |
| 10 | > |
| 11 | |
| 12 | const useMediaIsomorphic = |
| 13 | typeof window === 'undefined' ? useMedia : useMediaLayout |
| 14 | |
| 15 | const DocsLayout: React.FC<LayoutProps> = (props) => { |
| 16 | const isDesktop = useMediaIsomorphic({ minWidth: '768px' }, false) |
| 17 | const Container = isDesktop ? Desktop : Mobile |
| 18 | |
| 19 | return ( |
| 20 | <Layout |
| 21 | activeItem="docs" |
| 22 | canonical={`/docs/${props.slug.join('/')}`} |
| 23 | title={[props.breadcrumbs.map((b) => b.title).join(' > '), 'Docs']} |
| 24 | noIndex={!process.env.NEXT_PUBLIC_DOCS} |
| 25 | > |
| 26 | <Container {...props} /> |
| 27 | </Layout> |
| 28 | ) |
| 29 | } |
| 30 | |
| 31 | export { DocsLayout as Layout } |
| 32 |