50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { FC, ReactNode } from "react";
|
|
import { AppShell, Flex, rem } from "@mantine/core";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../redux/store.ts";
|
|
import styles from "./PageWrapper.module.css";
|
|
import { Navbar } from "../../components/Navbar/Navbar.tsx";
|
|
|
|
export type Props = {
|
|
children: ReactNode;
|
|
};
|
|
const PageWrapper: FC<Props> = ({ children }) => {
|
|
const authState = useSelector((state: RootState) => state.auth);
|
|
return (
|
|
<AppShell
|
|
layout={"alt"}
|
|
withBorder={false}
|
|
navbar={
|
|
authState.isAuthorized && !authState.isGuest
|
|
? {
|
|
width: "130px",
|
|
breakpoint: "sm",
|
|
}
|
|
: undefined
|
|
}>
|
|
<AppShell.Navbar>
|
|
{authState.isAuthorized && !authState.isGuest && (
|
|
<Flex
|
|
className={styles["main-container"]}
|
|
h={"100%"}
|
|
w={"100%"}
|
|
pl={rem(20)}
|
|
py={rem(20)}>
|
|
<Navbar />
|
|
</Flex>
|
|
)}
|
|
</AppShell.Navbar>
|
|
<AppShell.Main
|
|
style={
|
|
authState.isGuest
|
|
? { backgroundColor: "var(--mantine-color-dark-8)" }
|
|
: {}
|
|
}
|
|
className={styles["main-container"]}>
|
|
<div className={styles["container"]}>{children}</div>
|
|
</AppShell.Main>
|
|
</AppShell>
|
|
);
|
|
};
|
|
export default PageWrapper;
|