Refactor Toolbar
This commit is contained in:
parent
ef3dc2a71a
commit
68f15248d6
2 changed files with 163 additions and 71 deletions
|
|
@ -11,7 +11,17 @@ import {
|
|||
} from '@mui/material';
|
||||
import { useState } from 'react';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
function Toolbar({ title, layoutType, avatarMenuOptions }) {
|
||||
const {
|
||||
box,
|
||||
menuBoxContainer,
|
||||
menuBox,
|
||||
notificationIconButton,
|
||||
menuNotifications,
|
||||
menuUser,
|
||||
} = styles[layoutType];
|
||||
const [anchorElUser, setAnchorElUser] = useState(null);
|
||||
const [anchorElNotifications, setAnchorElNotifications] = useState(null);
|
||||
|
||||
|
|
@ -19,20 +29,15 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
|
|||
return (
|
||||
<Box sx={box}>
|
||||
{title}
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '20px',
|
||||
}}
|
||||
>
|
||||
<Box sx={menuBoxContainer}>
|
||||
<Box sx={menuBox}>
|
||||
<Tooltip title="Ver notificações">
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="show 17 new notifications"
|
||||
color="inherit"
|
||||
onClick={e => setAnchorElNotifications(e.currentTarget)}
|
||||
sx={{ p: 2 }}
|
||||
sx={notificationIconButton}
|
||||
>
|
||||
<Badge badgeContent={17} color="success">
|
||||
<NotificationsOutlined />
|
||||
|
|
@ -40,18 +45,12 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
|
|||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
sx={{ mt: '45px' }}
|
||||
sx={menuNotifications.sx}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNotifications}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
anchorOrigin={menuNotifications.anchorOrigin}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={menuNotifications.transformOrigin}
|
||||
open={Boolean(anchorElNotifications)}
|
||||
onClose={() => setAnchorElNotifications(null)}
|
||||
>
|
||||
|
|
@ -69,18 +68,12 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
|
|||
</Tooltip>
|
||||
|
||||
<Menu
|
||||
sx={{ mt: '45px' }}
|
||||
sx={menuUser.sx}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
anchorOrigin={menuUser.anchorOrigin}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={menuUser.transformOrigin}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={() => setAnchorElUser(null)}
|
||||
>
|
||||
|
|
@ -96,22 +89,17 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
|
|||
);
|
||||
} else if (layoutType === 'mobile') {
|
||||
return (
|
||||
<Box sx={mobileBox}>
|
||||
<Box sx={box}>
|
||||
{title}
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: '20px',
|
||||
}}
|
||||
>
|
||||
<Box sx={menuBoxContainer}>
|
||||
<Box sx={menuBox}>
|
||||
<Tooltip title="Ver notificações">
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="show 17 new notifications"
|
||||
color="inherit"
|
||||
onClick={e => setAnchorElNotifications(e.currentTarget)}
|
||||
sx={{ p: 2 }}
|
||||
sx={notificationIconButton}
|
||||
>
|
||||
<Badge badgeContent={17} color="success">
|
||||
<NotificationsOutlined />
|
||||
|
|
@ -119,18 +107,12 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
|
|||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
sx={{ mt: '45px' }}
|
||||
sx={menuNotifications.sx}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNotifications}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
anchorOrigin={menuNotifications.anchorOrigin}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={menuNotifications.transformOrigin}
|
||||
open={Boolean(anchorElNotifications)}
|
||||
onClose={() => setAnchorElNotifications(null)}
|
||||
>
|
||||
|
|
@ -148,18 +130,12 @@ function Toolbar({ title, layoutType, avatarMenuOptions }) {
|
|||
</Tooltip>
|
||||
|
||||
<Menu
|
||||
sx={{ mt: '45px' }}
|
||||
sx={menuUser.sx}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
anchorOrigin={menuUser.anchorOrigin}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={menuUser.transformOrigin}
|
||||
open={Boolean(anchorElUser)}
|
||||
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;
|
||||
134
src/components/Toolbar/styles.js
Normal file
134
src/components/Toolbar/styles.js
Normal 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;
|
||||
Loading…
Reference in a new issue