89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import { ActionIcon, Space, createStyles } from '@mantine/core';
|
|
import { useDisclosure } from '@mantine/hooks';
|
|
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
|
|
|
|
import { useConfigContext } from '~/config/provider';
|
|
import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
|
|
import { MobileRibbonSidebarDrawer } from './MobileRibbonSidebarDrawer';
|
|
|
|
export const MobileRibbons = () => {
|
|
const { classes, cx } = useStyles();
|
|
const { config } = useConfigContext();
|
|
const [openedRight, rightSidebar] = useDisclosure(false);
|
|
const [openedLeft, leftSidebar] = useDisclosure(false);
|
|
const screenLargerThanMd = useScreenLargerThan('md');
|
|
|
|
if (screenLargerThanMd || !config) {
|
|
return <></>;
|
|
}
|
|
|
|
const layoutSettings = config.settings.customization.layout;
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
{layoutSettings.enabledLeftSidebar ? (
|
|
<>
|
|
<ActionIcon
|
|
onClick={leftSidebar.open}
|
|
className={cx(classes.button, classes.removeBorderLeft)}
|
|
variant="default"
|
|
>
|
|
<IconChevronRight />
|
|
</ActionIcon>
|
|
<MobileRibbonSidebarDrawer
|
|
onClose={leftSidebar.close}
|
|
opened={openedLeft}
|
|
location="left"
|
|
/>
|
|
</>
|
|
) : (
|
|
<Space />
|
|
)}
|
|
|
|
{layoutSettings.enabledRightSidebar ? (
|
|
<>
|
|
<ActionIcon
|
|
onClick={rightSidebar.open}
|
|
className={cx(classes.button, classes.removeBorderRight)}
|
|
variant="default"
|
|
>
|
|
<IconChevronLeft />
|
|
</ActionIcon>
|
|
<MobileRibbonSidebarDrawer
|
|
onClose={rightSidebar.close}
|
|
opened={openedRight}
|
|
location="right"
|
|
/>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const useStyles = createStyles(() => ({
|
|
root: {
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
pointerEvents: 'none',
|
|
},
|
|
button: {
|
|
height: 100,
|
|
width: 36,
|
|
pointerEvents: 'auto',
|
|
},
|
|
removeBorderLeft: {
|
|
borderTopLeftRadius: 0,
|
|
borderBottomLeftRadius: 0,
|
|
},
|
|
removeBorderRight: {
|
|
borderTopRightRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
},
|
|
}));
|