56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import React, { useContext, useEffect, useState } from 'react';
|
|
import { AppShell, useMantineTheme, } from "@mantine/core"
|
|
import { HeaderAction } from './widgets/header/HeaderAction';
|
|
import { testHeaderLinks } from './widgets/header/header.links';
|
|
import AppRouter from './router/AppRouter';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { Context } from '.';
|
|
import SideBar from './shared/components/SideBar';
|
|
|
|
const queryClient = new QueryClient()
|
|
|
|
const AppBody = () => {
|
|
useEffect(() => {
|
|
console.log("render Main")
|
|
})
|
|
|
|
const [leftSideBar, setLeftSidebar] = useState(false)
|
|
const [rightSideBar, setRightSidebar] = useState(false)
|
|
|
|
|
|
const leftSideBarIsHidden = (isHidden: boolean) => {
|
|
setLeftSidebar(!isHidden)
|
|
}
|
|
const rightSideBarIsHidden = (isHidden: boolean) => {
|
|
setRightSidebar(!isHidden)
|
|
}
|
|
|
|
const theme = useMantineTheme();
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<AppShell
|
|
styles={{
|
|
main: {
|
|
paddingLeft: !leftSideBar ? "3em" : '',
|
|
paddingRight: !rightSideBar ? '3em' : '',
|
|
background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : undefined,
|
|
},
|
|
}}
|
|
navbarOffsetBreakpoint="sm"
|
|
asideOffsetBreakpoint="sm"
|
|
|
|
header={
|
|
<HeaderAction links={testHeaderLinks.links} />
|
|
}
|
|
aside={
|
|
<SideBar isHidden={rightSideBarIsHidden} side="right" />
|
|
}
|
|
>
|
|
<AppRouter />
|
|
</AppShell>
|
|
</QueryClientProvider>
|
|
)
|
|
};
|
|
|
|
export default AppBody; |