mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-19 04:09:26 +00:00
migration to WSL
This commit is contained in:
canove
@@ -1,229 +1,229 @@
|
||||
import React, { useState, useContext, useEffect } 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";
|
||||
import AccountCircle from "@material-ui/icons/AccountCircle";
|
||||
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
import Menu from "@material-ui/core/Menu";
|
||||
|
||||
import { AuthContext } from "../../Context/Auth/AuthContext";
|
||||
|
||||
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 { handleLogout } = useContext(AuthContext);
|
||||
const classes = useStyles();
|
||||
const [open, setOpen] = useState(true);
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const menuOpen = Boolean(anchorEl);
|
||||
const drawerState = localStorage.getItem("drawerOpen");
|
||||
|
||||
useEffect(() => {
|
||||
if (drawerState === "0") {
|
||||
setOpen(false);
|
||||
}
|
||||
}, [drawerState]);
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
localStorage.setItem("drawerOpen", 1);
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
localStorage.setItem("drawerOpen", 0);
|
||||
};
|
||||
|
||||
const handleMenu = event => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
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={0} color="secondary">
|
||||
<NotificationsIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
|
||||
<div>
|
||||
<IconButton
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<AccountCircle />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorEl}
|
||||
anchorOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
open={menuOpen}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<MenuItem onClick={handleClose}>Profile</MenuItem>
|
||||
<MenuItem onClick={handleLogout}>Logout</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.appBarSpacer} />
|
||||
|
||||
{children ? children : <h1>Dashboard</h1>}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainDrawer;
|
||||
import React, { useState, useContext, useEffect } 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";
|
||||
import AccountCircle from "@material-ui/icons/AccountCircle";
|
||||
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
import Menu from "@material-ui/core/Menu";
|
||||
|
||||
import { AuthContext } from "../../Context/Auth/AuthContext";
|
||||
|
||||
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 { handleLogout } = useContext(AuthContext);
|
||||
const classes = useStyles();
|
||||
const [open, setOpen] = useState(true);
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const menuOpen = Boolean(anchorEl);
|
||||
const drawerState = localStorage.getItem("drawerOpen");
|
||||
|
||||
useEffect(() => {
|
||||
if (drawerState === "0") {
|
||||
setOpen(false);
|
||||
}
|
||||
}, [drawerState]);
|
||||
|
||||
const handleDrawerOpen = () => {
|
||||
setOpen(true);
|
||||
localStorage.setItem("drawerOpen", 1);
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
setOpen(false);
|
||||
localStorage.setItem("drawerOpen", 0);
|
||||
};
|
||||
|
||||
const handleMenu = event => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
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={0} color="secondary">
|
||||
<NotificationsIcon />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
|
||||
<div>
|
||||
<IconButton
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<AccountCircle />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorEl}
|
||||
anchorOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
open={menuOpen}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<MenuItem onClick={handleClose}>Profile</MenuItem>
|
||||
<MenuItem onClick={handleLogout}>Logout</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.appBarSpacer} />
|
||||
|
||||
{children ? children : <h1>Dashboard</h1>}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainDrawer;
|
||||
|
||||
@@ -1,125 +1,125 @@
|
||||
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 WhatsAppIcon from "@material-ui/icons/WhatsApp";
|
||||
// import PeopleIcon from "@material-ui/icons/People";
|
||||
import SyncAltIcon from "@material-ui/icons/SyncAlt";
|
||||
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, className } = props;
|
||||
|
||||
const renderLink = React.useMemo(
|
||||
() =>
|
||||
React.forwardRef((itemProps, ref) => (
|
||||
<RouterLink to={to} ref={ref} {...itemProps} />
|
||||
)),
|
||||
[to]
|
||||
);
|
||||
|
||||
return (
|
||||
<li>
|
||||
<ListItem button component={renderLink} className={className}>
|
||||
{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 />} />
|
||||
|
||||
<ListItem button onClick={handleClick}>
|
||||
<ListItemIcon>
|
||||
<WhatsAppIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="WhatsApp" />
|
||||
{open ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItem>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
<ListItemLink
|
||||
className={classes.nested}
|
||||
to="/whats-auth"
|
||||
primary="Conexão"
|
||||
icon={<SyncAltIcon />}
|
||||
/>
|
||||
<ListItemLink
|
||||
className={classes.nested}
|
||||
to="/chat"
|
||||
primary="Chat"
|
||||
icon={<ChatIcon />}
|
||||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
||||
<ListItem button disabled>
|
||||
<ListItemIcon>
|
||||
<BarChartIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Relatórios" />
|
||||
</ListItem>
|
||||
<ListItem button disabled>
|
||||
<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;
|
||||
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 WhatsAppIcon from "@material-ui/icons/WhatsApp";
|
||||
// import PeopleIcon from "@material-ui/icons/People";
|
||||
import SyncAltIcon from "@material-ui/icons/SyncAlt";
|
||||
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, className } = props;
|
||||
|
||||
const renderLink = React.useMemo(
|
||||
() =>
|
||||
React.forwardRef((itemProps, ref) => (
|
||||
<RouterLink to={to} ref={ref} {...itemProps} />
|
||||
)),
|
||||
[to]
|
||||
);
|
||||
|
||||
return (
|
||||
<li>
|
||||
<ListItem button component={renderLink} className={className}>
|
||||
{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 />} />
|
||||
|
||||
<ListItem button onClick={handleClick}>
|
||||
<ListItemIcon>
|
||||
<WhatsAppIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="WhatsApp" />
|
||||
{open ? <ExpandLess /> : <ExpandMore />}
|
||||
</ListItem>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
<ListItemLink
|
||||
className={classes.nested}
|
||||
to="/whats-auth"
|
||||
primary="Conexão"
|
||||
icon={<SyncAltIcon />}
|
||||
/>
|
||||
<ListItemLink
|
||||
className={classes.nested}
|
||||
to="/chat"
|
||||
primary="Chat"
|
||||
icon={<ChatIcon />}
|
||||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
||||
<ListItem button disabled>
|
||||
<ListItemIcon>
|
||||
<BarChartIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Relatórios" />
|
||||
</ListItem>
|
||||
<ListItem button disabled>
|
||||
<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;
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import React from "react";
|
||||
|
||||
import { Navbar, Nav, Container } from "react-bootstrap";
|
||||
import { LinkContainer } from "react-router-bootstrap";
|
||||
|
||||
const LogedinNavbar = () => {
|
||||
return (
|
||||
<div>
|
||||
<Navbar variant="dark" bg="dark" expand="lg">
|
||||
<Container>
|
||||
<LinkContainer to="/" style={{ color: "#519032" }}>
|
||||
<Navbar.Brand>EconoWhatsBot</Navbar.Brand>
|
||||
</LinkContainer>
|
||||
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
|
||||
<Navbar.Collapse id="responsive-navbar-nav">
|
||||
<Nav className="mr-auto">
|
||||
<LinkContainer to="/">
|
||||
<Nav.Link href="#home">Home</Nav.Link>
|
||||
</LinkContainer>
|
||||
<LinkContainer to="/chat">
|
||||
<Nav.Link href="#link">Chat</Nav.Link>
|
||||
</LinkContainer>
|
||||
</Nav>
|
||||
<LinkContainer to="/login">
|
||||
<Nav.Link href="#login">Login</Nav.Link>
|
||||
</LinkContainer>
|
||||
<LinkContainer to="/signup">
|
||||
<Nav.Link href="#signup">Signup</Nav.Link>
|
||||
</LinkContainer>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogedinNavbar;
|
||||
import React from "react";
|
||||
|
||||
import { Navbar, Nav, Container } from "react-bootstrap";
|
||||
import { LinkContainer } from "react-router-bootstrap";
|
||||
|
||||
const LogedinNavbar = () => {
|
||||
return (
|
||||
<div>
|
||||
<Navbar variant="dark" bg="dark" expand="lg">
|
||||
<Container>
|
||||
<LinkContainer to="/" style={{ color: "#519032" }}>
|
||||
<Navbar.Brand>EconoWhatsBot</Navbar.Brand>
|
||||
</LinkContainer>
|
||||
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
|
||||
<Navbar.Collapse id="responsive-navbar-nav">
|
||||
<Nav className="mr-auto">
|
||||
<LinkContainer to="/">
|
||||
<Nav.Link href="#home">Home</Nav.Link>
|
||||
</LinkContainer>
|
||||
<LinkContainer to="/chat">
|
||||
<Nav.Link href="#link">Chat</Nav.Link>
|
||||
</LinkContainer>
|
||||
</Nav>
|
||||
<LinkContainer to="/login">
|
||||
<Nav.Link href="#login">Login</Nav.Link>
|
||||
</LinkContainer>
|
||||
<LinkContainer to="/signup">
|
||||
<Nav.Link href="#signup">Signup</Nav.Link>
|
||||
</LinkContainer>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogedinNavbar;
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
import React from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { Navbar, Nav, Container } from "react-bootstrap";
|
||||
import { LinkContainer } from "react-router-bootstrap";
|
||||
import "./Navbar.css";
|
||||
|
||||
const DefaultNavbar = () => {
|
||||
const username = localStorage.getItem("username");
|
||||
const history = useHistory();
|
||||
|
||||
const handleLogout = e => {
|
||||
e.preventDefault();
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("userName");
|
||||
localStorage.removeItem("userId");
|
||||
history.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navbar variant="dark" bg="dark" expand="lg">
|
||||
<Container>
|
||||
<LinkContainer to="/" style={{ color: "#519032" }}>
|
||||
<Navbar.Brand>EconoWhatsBot</Navbar.Brand>
|
||||
</LinkContainer>
|
||||
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
|
||||
<Navbar.Collapse id="responsive-navbar-nav">
|
||||
<Nav className="mr-auto">
|
||||
<LinkContainer to="/">
|
||||
<Nav.Link href="#home">Home</Nav.Link>
|
||||
</LinkContainer>
|
||||
<LinkContainer to="/chat">
|
||||
<Nav.Link href="#link">Chat</Nav.Link>
|
||||
</LinkContainer>
|
||||
<LinkContainer to="/chat2">
|
||||
<Nav.Link href="#link">Chat MaterialUi</Nav.Link>
|
||||
</LinkContainer>
|
||||
</Nav>
|
||||
<Navbar.Text>
|
||||
Logado como: <a href="#login">{username}</a>
|
||||
</Navbar.Text>
|
||||
<Nav.Link href="#logout" onClick={handleLogout}>
|
||||
Logout
|
||||
</Nav.Link>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DefaultNavbar;
|
||||
import React from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { Navbar, Nav, Container } from "react-bootstrap";
|
||||
import { LinkContainer } from "react-router-bootstrap";
|
||||
import "./Navbar.css";
|
||||
|
||||
const DefaultNavbar = () => {
|
||||
const username = localStorage.getItem("username");
|
||||
const history = useHistory();
|
||||
|
||||
const handleLogout = e => {
|
||||
e.preventDefault();
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("userName");
|
||||
localStorage.removeItem("userId");
|
||||
history.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navbar variant="dark" bg="dark" expand="lg">
|
||||
<Container>
|
||||
<LinkContainer to="/" style={{ color: "#519032" }}>
|
||||
<Navbar.Brand>EconoWhatsBot</Navbar.Brand>
|
||||
</LinkContainer>
|
||||
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
|
||||
<Navbar.Collapse id="responsive-navbar-nav">
|
||||
<Nav className="mr-auto">
|
||||
<LinkContainer to="/">
|
||||
<Nav.Link href="#home">Home</Nav.Link>
|
||||
</LinkContainer>
|
||||
<LinkContainer to="/chat">
|
||||
<Nav.Link href="#link">Chat</Nav.Link>
|
||||
</LinkContainer>
|
||||
<LinkContainer to="/chat2">
|
||||
<Nav.Link href="#link">Chat MaterialUi</Nav.Link>
|
||||
</LinkContainer>
|
||||
</Nav>
|
||||
<Navbar.Text>
|
||||
Logado como: <a href="#login">{username}</a>
|
||||
</Navbar.Text>
|
||||
<Nav.Link href="#logout" onClick={handleLogout}>
|
||||
Logout
|
||||
</Nav.Link>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DefaultNavbar;
|
||||
|
||||
Reference in New Issue
Block a user