import { css } from '@emotion/react';
import { Helmet, Outlet, useLocale, useLocation, useOutlet, useRouteMeta, useSiteData } from 'dumi';
import React, { useEffect, useContext, useMemo, type FC } from 'react';
import classNames from 'classnames';
import GlobalStyles from '../../common/GlobalStyles';
import useLocaleValue from '../../hooks/useLocaleValue';
import Footer from '../../slots/Footer';
import Header from '../../slots/Header';
import Homepage from '../HomePageLayout';
import SidebarLayout from '../SidebarLayout';
import SiteContext from '../../slots/SiteContext';
import useSiteToken from '../../hooks/useSiteToken';
import '../../static/style';
const useStyles = () => {
return {
layoutWrap: css`
display: flex;
flex-direction: column;
min-height: 100vh;
`
};
};
const DocLayout: FC = () => {
const outlet = useOutlet();
const locale = useLocale();
const location = useLocation();
const styles = useStyles();
const routeMeta = useRouteMeta();
const title = useLocaleValue('title');
const description = useLocaleValue('description');
const { pathname, hash } = location;
const { loading } = useSiteData();
const { direction } = useContext(SiteContext);
const { token } = useSiteToken();
const { siteTheme } = token;
const content = useMemo(() => {
if (
['', '/'].some((path) => path === pathname) ||
['/index'].some((path) => pathname.startsWith(path))
) {
return (
{outlet || }
);
}
return routeMeta.frontmatter?.sidebar === false || siteTheme.includes('hideSideBar') ? (
) : (
);
}, [outlet, pathname, routeMeta]);
// handle hash change or visit page hash from Link component, and jump after async chunk loaded
useEffect(() => {
const id = hash.replace('#', '');
if (id) {
document.getElementById(decodeURIComponent(id))?.scrollIntoView();
}
}, [loading, hash]);
return (
{`${title || 'dumi-theme-antd'}${description ? `-${description}` : ''}`}
{content}
);
};
export default DocLayout;