From 24045280c868c1f1b5d3ca83ddabfd5c6150aadc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Wed, 15 Jun 2022 14:31:09 -0300
Subject: [PATCH] Create responsive toolbar

---
 src/AuthenticatedApp.js   |  37 ++++---
 src/components/Toolbar.js | 206 ++++++++++++++++++++++++++++++++++++++
 src/index.css             |   2 +-
 3 files changed, 232 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Toolbar.js

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 (
-    <Container
-      maxWidth="false"
-      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>
+    <>
+      <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}
+      >
+        <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>
+    </>
   );
 }
 
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 (
+        <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;
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;