mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-20 20:59:16 +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 { whatsApps } = useContext(WhatsAppsContext);
|
||||||
const { user } = useContext(AuthContext);
|
const { user } = useContext(AuthContext);
|
||||||
const [connectionWarning, setConnectionWarning] = useState(false);
|
const [connectionWarning, setConnectionWarning] = useState(false);
|
||||||
@@ -70,7 +71,7 @@ const MainListItems = () => {
|
|||||||
}, [whatsApps]);
|
}, [whatsApps]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div onClick={drawerClose}>
|
||||||
<ListItemLink
|
<ListItemLink
|
||||||
to="/"
|
to="/"
|
||||||
primary="Dashboard"
|
primary="Dashboard"
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
import React, { useState, useContext } from "react";
|
import React, { useState, useContext, useEffect } from "react";
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
makeStyles,
|
makeStyles,
|
||||||
Drawer,
|
Drawer,
|
||||||
AppBar,
|
AppBar,
|
||||||
Toolbar,
|
Toolbar,
|
||||||
List,
|
List,
|
||||||
Typography,
|
Typography,
|
||||||
Divider,
|
Divider,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
IconButton,
|
IconButton,
|
||||||
Menu,
|
Menu,
|
||||||
} from "@material-ui/core";
|
} from "@material-ui/core";
|
||||||
|
|
||||||
import MenuIcon from "@material-ui/icons/Menu";
|
import MenuIcon from "@material-ui/icons/Menu";
|
||||||
@@ -24,221 +24,245 @@ import UserModal from "../components/UserModal";
|
|||||||
import { AuthContext } from "../context/Auth/AuthContext";
|
import { AuthContext } from "../context/Auth/AuthContext";
|
||||||
import BackdropLoading from "../components/BackdropLoading";
|
import BackdropLoading from "../components/BackdropLoading";
|
||||||
import { i18n } from "../translate/i18n";
|
import { i18n } from "../translate/i18n";
|
||||||
import { useLocalStorage } from "../hooks/useLocalStorage";
|
|
||||||
|
|
||||||
const drawerWidth = 240;
|
const drawerWidth = 240;
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
root: {
|
root: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
height: "100vh",
|
height: "100vh",
|
||||||
},
|
[theme.breakpoints.down("sm")]: {
|
||||||
|
height: "calc(100vh - 56px)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
toolbar: {
|
toolbar: {
|
||||||
paddingRight: 24, // keep right padding when drawer closed
|
paddingRight: 24, // keep right padding when drawer closed
|
||||||
},
|
},
|
||||||
toolbarIcon: {
|
toolbarIcon: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "flex-end",
|
justifyContent: "flex-end",
|
||||||
padding: "0 8px",
|
padding: "0 8px",
|
||||||
minHeight: "48px",
|
minHeight: "48px",
|
||||||
},
|
},
|
||||||
appBar: {
|
appBar: {
|
||||||
zIndex: theme.zIndex.drawer + 1,
|
zIndex: theme.zIndex.drawer + 1,
|
||||||
transition: theme.transitions.create(["width", "margin"], {
|
transition: theme.transitions.create(["width", "margin"], {
|
||||||
easing: theme.transitions.easing.sharp,
|
easing: theme.transitions.easing.sharp,
|
||||||
duration: theme.transitions.duration.leavingScreen,
|
duration: theme.transitions.duration.leavingScreen,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
appBarShift: {
|
appBarShift: {
|
||||||
marginLeft: drawerWidth,
|
marginLeft: drawerWidth,
|
||||||
width: `calc(100% - ${drawerWidth}px)`,
|
width: `calc(100% - ${drawerWidth}px)`,
|
||||||
transition: theme.transitions.create(["width", "margin"], {
|
transition: theme.transitions.create(["width", "margin"], {
|
||||||
easing: theme.transitions.easing.sharp,
|
easing: theme.transitions.easing.sharp,
|
||||||
duration: theme.transitions.duration.enteringScreen,
|
duration: theme.transitions.duration.enteringScreen,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
menuButton: {
|
menuButton: {
|
||||||
marginRight: 36,
|
marginRight: 36,
|
||||||
},
|
},
|
||||||
menuButtonHidden: {
|
menuButtonHidden: {
|
||||||
display: "none",
|
display: "none",
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
},
|
},
|
||||||
drawerPaper: {
|
drawerPaper: {
|
||||||
position: "relative",
|
position: "relative",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
width: drawerWidth,
|
width: drawerWidth,
|
||||||
transition: theme.transitions.create("width", {
|
transition: theme.transitions.create("width", {
|
||||||
easing: theme.transitions.easing.sharp,
|
easing: theme.transitions.easing.sharp,
|
||||||
duration: theme.transitions.duration.enteringScreen,
|
duration: theme.transitions.duration.enteringScreen,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
drawerPaperClose: {
|
drawerPaperClose: {
|
||||||
overflowX: "hidden",
|
overflowX: "hidden",
|
||||||
transition: theme.transitions.create("width", {
|
transition: theme.transitions.create("width", {
|
||||||
easing: theme.transitions.easing.sharp,
|
easing: theme.transitions.easing.sharp,
|
||||||
duration: theme.transitions.duration.leavingScreen,
|
duration: theme.transitions.duration.leavingScreen,
|
||||||
}),
|
}),
|
||||||
width: theme.spacing(7),
|
width: theme.spacing(7),
|
||||||
[theme.breakpoints.up("sm")]: {
|
[theme.breakpoints.up("sm")]: {
|
||||||
width: theme.spacing(9),
|
width: theme.spacing(9),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
appBarSpacer: {
|
appBarSpacer: {
|
||||||
minHeight: "48px",
|
minHeight: "48px",
|
||||||
},
|
},
|
||||||
content: {
|
content: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
overflow: "auto",
|
overflow: "auto",
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
paddingTop: theme.spacing(4),
|
paddingTop: theme.spacing(4),
|
||||||
paddingBottom: theme.spacing(4),
|
paddingBottom: theme.spacing(4),
|
||||||
},
|
},
|
||||||
paper: {
|
paper: {
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
display: "flex",
|
display: "flex",
|
||||||
overflow: "auto",
|
overflow: "auto",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const LoggedInLayout = ({ children }) => {
|
const LoggedInLayout = ({ children }) => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const [userModalOpen, setUserModalOpen] = useState(false);
|
const [userModalOpen, setUserModalOpen] = useState(false);
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
const { handleLogout, loading } = useContext(AuthContext);
|
const { handleLogout, loading } = useContext(AuthContext);
|
||||||
const [drawerOpen, setDrawerOpen] = useLocalStorage("drawerOpen", true);
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||||
const { user } = useContext(AuthContext);
|
const [drawerVariant, setDrawerVariant] = useState("permanent");
|
||||||
|
const { user } = useContext(AuthContext);
|
||||||
|
|
||||||
const handleMenu = event => {
|
useEffect(() => {
|
||||||
setAnchorEl(event.currentTarget);
|
if (document.body.offsetWidth > 600) {
|
||||||
setMenuOpen(true);
|
setDrawerOpen(true);
|
||||||
};
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
const handleCloseMenu = () => {
|
useEffect(() => {
|
||||||
setAnchorEl(null);
|
if (document.body.offsetWidth < 600) {
|
||||||
setMenuOpen(false);
|
setDrawerVariant("temporary");
|
||||||
};
|
} else {
|
||||||
|
setDrawerVariant("permanent");
|
||||||
|
}
|
||||||
|
}, [drawerOpen]);
|
||||||
|
|
||||||
const handleOpenUserModal = () => {
|
const handleMenu = (event) => {
|
||||||
setUserModalOpen(true);
|
setAnchorEl(event.currentTarget);
|
||||||
handleCloseMenu();
|
setMenuOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClickLogout = () => {
|
const handleCloseMenu = () => {
|
||||||
handleCloseMenu();
|
setAnchorEl(null);
|
||||||
handleLogout();
|
setMenuOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (loading) {
|
const handleOpenUserModal = () => {
|
||||||
return <BackdropLoading />;
|
setUserModalOpen(true);
|
||||||
}
|
handleCloseMenu();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
const handleClickLogout = () => {
|
||||||
<div className={classes.root}>
|
handleCloseMenu();
|
||||||
<Drawer
|
handleLogout();
|
||||||
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 />}
|
|
||||||
|
|
||||||
<div>
|
const drawerClose = () => {
|
||||||
<IconButton
|
if (document.body.offsetWidth < 600) {
|
||||||
aria-label="account of current user"
|
setDrawerOpen(false);
|
||||||
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}
|
if (loading) {
|
||||||
</main>
|
return <BackdropLoading />;
|
||||||
</div>
|
}
|
||||||
);
|
|
||||||
|
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;
|
export default LoggedInLayout;
|
||||||
|
|||||||
Reference in New Issue
Block a user