60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { Grid, Container } from "@mui/material";
|
|
import CookieConsent from "react-cookie-consent";
|
|
import { useCookies } from "react-cookie";
|
|
import { TopNav } from "./TopNav";
|
|
import { Sidebar } from "./Sidebar";
|
|
import { GettingStartedDialog } from "./GettingStartedDialog";
|
|
import { useAppContext } from "./AppProvider";
|
|
// import { Footer } from "./Footer";
|
|
|
|
export const Layout = ({ children }) => {
|
|
const [cookies, setCookie] = useCookies(["cookieConsent"]);
|
|
const consentGranted = cookies.cookieConsent === "true";
|
|
const {
|
|
colors: {
|
|
white,
|
|
almostBlack,
|
|
leafcutterElectricBlue,
|
|
cdrLinkOrange,
|
|
helpYellow,
|
|
},
|
|
} = useAppContext();
|
|
|
|
return (
|
|
<>
|
|
<Grid container direction="column">
|
|
<Grid item>
|
|
<TopNav />
|
|
</Grid>
|
|
<Sidebar open />
|
|
<Grid item sx={{ mt: "100px", ml: "310px" }}>
|
|
<Container sx={{ padding: 2 }}>{children}</Container>
|
|
</Grid>
|
|
<Grid item>{/* <Footer /> */}</Grid>
|
|
</Grid>
|
|
{!consentGranted ? (
|
|
<CookieConsent
|
|
style={{
|
|
zIndex: 1500,
|
|
backgroundColor: helpYellow,
|
|
color: almostBlack,
|
|
borderTop: `1px solid ${leafcutterElectricBlue}`,
|
|
}}
|
|
onAccept={() => setCookie("cookieConsent", "true", { path: "/" })}
|
|
buttonStyle={{
|
|
borderRadius: 500,
|
|
backgroundColor: cdrLinkOrange,
|
|
color: white,
|
|
textTransform: "uppercase",
|
|
padding: "10px 20px",
|
|
fontWeight: "bold",
|
|
fontSize: 14,
|
|
}}
|
|
>
|
|
Leafcutter uses cookies for core funtionality.
|
|
</CookieConsent>
|
|
) : null}
|
|
<GettingStartedDialog />
|
|
</>
|
|
);
|
|
};
|