mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-19 20:29:17 +00:00
layout responsivo 1ª parte
This commit is contained in:
ertprs
@@ -42,7 +42,8 @@ function ListItemLink(props) {
|
||||
);
|
||||
}
|
||||
|
||||
const MainListItems = () => {
|
||||
const MainListItems = (props) => {
|
||||
const { drawerClose } = props;
|
||||
const { whatsApps } = useContext(WhatsAppsContext);
|
||||
const { user } = useContext(AuthContext);
|
||||
const [connectionWarning, setConnectionWarning] = useState(false);
|
||||
@@ -70,7 +71,7 @@ const MainListItems = () => {
|
||||
}, [whatsApps]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div onClick={drawerClose}>
|
||||
<ListItemLink
|
||||
to="/"
|
||||
primary="Dashboard"
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import React, { useState, useContext } from "react";
|
||||
import React, { useState, useContext, useEffect } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
import {
|
||||
makeStyles,
|
||||
Drawer,
|
||||
AppBar,
|
||||
Toolbar,
|
||||
List,
|
||||
Typography,
|
||||
Divider,
|
||||
MenuItem,
|
||||
IconButton,
|
||||
Menu,
|
||||
makeStyles,
|
||||
Drawer,
|
||||
AppBar,
|
||||
Toolbar,
|
||||
List,
|
||||
Typography,
|
||||
Divider,
|
||||
MenuItem,
|
||||
IconButton,
|
||||
Menu,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import MenuIcon from "@material-ui/icons/Menu";
|
||||
@@ -24,221 +24,245 @@ import UserModal from "../components/UserModal";
|
||||
import { AuthContext } from "../context/Auth/AuthContext";
|
||||
import BackdropLoading from "../components/BackdropLoading";
|
||||
import { i18n } from "../translate/i18n";
|
||||
import { useLocalStorage } from "../hooks/useLocalStorage";
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
height: "100vh",
|
||||
},
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
height: "100vh",
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
height: "calc(100vh - 56px)",
|
||||
},
|
||||
},
|
||||
|
||||
toolbar: {
|
||||
paddingRight: 24, // keep right padding when drawer closed
|
||||
},
|
||||
toolbarIcon: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
padding: "0 8px",
|
||||
minHeight: "48px",
|
||||
},
|
||||
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: {
|
||||
minHeight: "48px",
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
overflow: "auto",
|
||||
},
|
||||
container: {
|
||||
paddingTop: theme.spacing(4),
|
||||
paddingBottom: theme.spacing(4),
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
display: "flex",
|
||||
overflow: "auto",
|
||||
flexDirection: "column",
|
||||
},
|
||||
toolbar: {
|
||||
paddingRight: 24, // keep right padding when drawer closed
|
||||
},
|
||||
toolbarIcon: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
padding: "0 8px",
|
||||
minHeight: "48px",
|
||||
},
|
||||
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: {
|
||||
minHeight: "48px",
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
overflow: "auto",
|
||||
},
|
||||
container: {
|
||||
paddingTop: theme.spacing(4),
|
||||
paddingBottom: theme.spacing(4),
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
display: "flex",
|
||||
overflow: "auto",
|
||||
flexDirection: "column",
|
||||
},
|
||||
}));
|
||||
|
||||
const LoggedInLayout = ({ children }) => {
|
||||
const classes = useStyles();
|
||||
const [userModalOpen, setUserModalOpen] = useState(false);
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const { handleLogout, loading } = useContext(AuthContext);
|
||||
const [drawerOpen, setDrawerOpen] = useLocalStorage("drawerOpen", true);
|
||||
const { user } = useContext(AuthContext);
|
||||
const classes = useStyles();
|
||||
const [userModalOpen, setUserModalOpen] = useState(false);
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const { handleLogout, loading } = useContext(AuthContext);
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [drawerVariant, setDrawerVariant] = useState("permanent");
|
||||
const { user } = useContext(AuthContext);
|
||||
|
||||
const handleMenu = event => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
setMenuOpen(true);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (document.body.offsetWidth > 600) {
|
||||
setDrawerOpen(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleCloseMenu = () => {
|
||||
setAnchorEl(null);
|
||||
setMenuOpen(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (document.body.offsetWidth < 600) {
|
||||
setDrawerVariant("temporary");
|
||||
} else {
|
||||
setDrawerVariant("permanent");
|
||||
}
|
||||
}, [drawerOpen]);
|
||||
|
||||
const handleOpenUserModal = () => {
|
||||
setUserModalOpen(true);
|
||||
handleCloseMenu();
|
||||
};
|
||||
const handleMenu = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
setMenuOpen(true);
|
||||
};
|
||||
|
||||
const handleClickLogout = () => {
|
||||
handleCloseMenu();
|
||||
handleLogout();
|
||||
};
|
||||
const handleCloseMenu = () => {
|
||||
setAnchorEl(null);
|
||||
setMenuOpen(false);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <BackdropLoading />;
|
||||
}
|
||||
const handleOpenUserModal = () => {
|
||||
setUserModalOpen(true);
|
||||
handleCloseMenu();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
classes={{
|
||||
paper: clsx(
|
||||
classes.drawerPaper,
|
||||
!drawerOpen && classes.drawerPaperClose
|
||||
),
|
||||
}}
|
||||
open={drawerOpen}
|
||||
>
|
||||
<div className={classes.toolbarIcon}>
|
||||
<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<List>
|
||||
<MainListItems />
|
||||
</List>
|
||||
<Divider />
|
||||
</Drawer>
|
||||
<UserModal
|
||||
open={userModalOpen}
|
||||
onClose={() => setUserModalOpen(false)}
|
||||
userId={user?.id}
|
||||
/>
|
||||
<AppBar
|
||||
position="absolute"
|
||||
className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
|
||||
color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
|
||||
>
|
||||
<Toolbar variant="dense" className={classes.toolbar}>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={() => setDrawerOpen(!drawerOpen)}
|
||||
className={clsx(
|
||||
classes.menuButton,
|
||||
drawerOpen && classes.menuButtonHidden
|
||||
)}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h6"
|
||||
color="inherit"
|
||||
noWrap
|
||||
className={classes.title}
|
||||
>
|
||||
WhaTicket
|
||||
</Typography>
|
||||
{user.id && <NotificationsPopOver />}
|
||||
const handleClickLogout = () => {
|
||||
handleCloseMenu();
|
||||
handleLogout();
|
||||
};
|
||||
|
||||
<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}
|
||||
getContentAnchorEl={null}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
open={menuOpen}
|
||||
onClose={handleCloseMenu}
|
||||
>
|
||||
<MenuItem onClick={handleOpenUserModal}>
|
||||
{i18n.t("mainDrawer.appBar.user.profile")}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleClickLogout}>
|
||||
{i18n.t("mainDrawer.appBar.user.logout")}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.appBarSpacer} />
|
||||
const drawerClose = () => {
|
||||
if (document.body.offsetWidth < 600) {
|
||||
setDrawerOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
{children ? children : null}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
if (loading) {
|
||||
return <BackdropLoading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Drawer
|
||||
variant={drawerVariant}
|
||||
className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
|
||||
classes={{
|
||||
paper: clsx(
|
||||
classes.drawerPaper,
|
||||
!drawerOpen && classes.drawerPaperClose
|
||||
),
|
||||
}}
|
||||
open={drawerOpen}
|
||||
>
|
||||
<div className={classes.toolbarIcon}>
|
||||
<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<List>
|
||||
<MainListItems drawerClose={drawerClose} />
|
||||
</List>
|
||||
<Divider />
|
||||
</Drawer>
|
||||
<UserModal
|
||||
open={userModalOpen}
|
||||
onClose={() => setUserModalOpen(false)}
|
||||
userId={user?.id}
|
||||
/>
|
||||
<AppBar
|
||||
position="absolute"
|
||||
className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
|
||||
color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
|
||||
>
|
||||
<Toolbar variant="dense" className={classes.toolbar}>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={() => setDrawerOpen(!drawerOpen)}
|
||||
className={clsx(
|
||||
classes.menuButton,
|
||||
drawerOpen && classes.menuButtonHidden
|
||||
)}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography
|
||||
component="h1"
|
||||
variant="h6"
|
||||
color="inherit"
|
||||
noWrap
|
||||
className={classes.title}
|
||||
>
|
||||
WhaTicket
|
||||
</Typography>
|
||||
{user.id && <NotificationsPopOver />}
|
||||
|
||||
<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}
|
||||
getContentAnchorEl={null}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
open={menuOpen}
|
||||
onClose={handleCloseMenu}
|
||||
>
|
||||
<MenuItem onClick={handleOpenUserModal}>
|
||||
{i18n.t("mainDrawer.appBar.user.profile")}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleClickLogout}>
|
||||
{i18n.t("mainDrawer.appBar.user.logout")}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.appBarSpacer} />
|
||||
|
||||
{children ? children : null}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoggedInLayout;
|
||||
|
||||
Reference in New Issue
Block a user