diff --git a/src/AuthenticatedApp.js b/src/AuthenticatedApp.js
index 8200fc1..0731cca 100644
--- a/src/AuthenticatedApp.js
+++ b/src/AuthenticatedApp.js
@@ -13,24 +13,37 @@ 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 (
-
-
-
- } />
- } />
- } />
- } />
-
-
+ <>
+
+ Olá, {state.user.name} 👋
+
+ }
+ layoutType={layoutType}
+ />
+
+
+
+ } />
+ } />
+ } />
+ } />
+
+
+
);
}
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
new file mode 100644
index 0000000..b5f358d
--- /dev/null
+++ b/src/components/Toolbar.js
@@ -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 (
+
+ {title}
+
+
+
+ setAnchorElNotifications(e.currentTarget)}
+ sx={{ p: 2 }}
+ >
+
+
+
+
+
+
+
+ setAnchorElUser(e.currentTarget)}
+ sx={{ p: 0 }}
+ >
+
+
+
+
+
+
+
+
+ );
+
+ case 'mobile':
+ return (
+
+ {title}
+
+
+
+ setAnchorElNotifications(e.currentTarget)}
+ sx={{ p: 2 }}
+ >
+
+
+
+
+
+
+
+ setAnchorElUser(e.currentTarget)}
+ sx={{ p: 0 }}
+ >
+
+
+
+
+
+
+
+
+ );
+
+ 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;
diff --git a/src/index.css b/src/index.css
index eb752e6..4be86b4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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;