Files
Fulfillment-Frontend/src/pages/PageWrapper/PageWrapper.tsx
2024-03-31 07:36:24 +03:00

32 lines
983 B
TypeScript

import {FC, ReactNode} from "react";
import {AppShell, rem} from "@mantine/core";
import {Navbar} from "../../components/Navbar/Navbar.tsx";
import {useSelector} from "react-redux";
import {RootState} from "../../redux/store.ts";
import styles from './PageWrapper.module.css';
export type Props = {
children: ReactNode;
}
const PageWrapper: FC<Props> = ({children}) => {
const authState = useSelector((state: RootState) => state.auth);
return (
<AppShell
layout={"alt"}
navbar={{width: rem('80px'), breakpoint: "sm"}}
>
<AppShell.Navbar>
{authState.isAuthorized &&
<Navbar/>
}
</AppShell.Navbar>
<AppShell.Main className={styles['main-container']}>
<div className={styles['container']}>
{children}
</div>
</AppShell.Main>
</AppShell>
)
}
export default PageWrapper;