Add main drawer

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.8.3",
         "@mui/material": "^5.8.2",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.2.0",
@@ -2791,6 +2792,31 @@
         }
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.8.3.tgz",
+      "integrity": "sha512-dAdhimSLKOV0Q8FR7AYGEaCrTUh9OV7zU4Ueo5REoUt4cC3Vy+UBKDjZk66x5ezaYb63AFgQIFwtnZj3B/QDbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.8.2",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.2.tgz",
@@ -16990,6 +17016,14 @@
         "react-is": "^17.0.2"
       }
     },
+    "@mui/icons-material": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.8.3.tgz",
+      "integrity": "sha512-dAdhimSLKOV0Q8FR7AYGEaCrTUh9OV7zU4Ueo5REoUt4cC3Vy+UBKDjZk66x5ezaYb63AFgQIFwtnZj3B/QDbQ==",
+      "requires": {
+        "@babel/runtime": "^7.17.2"
+      }
+    },
     "@mui/material": {
       "version": "5.8.2",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.2.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.3",
     "@mui/material": "^5.8.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",

src/AuthenticatedApp.js

@@ -1,13 +1,50 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import {
+  CalendarMonth,
+  CalendarMonthOutlined,
+  Home as HomeIcon,
+  HomeOutlined,
+  Info,
+  InfoOutlined,
+} from '@mui/icons-material';
+import MainDrawer from './components/MainDrawer';
 import Home from './screens/Home';
 
 function AuthenticatedApp() {
+  const { pathname } = useLocation();
   return (
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/login" element={<Navigate to="/" />} />
-    </Routes>
+    <>
+      <MainDrawer options={menuOptions(pathname)} />
+      <Routes>
+        <Route path="/home" element={<Home />} />
+        <Route path="/login" element={<Navigate to="/home" />} />
+      </Routes>
+    </>
   );
 }
 
+const menuOptions = activePath => [
+  {
+    text: 'Página Inicial',
+    selectedIcon: <HomeIcon />,
+    unselectedIcon: <HomeOutlined />,
+    pathname: '/home',
+    isActive: activePath === '/home',
+  },
+  {
+    text: 'Informações',
+    selectedIcon: <Info />,
+    unselectedIcon: <InfoOutlined />,
+    pathname: '/info',
+    isActive: activePath === '/info',
+  },
+  {
+    text: 'Calendário',
+    selectedIcon: <CalendarMonth />,
+    unselectedIcon: <CalendarMonthOutlined />,
+    pathname: '/calendar',
+    isActive: activePath === '/calendar',
+  },
+];
+
 export default AuthenticatedApp;

src/components/MainDrawer.js

@@ -0,0 +1,77 @@
+import {
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+} from '@mui/material';
+import { NavLink } from 'react-router-dom';
+import logoImage from '../assets/if-salas-logo.svg';
+
+function MainDrawer({ options }) {
+  return (
+    <Drawer sx={drawer} variant="permanent" anchor="left">
+      <Toolbar disableGutters sx={toolbar}>
+        <img src={logoImage} width="70" alt="Logotipo" />
+      </Toolbar>
+      <List>
+        {options.map(option => (
+          <ListItem key={option.text} sx={listItem} disablePadding>
+            <NavLink to={option.pathname}>
+              <ListItemButton selected={option.isActive}>
+                <ListItemIcon sx={listItemIcon}>
+                  {option.unselectedIcon}
+                </ListItemIcon>
+                <ListItemText primary={option.text} />
+              </ListItemButton>
+            </NavLink>
+          </ListItem>
+        ))}
+      </List>
+    </Drawer>
+  );
+}
+
+const drawerWidth = 230;
+const drawer = {
+  width: drawerWidth,
+  flexShrink: 0,
+  '& .MuiDrawer-paper': {
+    width: drawerWidth,
+    boxSizing: 'border-box',
+    backgroundColor: 'secondary.main',
+  },
+};
+
+const toolbar = {
+  display: 'flex',
+  justifyContent: 'center',
+  padding: '20px 0',
+};
+
+const listItem = {
+  '> a': {
+    width: drawerWidth,
+    textDecoration: 'none',
+    color: 'white',
+    height: 'inherit',
+  },
+  '.Mui-selected': {
+    backgroundColor: '#003708',
+    borderLeft: '4px solid #ffffff',
+    ':hover': {
+      backgroundColor: '#003708',
+    },
+  },
+  ':hover': {
+    backgroundColor: '#003708',
+  },
+};
+
+const listItemIcon = {
+  color: 'white',
+};
+
+export default MainDrawer;

src/index.css

@@ -8,6 +8,12 @@ body {
   background-color: #EEEEEE;
 }
 
+* {
+  box-sizing: border-box;
+-moz-box-sizing: border-box;
+-webkit-box-sizing: border-box;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;