fix: update main component and cleanup

package.json

@@ -21,7 +21,7 @@
     "@graasp/query-client": "2.4.1",
     "@graasp/sdk": "3.4.1",
     "@graasp/translations": "1.22.1",
-    "@graasp/ui": "4.4.0",
+    "@graasp/ui": "github:graasp/graasp-ui#main",
     "@mui/icons-material": "5.14.19",
     "@mui/lab": "5.0.0-alpha.151",
     "@mui/material": "5.14.19",

src/components/item/ItemMain.tsx

@@ -3,7 +3,7 @@ import { Box, Divider, Typography, styled } from '@mui/material';
 import { DiscriminatedItem } from '@graasp/sdk';
 import { DrawerHeader } from '@graasp/ui';
 
-import { DRAWER_WIDTH, RIGHT_MENU_WIDTH } from '../../config/constants';
+import { RIGHT_MENU_WIDTH } from '../../config/constants';
 import { useBuilderTranslation } from '../../config/i18n';
 import { ITEM_MAIN_CLASS } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
@@ -13,10 +13,6 @@ 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
     ? {
@@ -29,14 +25,8 @@ const StyledContainer = styled(Box)<{ open: boolean }>(({ theme, open }) => {
     : {};
 
   return {
-    position: 'relative',
-    padding: theme.spacing(1, 2),
     flexGrow: 1,
     marginRight: 0,
-    width: 'unset',
-    // takes the whole screen height minus the header height approximatively
-    // this might have to change
-    minHeight: '85vh',
     display: 'flex',
     flexDirection: 'column',
 
@@ -62,11 +52,10 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
     setIsItemMetadataMenuOpen,
     isChatboxMenuOpen,
     setIsChatboxMenuOpen,
-    isMainMenuOpen,
   } = useLayoutContext();
 
   return (
-    <Container id={id} className={ITEM_MAIN_CLASS} open={isMainMenuOpen}>
+    <Box id={id} className={ITEM_MAIN_CLASS}>
       {isChatboxMenuOpen && (
         <ItemPanel open={isChatboxMenuOpen}>
           <DrawerHeader
@@ -105,7 +94,7 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
 
         {children}
       </StyledContainer>
-    </Container>
+    </Box>
   );
 };
 

src/components/main/Main.tsx

@@ -1,11 +1,9 @@
 import { Link } from 'react-router-dom';
 
-import { Grid, Typography, styled } from '@mui/material';
-import Box from '@mui/material/Box';
+import { Stack, styled } from '@mui/material';
 
 import { Context } from '@graasp/sdk';
 import {
-  GraaspLogo,
   Main as GraaspMain,
   Platform,
   PlatformSwitch,
@@ -15,8 +13,9 @@ import {
 } from '@graasp/ui';
 
 import { HOST_MAP } from '@/config/externalPaths';
+import { useBuilderTranslation } from '@/config/i18n';
+import { BUILDER } from '@/langs/constants';
 
-import { APP_NAME, GRAASP_LOGO_HEADER_HEIGHT } from '../../config/constants';
 import { HOME_PATH, ITEM_ID_PARAMS } from '../../config/paths';
 import {
   APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS,
@@ -35,7 +34,9 @@ const StyledLink = styled(Link)(() => ({
   display: 'flex',
   alignItems: 'center',
 }));
-type Props = { children: JSX.Element | (JSX.Element & string) };
+const LinkComponent = ({ children }: { children: JSX.Element }) => (
+  <StyledLink to={HOME_PATH}>{children}</StyledLink>
+);
 
 // small converter for HOST_MAP into a usePlatformNavigation mapper
 export const platformsHostsMap = defaultHostsMapper({
@@ -44,8 +45,11 @@ export const platformsHostsMap = defaultHostsMapper({
   [Platform.Analytics]: HOST_MAP.analytics,
 });
 
+type Props = { children: JSX.Element | (JSX.Element & string) };
+
 const Main = ({ children }: Props): JSX.Element => {
-  const { isMainMenuOpen, setIsMainMenuOpen } = useLayoutContext();
+  const { isMainMenuOpen } = useLayoutContext();
+  const { t } = useBuilderTranslation();
 
   const itemId = useShortenURLParams(ITEM_ID_PARAMS);
 
@@ -69,47 +73,29 @@ const Main = ({ children }: Props): JSX.Element => {
     },
   };
 
-  const leftContent = (
-    <Box display="flex" ml={2}>
-      <StyledLink to={HOME_PATH}>
-        <GraaspLogo height={GRAASP_LOGO_HEADER_HEIGHT} sx={{ fill: 'white' }} />
-        <Typography variant="h6" color="inherit" mr={2} ml={1}>
-          {APP_NAME}
-        </Typography>
-      </StyledLink>
-      <PlatformSwitch
-        id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
-        selected={Platform.Builder}
-        platformsProps={platformProps}
-      />
-    </Box>
-  );
-
   const rightContent = (
-    <Grid container>
-      <Grid item>
-        <NotificationButton />
-      </Grid>
-      <Grid item>
-        <UserSwitchWrapper />
-      </Grid>
-    </Grid>
+    <Stack direction="row" alignItems="center">
+      <NotificationButton />
+      <UserSwitchWrapper />
+    </Stack>
   );
 
   return (
     <GraaspMain
       context={Context.Builder}
-      handleDrawerOpen={() => {
-        setIsMainMenuOpen(true);
-      }}
-      handleDrawerClose={() => {
-        setIsMainMenuOpen(false);
-      }}
       headerId={HEADER_APP_BAR_ID}
-      headerLeftContent={leftContent}
+      drawerOpenAriaLabel={t(BUILDER.ARIA_OPEN_DRAWER)}
       headerRightContent={rightContent}
-      sidebar={<MainMenu />}
+      drawerContent={<MainMenu />}
       open={isMainMenuOpen}
+      LinkComponent={LinkComponent}
+      PlatformComponent={
+        <PlatformSwitch
+          id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
+          selected={Platform.Builder}
+          platformsProps={platformProps}
+        />
+      }
     >
       <CookiesBanner />
       {children}

src/langs/constants.ts

@@ -362,6 +362,7 @@ export const BUILDER = {
   EMPTY_FOLDER_CHILDREN_FOR_THIS_ITEM: 'EMPTY_FOLDER_CHILDREN_FOR_THIS_ITEM',
   TO_FOLDER: 'TO_FOLDER',
   ROOT: 'ROOT',
+  ARIA_OPEN_DRAWER: 'ARIA_OPEN_DRAWER',
   // temporary message
   "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.":
     "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.",

src/langs/en.json

@@ -303,6 +303,7 @@
   "EMPTY_FOLDER_CHILDREN_FOR_THIS_ITEM": "This item does not contain any folder.",
   "TO_FOLDER": "to {{name}}",
   "ROOT": "Root",
+  "ARIA_OPEN_DRAWER": "open drawer",
   "ITEM_SELECTION_NAVIGATION_RECENT_ITEMS": "Recent Items",
   "ITEM_SELECTION_NAVIGATION_PARENT": "Move above"
 }

src/langs/fr.json

@@ -298,5 +298,6 @@
   "SHORT_LINK_UNKNOWN_ERROR": "Il y a une erreur inconnue.",
   "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.": "Les éléments de cette page sont aussi disponibles dans ''Mon Graasp''. Cette page ''Eléments Partagés'' sera bientôt indisponible.",
   "ITEM_SELECTION_NAVIGATION_RECENT_ITEMS": "Éléments Récents",
-  "ITEM_SELECTION_NAVIGATION_PARENT": "Déplacer au-dessus"
+  "ITEM_SELECTION_NAVIGATION_PARENT": "Déplacer au-dessus",
+  "ARIA_OPEN_DRAWER": "ouvrir la bare latérale"
 }

yarn.lock

@@ -1308,9 +1308,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:4.4.0":
+"@graasp/ui@github:graasp/graasp-ui#main":
   version: 4.4.0
-  resolution: "@graasp/ui@npm:4.4.0"
+  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=7411a5cfdd7104b6974e2b3fc6f0c66ef51f3036"
   dependencies:
     "@graasp/sdk": "npm:3.5.0"
     http-status-codes: "npm:2.3.0"
@@ -1344,7 +1344,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: 2b037daec606f5de34079a36560991efc9ebe044b26f472a272ca480e21083109304a978a2fbe74a23de1e70de19d2e814e434f7665a828bbdaa5ef93538a65f
+  checksum: 09732b75bf3863b3625fd610296a41a07cbc0425cf488844b95218aff7047078eb52ec950c3f3ace2ca70a65b2587005c6df6b76d49a6267bbaa91061bb0e346
   languageName: node
   linkType: hard
 
@@ -6333,7 +6333,7 @@ __metadata:
     "@graasp/query-client": "npm:2.4.1"
     "@graasp/sdk": "npm:3.4.1"
     "@graasp/translations": "npm:1.22.1"
-    "@graasp/ui": "npm:4.4.0"
+    "@graasp/ui": "github:graasp/graasp-ui#main"
     "@mui/icons-material": "npm:5.14.19"
     "@mui/lab": "npm:5.0.0-alpha.151"
     "@mui/material": "npm:5.14.19"