Create responsive toolbar
This commit is contained in:
parent
c3a3d2345f
commit
24045280c8
3 changed files with 232 additions and 13 deletions
|
|
@ -13,24 +13,37 @@ import Information from './screens/Information';
|
||||||
import Calendar from './screens/Calendar';
|
import Calendar from './screens/Calendar';
|
||||||
import { Container } from '@mui/system';
|
import { Container } from '@mui/system';
|
||||||
import useLayoutType from './hooks/useLayoutType';
|
import useLayoutType from './hooks/useLayoutType';
|
||||||
|
import Toolbar from './components/Toolbar';
|
||||||
|
import { useUser } from './context/user';
|
||||||
|
|
||||||
function AuthenticatedApp() {
|
function AuthenticatedApp() {
|
||||||
|
const { state } = useUser();
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const layoutType = useLayoutType();
|
const layoutType = useLayoutType();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container
|
<>
|
||||||
maxWidth="false"
|
<Toolbar
|
||||||
sx={layoutType === 'desktop' ? container : mobileContainer}
|
title={
|
||||||
>
|
<p style={{ fontSize: layoutType === 'desktop' ? '30px' : '20px' }}>
|
||||||
<MainMenu options={menuOptions(pathname)} layoutType={layoutType} />
|
Olá, <strong>{state.user.name}</strong> 👋
|
||||||
<Routes>
|
</p>
|
||||||
<Route path="/home" element={<Home />} />
|
}
|
||||||
<Route path="/info" element={<Information />} />
|
layoutType={layoutType}
|
||||||
<Route path="/calendar" element={<Calendar />} />
|
/>
|
||||||
<Route path="/login" element={<Navigate to="/home" />} />
|
<Container
|
||||||
</Routes>
|
maxWidth="false"
|
||||||
</Container>
|
sx={layoutType === 'desktop' ? container : mobileContainer}
|
||||||
|
>
|
||||||
|
<MainMenu options={menuOptions(pathname)} layoutType={layoutType} />
|
||||||
|
<Routes>
|
||||||
|
<Route path="/home" element={<Home />} />
|
||||||
|
<Route path="/info" element={<Information />} />
|
||||||
|
<Route path="/calendar" element={<Calendar />} />
|
||||||
|
<Route path="/login" element={<Navigate to="/home" />} />
|
||||||
|
</Routes>
|
||||||
|
</Container>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
206
src/components/Toolbar.js
Normal file
206
src/components/Toolbar.js
Normal 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;
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 20px 0;
|
padding: 0;
|
||||||
font-family: 'Fira Code', monospace;
|
font-family: 'Fira Code', monospace;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue