kopia lustrzana https://github.com/bugout-dev/moonstream
80 wiersze
1.8 KiB
JavaScript
80 wiersze
1.8 KiB
JavaScript
import { Flex, Spinner, Box } from "@chakra-ui/react";
|
|
import { getLayout as getSiteLayout } from "./RootLayout";
|
|
import React, { Suspense, useContext, useEffect } from "react";
|
|
import UIContext from "../core/providers/UIProvider/context";
|
|
import AppNavbar from "../components/AppNavbar";
|
|
import { BACKGROUND_COLOR } from "../core/constants";
|
|
import Sidebar from "../components/Sidebar";
|
|
|
|
const AppLayout = ({ children }) => {
|
|
const ui = useContext(UIContext);
|
|
|
|
useEffect(() => {
|
|
ui.setAppView(true);
|
|
return () => {
|
|
ui.setAppView(false);
|
|
};
|
|
// eslint-disable-next-line
|
|
}, []);
|
|
|
|
return (
|
|
<Flex
|
|
id="JournalsWrapper"
|
|
bgColor={BACKGROUND_COLOR}
|
|
flexGrow={1}
|
|
maxH="100%"
|
|
w="100%"
|
|
overflow="hidden"
|
|
direction="column"
|
|
pb="85px"
|
|
>
|
|
{(!ui.isAppReady || !ui.isLoggedIn) && (
|
|
<Spinner
|
|
position="absolute"
|
|
top="50%"
|
|
left="50%"
|
|
size="xl"
|
|
speed="1s"
|
|
zIndex={1011}
|
|
/>
|
|
)}
|
|
{(!ui.isAppReady || !ui.isLoggedIn) && (
|
|
<Box
|
|
position="absolute"
|
|
top="0"
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
bg="rgba(0,0,0,0.7)"
|
|
zIndex={1010}
|
|
/>
|
|
)}
|
|
<Flex
|
|
direction={"column"}
|
|
bgColor={BACKGROUND_COLOR}
|
|
borderBottom="1px solid white"
|
|
id="Navbar"
|
|
>
|
|
<AppNavbar />
|
|
</Flex>
|
|
<Flex
|
|
direction="row"
|
|
// id="Bugout"
|
|
className="Main"
|
|
w="100%"
|
|
h="100%"
|
|
maxH="100%"
|
|
>
|
|
<Suspense fallback="">
|
|
<Sidebar />
|
|
</Suspense>
|
|
{ui.isAppReady && ui.isLoggedIn && children}
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export const getLayout = (page) => getSiteLayout(<AppLayout>{page}</AppLayout>);
|
|
|
|
export default AppLayout;
|