From b4c4de09dfd926a63cd07da1dc59094881dd1006 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= Date: Thu, 9 Jun 2022 00:00:40 -0300 Subject: [PATCH] Add main drawer --- package-lock.json | 34 +++++++++++++++++ package.json | 1 + src/AuthenticatedApp.js | 47 ++++++++++++++++++++--- src/components/MainDrawer.js | 74 ++++++++++++++++++++++++++++++++++++ src/index.css | 6 +++ 5 files changed, 157 insertions(+), 5 deletions(-) create mode 100644 src/components/MainDrawer.js 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 ( + + + Logotipo + + + {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;