diff --git a/src/App.js b/src/App.js
index 7265177..bea1a42 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,4 @@
import { lazy, Suspense } from 'react';
-import { Container } from '@mui/material';
import { useAuthState } from './context/auth';
import LoadingIndicator from './components/LoadingIndicator';
@@ -12,21 +11,9 @@ function App() {
return (
}>
-
- {isAuthenticated ? : }
-
+ {isAuthenticated ? : }
);
}
-const container = {
- height: '100vh',
- margin: 0,
- padding: 0,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: 'primary.mainBackground',
-};
-
export default App;
diff --git a/src/AuthenticatedApp.js b/src/AuthenticatedApp.js
index 49f24f6..8200fc1 100644
--- a/src/AuthenticatedApp.js
+++ b/src/AuthenticatedApp.js
@@ -7,35 +7,59 @@ import {
Info,
InfoOutlined,
} from '@mui/icons-material';
-import MainDrawer from './components/MainDrawer';
+import MainMenu from './components/MainMenu';
import Home from './screens/Home';
import Information from './screens/Information';
import Calendar from './screens/Calendar';
+import { Container } from '@mui/system';
+import useLayoutType from './hooks/useLayoutType';
function AuthenticatedApp() {
const { pathname } = useLocation();
+ const layoutType = useLayoutType();
+
return (
- <>
-
+
+
} />
} />
} />
} />
- >
+
);
}
+const container = {
+ height: '100vh',
+ margin: 0,
+ padding: 0,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'primary.mainBackground',
+};
+
+const mobileContainer = {
+ ...container,
+ flexDirection: 'column-reverse',
+};
+
const menuOptions = activePath => [
{
+ id: 0,
text: 'Página Inicial',
selectedIcon: ,
unselectedIcon: ,
pathname: '/home',
- isActive: activePath === '/home',
+ isActive: activePath === '/home' || activePath === '/login',
},
{
+ id: 1,
text: 'Informações',
selectedIcon: ,
unselectedIcon: ,
@@ -43,6 +67,7 @@ const menuOptions = activePath => [
isActive: activePath === '/info',
},
{
+ id: 2,
text: 'Calendário',
selectedIcon: ,
unselectedIcon: ,
diff --git a/src/UnauthenticatedApp.js b/src/UnauthenticatedApp.js
index 13f4c5a..18d2b64 100644
--- a/src/UnauthenticatedApp.js
+++ b/src/UnauthenticatedApp.js
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Container } from '@mui/material';
import { Navigate, Route, Routes } from 'react-router-dom';
import Login from './screens/Login';
@@ -6,14 +6,24 @@ import UnauthenticatedHome from './screens/UnauthenticatedHome';
function UnauthenticatedApp() {
return (
-
+
} />
} />
} />
-
+
);
}
+const container = {
+ height: '100vh',
+ margin: 0,
+ padding: 0,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'primary.mainBackground',
+};
+
export default UnauthenticatedApp;
diff --git a/src/components/MainDrawer.js b/src/components/MainDrawer.js
deleted file mode 100644
index b97a25b..0000000
--- a/src/components/MainDrawer.js
+++ /dev/null
@@ -1,71 +0,0 @@
-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',
- },
-};
-
-const listItemIcon = {
- color: 'white',
-};
-
-export default MainDrawer;
diff --git a/src/components/MainMenu.js b/src/components/MainMenu.js
new file mode 100644
index 0000000..b15a15c
--- /dev/null
+++ b/src/components/MainMenu.js
@@ -0,0 +1,113 @@
+import {
+ BottomNavigation,
+ BottomNavigationAction,
+ Box,
+ Drawer,
+ List,
+ ListItem,
+ ListItemButton,
+ ListItemIcon,
+ ListItemText,
+ Toolbar,
+} from '@mui/material';
+import { useState } from 'react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import logoImage from '../assets/if-salas-logo.svg';
+
+function MainMenu({ options, layoutType }) {
+ const navigate = useNavigate();
+ const [selectedOption, setSelectedOption] = useState(
+ options.find(option => option.isActive)
+ );
+
+ switch (layoutType) {
+ case 'desktop':
+ return (
+
+
+
+
+
+ {options.map(option => (
+
+
+
+
+ {option.unselectedIcon}
+
+
+
+
+
+ ))}
+
+
+ );
+
+ case 'mobile':
+ return (
+
+ {
+ const newOption = options.find(option => option.id === newValue);
+ setSelectedOption(newOption);
+ navigate(newOption.pathname, { replace: true });
+ }}
+ showLabels
+ value={selectedOption.id}
+ >
+ {options.map(option => (
+
+ ))}
+
+
+ );
+
+ default:
+ return null;
+ }
+}
+
+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',
+ },
+};
+
+const listItemIcon = {
+ color: 'white',
+};
+
+export default MainMenu;