diff --git a/index.html b/index.html index 2b75bc50d..3856baaf2 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ Graasp Builder -
+
diff --git a/src/components/item/ItemMain.tsx b/src/components/item/ItemMain.tsx index 7fa254b54..bfb9d4d35 100644 --- a/src/components/item/ItemMain.tsx +++ b/src/components/item/ItemMain.tsx @@ -3,7 +3,7 @@ import { Box, Divider, Typography, styled } from '@mui/material'; import { ItemRecord } from '@graasp/sdk/frontend'; import { DrawerHeader } from '@graasp/ui'; -import { RIGHT_MENU_WIDTH } from '../../config/constants'; +import { DRAWER_WIDTH, RIGHT_MENU_WIDTH } from '../../config/constants'; import { useBuilderTranslation } from '../../config/i18n'; import { ITEM_MAIN_CLASS } from '../../config/selectors'; import { BUILDER } from '../../langs/constants'; @@ -13,6 +13,10 @@ import ItemMetadataContent from './ItemMetadataContent'; import ItemPanel from './ItemPanel'; import ItemHeader from './header/ItemHeader'; +const Container = styled(Box)<{ open: boolean }>(({ open }) => ({ + width: open ? `calc(100vw - ${DRAWER_WIDTH})` : '100vw', +})); + const StyledContainer = styled(Box)<{ open: boolean }>(({ theme, open }) => { const openStyles = open ? { @@ -58,10 +62,11 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => { setIsItemMetadataMenuOpen, isChatboxMenuOpen, setIsChatboxMenuOpen, + isMainMenuOpen, } = useLayoutContext(); return ( -
+ {isChatboxMenuOpen && ( { {children} -
+ ); }; diff --git a/src/components/main/ItemsToolbar.tsx b/src/components/main/ItemsToolbar.tsx index d8454b74c..42f4059b5 100644 --- a/src/components/main/ItemsToolbar.tsx +++ b/src/components/main/ItemsToolbar.tsx @@ -1,4 +1,4 @@ -import { Box, Stack, Typography } from '@mui/material'; +import { Grid, Stack, Typography } from '@mui/material'; type Props = { title: string; @@ -6,16 +6,18 @@ type Props = { }; const ItemsToolbar = ({ title, headerElements }: Props): JSX.Element => ( - - - + + + {title} - - - {headerElements} - - + + + + {headerElements} + + + ); export default ItemsToolbar;