leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor Toolbar

Browse source
This commit is contained in:
Leonardo Murça 2022-07-05 13:22:22 -03:00
parent ef3dc2a71a
commit 68f15248d6
2 changed files with 163 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/components/Toolbar.js → src/components/Toolbar/index.js
View file

@ -11,7 +11,17 @@ import {
} from '@mui/material'; } from '@mui/material';
import { useState } from 'react'; import { useState } from 'react';
import styles from './styles';
function Toolbar({ title, layoutType, avatarMenuOptions }) { function Toolbar({ title, layoutType, avatarMenuOptions }) {
const {
box,
menuBoxContainer,
menuBox,
notificationIconButton,
menuNotifications,
menuUser,
} = styles[layoutType];
const [anchorElUser, setAnchorElUser] = useState(null); const [anchorElUser, setAnchorElUser] = useState(null);
const [anchorElNotifications, setAnchorElNotifications] = useState(null); const [anchorElNotifications, setAnchorElNotifications] = useState(null);
@ -19,20 +29,15 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
return ( return (
<Box sx={box}> <Box sx={box}>
{title} {title}
<Box sx={{ flexGrow: 0 }}> <Box sx={menuBoxContainer}>
<Box <Box sx={menuBox}>
sx={{
display: 'flex',
gap: '20px',
}}
>
<Tooltip title="Ver notificações"> <Tooltip title="Ver notificações">
<IconButton <IconButton
size="large" size="large"
aria-label="show 17 new notifications" aria-label="show 17 new notifications"
color="inherit" color="inherit"
onClick={e => setAnchorElNotifications(e.currentTarget)} onClick={e => setAnchorElNotifications(e.currentTarget)}
sx={{ p: 2 }} sx={notificationIconButton}
> >
<Badge badgeContent={17} color="success"> <Badge badgeContent={17} color="success">
<NotificationsOutlined /> <NotificationsOutlined />
@ -40,18 +45,12 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Menu <Menu
sx={{ mt: '45px' }} sx={menuNotifications.sx}
id="menu-appbar" id="menu-appbar"
anchorEl={anchorElNotifications} anchorEl={anchorElNotifications}
anchorOrigin={{ anchorOrigin={menuNotifications.anchorOrigin}
vertical: 'top',
horizontal: 'right',
}}
keepMounted keepMounted
transformOrigin={{ transformOrigin={menuNotifications.transformOrigin}
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElNotifications)} open={Boolean(anchorElNotifications)}
onClose={() => setAnchorElNotifications(null)} onClose={() => setAnchorElNotifications(null)}
> >
@ -69,18 +68,12 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
</Tooltip> </Tooltip>
<Menu <Menu
sx={{ mt: '45px' }} sx={menuUser.sx}
id="menu-appbar" id="menu-appbar"
anchorEl={anchorElUser} anchorEl={anchorElUser}
anchorOrigin={{ anchorOrigin={menuUser.anchorOrigin}
vertical: 'top',
horizontal: 'right',
}}
keepMounted keepMounted
transformOrigin={{ transformOrigin={menuUser.transformOrigin}
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)} open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)} onClose={() => setAnchorElUser(null)}
> >
@ -96,22 +89,17 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
); );
} else if (layoutType === 'mobile') { } else if (layoutType === 'mobile') {
return ( return (
<Box sx={mobileBox}> <Box sx={box}>
{title} {title}
<Box sx={{ flexGrow: 0 }}> <Box sx={menuBoxContainer}>
<Box <Box sx={menuBox}>
sx={{
display: 'flex',
gap: '20px',
}}
>
<Tooltip title="Ver notificações"> <Tooltip title="Ver notificações">
<IconButton <IconButton
size="large" size="large"
aria-label="show 17 new notifications" aria-label="show 17 new notifications"
color="inherit" color="inherit"
onClick={e => setAnchorElNotifications(e.currentTarget)} onClick={e => setAnchorElNotifications(e.currentTarget)}
sx={{ p: 2 }} sx={notificationIconButton}
> >
<Badge badgeContent={17} color="success"> <Badge badgeContent={17} color="success">
<NotificationsOutlined /> <NotificationsOutlined />
@ -119,18 +107,12 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Menu <Menu
sx={{ mt: '45px' }} sx={menuNotifications.sx}
id="menu-appbar" id="menu-appbar"
anchorEl={anchorElNotifications} anchorEl={anchorElNotifications}
anchorOrigin={{ anchorOrigin={menuNotifications.anchorOrigin}
vertical: 'top',
horizontal: 'right',
}}
keepMounted keepMounted
transformOrigin={{ transformOrigin={menuNotifications.transformOrigin}
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElNotifications)} open={Boolean(anchorElNotifications)}
onClose={() => setAnchorElNotifications(null)} onClose={() => setAnchorElNotifications(null)}
> >
@ -148,18 +130,12 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
</Tooltip> </Tooltip>
<Menu <Menu
sx={{ mt: '45px' }} sx={menuUser.sx}
id="menu-appbar" id="menu-appbar"
anchorEl={anchorElUser} anchorEl={anchorElUser}
anchorOrigin={{ anchorOrigin={menuUser.anchorOrigin}
vertical: 'top',
horizontal: 'right',
}}
keepMounted keepMounted
transformOrigin={{ transformOrigin={menuUser.transformOrigin}
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)} open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)} onClose={() => setAnchorElUser(null)}
> >
@ -176,22 +152,4 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
} }
} }
const box = {
display: 'flex',
marginLeft: '230px',
height: '130px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 70px',
borderBottom: '3px solid #CFCFCF',
};
const mobileBox = {
...box,
marginLeft: 0,
height: '70px',
padding: '0 10px',
justifyContent: 'space-around',
};
export default Toolbar; export default Toolbar;

134
src/components/Toolbar/styles.js Normal file
View file

@ -0,0 +1,134 @@
// ========== Desktop ==========
const desktopBox = {
display: 'flex',
marginLeft: '230px',
height: '130px',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 70px',
borderBottom: '3px solid #CFCFCF',
};
const desktopMenuBoxContainer = {
flexGrow: 0,
};
const desktopMenuBox = {
display: 'flex',
gap: '20px',
};
const desktopNotificationIconButton = {
p: 2,
};
const desktopMenuNotifications = {
sx: {
mt: '45px',
},
anchorOrigin: {
vertical: 'top',
horizontal: 'right',
},
transformOrigin: {
vertical: 'top',
horizontal: 'right',
},
};
const desktopMenuUser = {
sx: {
mt: '45px',
},
anchorOrigin: {
vertical: 'top',
horizontal: 'right',
},
transformOrigin: {
vertical: 'top',
horizontal: 'right',
},
};
const desktop = {
box: desktopBox,
menuBoxContainer: desktopMenuBoxContainer,
menuBox: desktopMenuBox,
notificationIconButton: desktopNotificationIconButton,
menuNotifications: desktopMenuNotifications,
menuUser: desktopMenuUser,
};
// ========== Mobile ==========
const mobileBox = {
display: 'flex',
alignItems: 'center',
borderBottom: '3px solid #CFCFCF',
marginLeft: 0,
height: '70px',
padding: '0 10px',
justifyContent: 'space-around',
};
const mobileMenuBoxContainer = {
flexGrow: 0,
};
const mobileMenuBox = {
display: 'flex',
gap: '20px',
};
const mobileNotificationIconButton = {
p: 2,
};
const mobileMenuNotifications = {
sx: {
mt: '45px',
},
anchorOrigin: {
vertical: 'top',
horizontal: 'right',
},
transformOrigin: {
vertical: 'top',
horizontal: 'right',
},
};
const mobileMenuUser = {
sx: {
mt: '45px',
},
anchorOrigin: {
vertical: 'top',
horizontal: 'right',
},
transformOrigin: {
vertical: 'top',
horizontal: 'right',
},
};
const mobile = {
box: mobileBox,
menuBoxContainer: mobileMenuBoxContainer,
menuBox: mobileMenuBox,
notificationIconButton: mobileNotificationIconButton,
menuNotifications: mobileMenuNotifications,
menuUser: mobileMenuUser,
};
// ========== Unset ==========
const unset = {
box: null,
menuBoxContainer: null,
menuBox: null,
notificationIconButton: null,
menuNotifications: null,
menuUser: null,
};
const styles = { desktop, mobile, unset };
export default styles;