mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-19 04:09:26 +00:00
Finalized Chat migration to Material Ui
This commit is contained in:
Cassio Santos
173
frontend/src/components/Layout/MainDrawer.js
Normal file
173
frontend/src/components/Layout/MainDrawer.js
Normal file
@@ -0,0 +1,173 @@
|
||||
import React, { useState } from "react";
|
||||
import clsx from "clsx";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import Drawer from "@material-ui/core/Drawer";
|
||||
|
||||
import AppBar from "@material-ui/core/AppBar";
|
||||
import Toolbar from "@material-ui/core/Toolbar";
|
||||
import List from "@material-ui/core/List";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import Badge from "@material-ui/core/Badge";
|
||||
|
||||
import MenuIcon from "@material-ui/icons/Menu";
|
||||
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
|
||||
import NotificationsIcon from "@material-ui/icons/Notifications";
|
||||
import MainListItems from "./MainListItems";
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
height: "100vh",
|
||||
},
|
||||
|
||||
toolbar: {
|
||||
paddingRight: 24, // keep right padding when drawer closed
|
||||
},
|
||||
toolbarIcon: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
padding: "0 8px",
|
||||
...theme.mixins.toolbar,
|
||||
},
|
||||
appBar: {
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
transition: theme.transitions.create(["width", "margin"], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
},
|
||||
appBarShift: {
|
||||
marginLeft: drawerWidth,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
transition: theme.transitions.create(["width", "margin"], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
menuButton: {
|
||||
marginRight: 36,
|
||||
},
|
||||
menuButtonHidden: {
|
||||
display: "none",
|
||||
},
|
||||
title: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
drawerPaper: {
|
||||
position: "relative",
|
||||
whiteSpace: "nowrap",
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create("width", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
drawerPaperClose: {
|
||||
overflowX: "hidden",
|
||||
transition: theme.transitions.create("width", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
width: theme.spacing(7),
|
||||
[theme.breakpoints.up("sm")]: {
|
||||
width: theme.spacing(9),
|
||||
},
|
||||
},
|
||||
appBarSpacer: theme.mixins.toolbar,
|
||||
content: {
|
||||
flex: 1,
|
||||
// height: "100%",
|
||||
overflow: "auto",
|
||||
},
|
||||
container: {
|
||||
paddingTop: theme.spacing(4),
|
||||
paddingBottom: theme.spacing(4),
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
display: "flex",
|
||||
overflow: "auto",
|
||||
flexDirection: "column",
|
||||
},
|
||||
}));
|
||||
|
||||
const MainDrawer = ({ appTitle, children }) => {
|
||||
const classes = useStyles();
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
classes={{
|
||||
paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
|
||||
}}
|
||||
open={open}
|
||||
>
|
||||
<div className={classes.toolbarIcon}>
|
||||
<IconButton onClick={handleDrawerClose}>
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<List>
|
||||
<MainListItems />
|
||||
</List>
|
||||
<Divider />
|
||||
</Drawer>
|
||||
<AppBar
|
||||
position="absolute"
|
||||
className={clsx(classes.appBar, open && classes.appBarShift)}
|
||||
>
|
||||
<Toolbar className={classes.toolbar}>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={handleDrawerOpen}
|
||||
className={clsx(
|
||||
classes.menuButton,
|
||||
open && classes.menuButtonHidden
|
||||
)}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h6"
|
||||
color="inherit"
|
||||
noWrap
|
||||
className={classes.title}
|
||||
>
|
||||
{appTitle}
|
||||
</Typography>
|
||||
<IconButton color="inherit">
|
||||
<Badge badgeContent={4} color="secondary">
|
||||
<NotificationsIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.appBarSpacer} />
|
||||
|
||||
{children ? children : <h1>Dashboard</h1>}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainDrawer;
|
||||
118
frontend/src/components/Layout/MainListItems.js
Normal file
118
frontend/src/components/Layout/MainListItems.js
Normal file
@@ -0,0 +1,118 @@
|
||||
import React from "react";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import List from "@material-ui/core/List";
|
||||
import ListItem from "@material-ui/core/ListItem";
|
||||
import ListItemIcon from "@material-ui/core/ListItemIcon";
|
||||
import ListItemText from "@material-ui/core/ListItemText";
|
||||
// import ListSubheader from "@material-ui/core/ListSubheader";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
|
||||
import DashboardIcon from "@material-ui/icons/Dashboard";
|
||||
import PeopleIcon from "@material-ui/icons/People";
|
||||
import ChatIcon from "@material-ui/icons/Chat";
|
||||
import BarChartIcon from "@material-ui/icons/BarChart";
|
||||
import LayersIcon from "@material-ui/icons/Layers";
|
||||
// import AssignmentIcon from "@material-ui/icons/Assignment";
|
||||
import ExpandLess from "@material-ui/icons/ExpandLess";
|
||||
import ExpandMore from "@material-ui/icons/ExpandMore";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
nested: {
|
||||
paddingLeft: theme.spacing(4),
|
||||
},
|
||||
}));
|
||||
|
||||
function ListItemLink(props) {
|
||||
const { icon, primary, to } = props;
|
||||
|
||||
const renderLink = React.useMemo(
|
||||
() =>
|
||||
React.forwardRef((itemProps, ref) => (
|
||||
<RouterLink to={to} ref={ref} {...itemProps} />
|
||||
)),
|
||||
[to]
|
||||
);
|
||||
|
||||
return (
|
||||
<li>
|
||||
<ListItem button component={renderLink}>
|
||||
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
|
||||
<ListItemText primary={primary} />
|
||||
</ListItem>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
const MainListItems = () => {
|
||||
const classes = useStyles();
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleClick = () => {
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
|
||||
<ListItemLink to="/chat" primary="Chat" icon={<ChatIcon />} />
|
||||
|
||||
<ListItem button onClick={handleClick}>
|
||||
<ListItemIcon>
|
||||
<PeopleIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Clientes" />
|
||||
{open ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItem>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
<ListItem button className={classes.nested}>
|
||||
<ListItemIcon>
|
||||
<LayersIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Starred" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<BarChartIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Relatórios" />
|
||||
</ListItem>
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<LayersIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Integrações" />
|
||||
</ListItem>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
// export const secondaryListItems = (
|
||||
// <div>
|
||||
// <ListSubheader inset>Saved reports</ListSubheader>
|
||||
// <ListItem button>
|
||||
// <ListItemIcon>
|
||||
// <AssignmentIcon />
|
||||
// </ListItemIcon>
|
||||
// <ListItemText primary="Current month" />
|
||||
// </ListItem>
|
||||
// <ListItem button>
|
||||
// <ListItemIcon>
|
||||
// <AssignmentIcon />
|
||||
// </ListItemIcon>
|
||||
// <ListItemText primary="Last quarter" />
|
||||
// </ListItem>
|
||||
// <ListItem button>
|
||||
// <ListItemIcon>
|
||||
// <AssignmentIcon />
|
||||
// </ListItemIcon>
|
||||
// <ListItemText primary="Year-end sale" />
|
||||
// </ListItem>
|
||||
// </div>
|
||||
// );
|
||||
|
||||
export default MainListItems;
|
||||
Reference in New Issue
Block a user