43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import clsx from "clsx";
|
|
import { FC, HTMLAttributes } from "react";
|
|
import { useMatch } from "react-router-dom";
|
|
|
|
import { Footer } from "@dndbeyond/ttui/components/Footer";
|
|
import { MegaMenu } from "@dndbeyond/ttui/components/MegaMenu";
|
|
import { Sitebar } from "@dndbeyond/ttui/components/Sitebar";
|
|
|
|
import config from "~/config";
|
|
import useUser from "~/hooks/useUser";
|
|
|
|
import styles from "./styles.module.css";
|
|
|
|
const BASE_PATHNAME = config.basePathname;
|
|
|
|
interface LayoutProps extends HTMLAttributes<HTMLDivElement> {}
|
|
|
|
export const Layout: FC<LayoutProps> = ({ children, ...props }) => {
|
|
const isDev = process.env.NODE_ENV === "development";
|
|
const user = useUser();
|
|
const matchSheet = useMatch(`${BASE_PATHNAME}/:characterId/`);
|
|
|
|
// Don't show the navigation in production
|
|
if (!isDev) return <>{children}</>;
|
|
|
|
return (
|
|
<div {...props}>
|
|
{/* TODO: fetch navItems */}
|
|
<div className={styles.siteStyles}>
|
|
<Sitebar user={user as any} navItems={[]} />
|
|
{/* TODO: fetch sources */}
|
|
<MegaMenu enablePartyWizard={true} sources={[]} />
|
|
</div>
|
|
<div className={clsx(["container", styles.devContainer])}>{children}</div>
|
|
{!matchSheet && (
|
|
<div className={styles.siteStyles}>
|
|
<Footer />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|