diff --git a/package-lock.json b/package-lock.json
index 31740d4..519c034 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 19991b5..e8952a9 100644
--- a/package.json
+++ b/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",
diff --git a/src/AuthenticatedApp.js b/src/AuthenticatedApp.js
index 2e52cf2..4c3cbca 100644
--- a/src/AuthenticatedApp.js
+++ b/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 (
-
- } />
- } />
-
+ <>
+
+
+ } />
+ } />
+
+ >
);
}
+const menuOptions = activePath => [
+ {
+ text: 'Página Inicial',
+ selectedIcon: ,
+ unselectedIcon: ,
+ pathname: '/home',
+ isActive: activePath === '/home',
+ },
+ {
+ text: 'Informações',
+ selectedIcon: ,
+ unselectedIcon: ,
+ pathname: '/info',
+ isActive: activePath === '/info',
+ },
+ {
+ text: 'Calendário',
+ selectedIcon: ,
+ unselectedIcon: ,
+ pathname: '/calendar',
+ isActive: activePath === '/calendar',
+ },
+];
+
export default AuthenticatedApp;
diff --git a/src/components/MainDrawer.js b/src/components/MainDrawer.js
new file mode 100644
index 0000000..a977ea3
--- /dev/null
+++ b/src/components/MainDrawer.js
@@ -0,0 +1,74 @@
+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 (
+
+
+
+
+
+ {options.map(option => (
+
+
+
+
+ {option.unselectedIcon}
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+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',
+ },
+};
+
+const listItemIcon = {
+ color: 'white',
+};
+
+export default MainDrawer;
diff --git a/src/index.css b/src/index.css
index c21487c..eb752e6 100644
--- a/src/index.css
+++ b/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;