kozozo116
Member
em có một array data như trên để làm một cái menu và submenu,
khi click vào cái menu ô grid trên trái thì cái submenu sẽ hiển thị ô grid bên phải
khi click vào cái menu ô grid trên trái thì cái submenu sẽ hiển thị ô grid bên phải
Code:
import React from "react";
import { Grid } from "@mui/material";
import { List } from "@mui/material";
import { ListItemButton, ListItemText } from "@mui/material";
import { Box } from "@mui/system";
const App = ()=> {
const data = [
{ menu:'item1',
sub_menu:[
{code:'1',
sub_items:'sub_items1.1'
},
{code:'1',
sub_items:'sub_items1.1'
}
]
},
{ menu:'item2',
sub_menu:[
{code:'1',
sub_items:'sub_item2.1'
},
{code:'1',
sub_items:'sub_item2.2'
}
]
}
]
return (
<React.Fragment>
<Box >
<Grid container sx={{height:'100%'}}>
<Grid item xs={6} >
<List >
<ListItemButton onClick={}>
<ListItemText>
item1
</ListItemText>
</ListItemButton>
</List>
</Grid>
<Grid item xs={6}>
<Grid container direction="column" sx={{height: "100%"}}>
<Grid item sx={{height: "100%"}}>
<List >
<ListItemButton >
<ListItemText>
sub_items1.1'
</ListItemText>
</ListItemButton>
<ListItemButton >
<ListItemText>
sub_items1.2'
</ListItemText>
</ListItemButton>
</List>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</React.Fragment>
);
}
export default App;