Félix Malfait
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client';
|
|
import { type ReactNode } from 'react';
|
|
import styled from '@emotion/styled';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
import DocsSidebar from '@/app/_components/docs/DocsSideBar';
|
|
import DocsTableContents from '@/app/_components/docs/TableContent';
|
|
import mq from '@/app/_components/ui/theme/mq';
|
|
import { Theme } from '@/app/_components/ui/theme/theme';
|
|
import { type DocsArticlesProps } from '@/content/user-guide/constants/getDocsArticles';
|
|
import {
|
|
isPlaygroundPage,
|
|
shouldShowEmptySidebar,
|
|
} from '@/shared-utils/pathUtils';
|
|
|
|
const StyledContainer = styled.div`
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-bottom: 1px solid ${Theme.background.transparent.medium};
|
|
min-height: calc(100vh - 50px);
|
|
`;
|
|
|
|
const StyledEmptySideBar = styled.div`
|
|
${mq({
|
|
width: '20%',
|
|
display: ['none', 'none', ''],
|
|
})};
|
|
`;
|
|
|
|
export const DocsMainLayout = ({
|
|
children,
|
|
docsIndex,
|
|
}: {
|
|
children: ReactNode;
|
|
docsIndex: DocsArticlesProps[];
|
|
}) => {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<StyledContainer>
|
|
{!isPlaygroundPage(pathname) && <DocsSidebar docsIndex={docsIndex} />}
|
|
{children}
|
|
{shouldShowEmptySidebar(pathname) ? (
|
|
<StyledEmptySideBar />
|
|
) : (
|
|
<DocsTableContents />
|
|
)}
|
|
</StyledContainer>
|
|
);
|
|
};
|