|
|
@@ -1,67 +0,0 @@
|
|
|
-import * as React from "react";
|
|
|
-import {
|
|
|
- Box,
|
|
|
- CssBaseline,
|
|
|
- Drawer,
|
|
|
- Typography,
|
|
|
- Toolbar,
|
|
|
- List,
|
|
|
- Divider,
|
|
|
- ListItem,
|
|
|
- ListItemIcon,
|
|
|
- ListItemText,
|
|
|
- Button,
|
|
|
- AppBar,
|
|
|
-} from "@material-ui/core";
|
|
|
-
|
|
|
-import { MoveToInbox as InboxIcon, Mail as MailIcon } from "@material-ui/icons";
|
|
|
-
|
|
|
-const drawerWidth = 120;
|
|
|
-
|
|
|
-const Sidebar = () => {
|
|
|
- return (
|
|
|
- <Box sx={{ display: "flex" }}>
|
|
|
- <CssBaseline />
|
|
|
- <AppBar
|
|
|
- position="fixed"
|
|
|
- sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}
|
|
|
- >
|
|
|
- {/* <Toolbar>
|
|
|
- <Typography variant="h6" noWrap component="div">
|
|
|
- Permanent drawer
|
|
|
- </Typography>
|
|
|
- </Toolbar> */}
|
|
|
- </AppBar>
|
|
|
- <Drawer
|
|
|
- sx={{
|
|
|
- width: drawerWidth,
|
|
|
- flexShrink: 0,
|
|
|
- "& .MuiDrawer-paper": {
|
|
|
- width: drawerWidth,
|
|
|
- boxSizing: "border-box",
|
|
|
- },
|
|
|
- }}
|
|
|
- variant="permanent"
|
|
|
- anchor="left"
|
|
|
- >
|
|
|
- <Toolbar />
|
|
|
- <Divider />
|
|
|
- <List>
|
|
|
- {["Allocations", "Cloud Cost"].map((text, index) => (
|
|
|
- <ListItem key={text} disablePadding>
|
|
|
- <Button>
|
|
|
- <ListItemIcon>
|
|
|
- {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
|
|
- </ListItemIcon>
|
|
|
- <ListItemText primary={text} />
|
|
|
- </Button>
|
|
|
- </ListItem>
|
|
|
- ))}
|
|
|
- </List>
|
|
|
- <Divider />
|
|
|
- </Drawer>
|
|
|
- </Box>
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-export default Sidebar;
|