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

Create responsive toolbar

Browse source
This commit is contained in:
Leonardo Murça 2022-06-15 14:31:09 -03:00
parent c3a3d2345f
commit 24045280c8
3 changed files with 232 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/AuthenticatedApp.js
View file

@ -13,12 +13,24 @@ import Information from './screens/Information';
import Calendar from './screens/Calendar';
import { Container } from '@mui/system';
import useLayoutType from './hooks/useLayoutType';
import Toolbar from './components/Toolbar';
import { useUser } from './context/user';
function AuthenticatedApp() {
const { state } = useUser();
const { pathname } = useLocation();
const layoutType = useLayoutType();
return (
<>
<Toolbar
title={
<p style={{ fontSize: layoutType === 'desktop' ? '30px' : '20px' }}>
Olá, <strong>{state.user.name}</strong> 👋
</p>
}
layoutType={layoutType}
/>
<Container
maxWidth="false"
sx={layoutType === 'desktop' ? container : mobileContainer}
@ -31,6 +43,7 @@ function AuthenticatedApp() {
<Route path="/login" element={<Navigate to="/home" />} />
</Routes>
</Container>
</>
);
}

206
src/components/Toolbar.js Normal file
View file

@ -0,0 +1,206 @@
import { NotificationsOutlined } from '@mui/icons-material';
import {
Avatar,
Badge,
Box,
IconButton,
Menu,
MenuItem,
Tooltip,
Typography,
} from '@mui/material';
import { useState } from 'react';
function Toolbar({ title, layoutType }) {
const [anchorElUser, setAnchorElUser] = useState(null);
const [anchorElNotifications, setAnchorElNotifications] = useState(null);
console.log(layoutType);
switch (layoutType) {
case 'desktop':
return (
<Box sx={box}>
{title}
<Box sx={{ flexGrow: 0 }}>
<Box
sx={{
display: 'flex',
gap: '20px',
}}
>
<Tooltip title="Ver notificações">
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
onClick={e => setAnchorElNotifications(e.currentTarget)}
sx={{ p: 2 }}
>
<Badge badgeContent={17} color="success">
<NotificationsOutlined />
</Badge>
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElNotifications}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElNotifications)}
onClose={() => setAnchorElNotifications(null)}
>
<MenuItem onClick={() => setAnchorElNotifications(null)}>
<Typography textAlign="center">Notificacoes</Typography>
</MenuItem>
</Menu>
<Tooltip title="Ver opções">
<IconButton
onClick={e => setAnchorElUser(e.currentTarget)}
sx={{ p: 0 }}
>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)}
>
<MenuItem onClick={() => setAnchorElUser(null)}>
<Typography textAlign="center">Meu perfil</Typography>
</MenuItem>
<MenuItem onClick={() => setAnchorElUser(null)}>
<Typography textAlign="center">Sair</Typography>
</MenuItem>
</Menu>
</Box>
</Box>
</Box>
);
case 'mobile':
return (
<Box sx={mobileBox}>
{title}
<Box sx={{ flexGrow: 0 }}>
<Box
sx={{
display: 'flex',
gap: '20px',
}}
>
<Tooltip title="Ver notificações">
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
onClick={e => setAnchorElNotifications(e.currentTarget)}
sx={{ p: 2 }}
>
<Badge badgeContent={17} color="success">
<NotificationsOutlined />
</Badge>
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElNotifications}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElNotifications)}
onClose={() => setAnchorElNotifications(null)}
>
<MenuItem onClick={() => setAnchorElNotifications(null)}>
<Typography textAlign="center">Notificacoes</Typography>
</MenuItem>
</Menu>
<Tooltip title="Ver opções">
<IconButton
onClick={e => setAnchorElUser(e.currentTarget)}
sx={{ p: 0 }}
>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)}
onClose={() => setAnchorElUser(null)}
>
<MenuItem onClick={() => setAnchorElUser(null)}>
<Typography textAlign="center">Meu perfil</Typography>
</MenuItem>
<MenuItem onClick={() => setAnchorElUser(null)}>
<Typography textAlign="center">Sair</Typography>
</MenuItem>
</Menu>
</Box>
</Box>
</Box>
);
default:
return null;
}
}
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;

2
src/index.css
View file

@ -1,6 +1,6 @@
body {
margin: 0;
padding: 20px 0;
padding: 0;
font-family: 'Fira Code', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;