63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { AppShell, useMantineTheme, } from "@mantine/core";
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useContext, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Context } from '.';
|
|
import AppRouter from './router/AppRouter';
|
|
import { routesPath } from './router/routes.path';
|
|
import SideBar from './shared/components/SideBar';
|
|
import { isProduction } from './shared/env.const';
|
|
import { HeaderAction } from './widgets/header/HeaderAction';
|
|
|
|
const AppBody = () => {
|
|
const { t } = useTranslation()
|
|
|
|
const headerLinks = [
|
|
{ link: routesPath.MAIN_PATH, label: t('header.home') },
|
|
{ link: routesPath.SETTINGS_PATH, label: t('header.settings'), admin: true },
|
|
{ link: routesPath.RECORDINGS_PATH, label: t('header.recordings') },
|
|
{ link: routesPath.HOSTS_PATH, label: t('header.hostsConfig'), admin: true },
|
|
{ link: routesPath.ACCESS_PATH, label: t('header.acessSettings'), admin: true },
|
|
]
|
|
|
|
const { sideBarsStore } = useContext(Context)
|
|
|
|
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();
|
|
|
|
if (!isProduction) console.log("render Main")
|
|
return (
|
|
<AppShell
|
|
styles={{
|
|
main: {
|
|
paddingLeft: !leftSideBar ? "1rem" : '',
|
|
paddingRight: !rightSideBar ? '1rem' : '',
|
|
background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : undefined,
|
|
},
|
|
}}
|
|
navbarOffsetBreakpoint="sm"
|
|
asideOffsetBreakpoint="sm"
|
|
|
|
header={
|
|
<HeaderAction links={headerLinks} />
|
|
}
|
|
aside={
|
|
!sideBarsStore.rightVisible ? <></> :
|
|
<SideBar isHidden={rightSideBarIsHidden} side="right" />
|
|
}
|
|
>
|
|
<AppRouter />
|
|
</AppShell>
|
|
)
|
|
};
|
|
|
|
export default observer(AppBody); |