I am looking to create a panel that arranges items in a specific layout shown here:
https://i.stack.imgur.com/qw3lS.png
Below is the code I have attempted so far:
import React, { useCallback, useEffect } from "react";
import { Box, Grid, Tab, Tabs, Typography } from "@material-ui/core";
import { makeStyles, Theme } from "@material-ui/core/styles";
import { sizing } from "@material-ui/system";
const useStyles1 = makeStyles((theme: Theme) => ({
color: {
backgroundColor: "green",
border: "1px solid black"
}
}));
const useStyles2 = makeStyles((theme: Theme) => ({
color: {
backgroundColor: "mediumvioletred",
border: "1px solid black"
}
}));
const useStyles3 = makeStyles((theme: Theme) => ({
color: {
backgroundColor: "orange",
border: "1px solid black"
}
}));
export default function Hello() {
const classes1 = useStyles1();
const classes2 = useStyles2();
const classes3 = useStyles3();
return (
<>
<Grid
spacing={0}
container
direction="row"
justifyContent="flex-start"
xs={12}
alignItems={"stretch"}
style={{ height: "100vh", overflow: "auto", flexGrow: 1 }}
>
<Grid
// spacing={0}
// container
// direction="row"
// xs={3}
// style={{ height: "100%", overflow: "auto" }}
>
<Grid item xs={12}>
<Grid
className={classes1.color}
container
direction="column"
justifyContent="flex-start"
alignItems="center"
>
<Grid item xs={12}>
<Box m={2}>item link 1</Box>
</Grid>
<Grid item xs={12}>
<Box m={2}>item link 2</Box>
</Grid>
<Grid item xs={12}>
<Box m={2}>item link 3</Box>
</Grid>
<Grid item xs={12}>
<Box m={2}>item link 4</Box>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid
spacing={0}
container
direction="row"
xs={2}
className={classes2.color}
style={{ height: "100%", overflow: "auto" }}
>
<Grid item xs={12}>
<Box m={10}>item 11</Box>
</Grid>
<Grid item xs={12}>
<Box m={10}>item 11</Box>
</Grid>
<Grid item xs={12}>
<Box m={10}>item 13</Box>
</Grid>
<Grid item xs={12}>
<Box m={10}>item 14</Box>
</Grid>
<Grid item xs={12}>
<Box m={10}>item 15</Box>
</Grid>
<Grid item xs={12}>
<Box m={10}>item 16</Box>
</Grid>
</Grid>
<Grid
container
direction="row"
xs={4}
alignItems={"stretch"}
style={{ height: "100%", overflow: "auto" }}
>
<Grid item xs={12}>
<Grid
className={classes3.color}
container
direction="row"
justifyContent="space-around"
alignItems="center"
style={{ width: "100%", overflow: "auto" }}
>
<Grid item xs={12}>
<Box m={2}>item area 1</Box>
</Grid>
<Grid item xs={12}>
<Box m={2}>item area 2</Box>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</>
);
}
You can view the full code here.
Any suggestions on how I can add drag functionality to the borders and enhance the layout using TypeScript?