Menu next to the map

src/App.js

@@ -11,10 +11,8 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import Grid from '@mui/material/Grid';
 
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from "react-simple-maps"
-import { autocompleteClasses } from '@mui/material';
 
 function RoomResearch() {
   return <>
@@ -47,7 +45,6 @@ function TopBar() {
   };
 
   return <>
-    <Box sx={{ flexGrow: 1 }}>
     <AppBar position="static">
       <Toolbar>
         <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
@@ -58,7 +55,6 @@ function TopBar() {
         <Button color="inherit" onClick={handleOpenAboutModal}>À propos</Button>
       </Toolbar>
     </AppBar>
-    </Box>
 
     <Dialog
       open={openAboutModal}
@@ -83,10 +79,9 @@ function TopBar() {
 
 function Map() {
   const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";
-  // <Box height='100%' border='1px solid red'>
   return (
-    <ComposableMap style={{ height: "100%", width: '100%' }} >
-      <ZoomableGroup center={[0, 0]} zoom={9}>
+    <ComposableMap>
+      <ZoomableGroup center={[0, -20]} zoom={1}>
         <Geographies geography={geoUrl}>
           {({ geographies }) =>
             geographies.map((geo) => (
@@ -103,16 +98,11 @@ function Map() {
 export default function App() {
   return <>
     <TopBar />
-    <Map />
 
-    {/*<Box height="100vh" display="flex" flexDirection="column">
-  <Box>Filter</Box>
-  <Box flex={1} overflow="auto">
-    {Array.from(Array(100)).map((v, i) => (
-      <div key={i}>Testing {i}</div>
-    ))}
-  </Box>
-</Box>*/}
+    <div style={{ display: 'flex', flex: 1, flexDirection: 'line' }}>
+      <Map />
+      <RoomResearch />
+    </div>
 
   </>
 }