feat: add LeftMenu and TopBar

src/App.jsx

@@ -1,8 +1,24 @@
-function App() {
+import { useState, useEffect } from "react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import TopBar from "@/components/TopBar";
+import LeftMenu from "./components/LeftMenu";
+import Home from "./components/Home";
+import LeftMenuProvider from "./providers/LeftMenuProvider";
+
+const App = () => {
   return (
-    <div className="App">
-    </div>
-  )
-}
+    <BrowserRouter>
+      <LeftMenuProvider>
+        <TopBar />
+        <LeftMenu />
+      </LeftMenuProvider>
+      <Routes>
+        <Route exact path={"/"} element={<Navigate to="/app" />} />
+        <Route path={"/app"} element={<Home />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
 
-export default App
+export default App;

src/api/request.js

@@ -0,0 +1,72 @@
+import axios from 'axios';
+import { API_URL } from 'core/configs/env';
+import { isRefreshTokenValid } from './auth';
+import { getSessionData, replaceSessionData } from '../lib/storage';
+import { AUTH_URL, TOKEN_URL, CLIENT_ID, CLIENT_SECRET } from 'core/configs/env.js';
+
+const apiBasicAuthCredentials = `${CLIENT_ID}:${CLIENT_SECRET}`;
+
+export const request = (config) => {
+  const headers = {
+    Authorization: `Basic ${window.btoa(apiBasicAuthCredentials)}`,
+    'Content-Type': 'application/json;charset=UTF-8',
+  };
+
+  return axios({
+    headers,
+    baseURL: API_URL,
+    ...config,
+  });
+};
+
+export const privateRequest = (config) => {
+  const headers = {
+    Authorization: `Bearer ${getSessionData()?.accessToken}`,
+  };
+
+  return request({ ...config, headers });
+};
+
+export const loginRequest = (config) => {
+  const headers = {
+    Authorization: `Basic ${window.btoa(apiBasicAuthCredentials)}`,
+    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+  };
+
+  return request({ ...config, headers });
+};
+
+// axios.interceptors.response.use(
+//   (response) => {
+//     return response;
+//   },
+//   async (err) => {
+//     const originalRequest = err.response.config;
+
+//     if (err.response?.status === 401 && !isRefreshTokenValid()) {
+//       window.dirtLogout = true;
+//       return Promise.reject(err);
+//     }
+
+//     if (
+//       err.response?.status === 401 &&
+//       !originalRequest.__isRetry &&
+//       !originalRequest.__isTryRefreshToken
+//     ) {
+//       originalRequest.__isRetry = true;
+
+//       try {
+//         const response = await refreshAccessToken();
+//         replaceSessionData(response.data);
+//         console.warn('Access token refreshed');
+//         return privateRequest(originalRequest);
+//       } catch (_error) {
+//         window.dirtLogout = true;
+//         console.error('Access token expirated');
+//         return Promise.reject(_error);
+//       }
+//     }
+
+//     return Promise.reject(err);
+//   }
+// );

src/components/Home/HomePage.jsx

@@ -0,0 +1,9 @@
+const Home = () => {
+  return (
+    <>
+      HOME
+    </>
+  );
+};
+
+export default Home;

src/components/Home/index.jsx

@@ -0,0 +1,3 @@
+import HomePage from './HomePage.jsx';
+
+export default HomePage;

src/components/LeftMenu/LeftMenu.jsx

@@ -0,0 +1,144 @@
+import { useState, useContext } from "react";
+import { LeftMenuContext } from "@/providers/LeftMenuProvider";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import {
+  Inbox as InboxIcon,
+  Event as EventIcon,
+  ExpandLess as ExpandLessIcon,
+  ExpandMore as ExpandMoreIcon,
+  Circle as CircleIcon,
+  CalendarMonth as CalendarMonthIcon,
+} from "@mui/icons-material";
+import { StyledDrawer, Main } from "./styles";
+import {
+  Divider,
+  List,
+  Box,
+  Typography,
+  ListItemText,
+  ListItemButton,
+  Collapse,
+} from "@mui/material";
+
+const LeftMenu = () => {
+  const [selectedIndex, setSelectedIndex] = useState(1);
+  const [projectListIsOpen, setProjectListIsOpen] = useState(true);
+  const { isOpen, setIsOpen } = useContext(LeftMenuContext);
+
+  const handleListItemClick = (event, index) => {
+    setSelectedIndex(index);
+  };
+
+  const handleProjectListClick = () => {
+    setProjectListIsOpen(!projectListIsOpen);
+  };
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <StyledDrawer variant="persistent" anchor="left" open={isOpen}>
+        <Divider />
+
+        <List component="nav">
+          <ListItemButton
+            selected={selectedIndex === 0}
+            onClick={(event) => handleListItemClick(event, 0)}
+          >
+            <ListItemIcon>
+              <InboxIcon />
+            </ListItemIcon>
+            <ListItemText primary="Entrada" />
+          </ListItemButton>
+
+          <ListItemButton
+            selected={selectedIndex === 1}
+            onClick={(event) => handleListItemClick(event, 1)}
+          >
+            <ListItemIcon>
+              <EventIcon />
+            </ListItemIcon>
+            <ListItemText primary="Hoje" />
+          </ListItemButton>
+
+          <ListItemButton
+            selected={selectedIndex === 2}
+            onClick={(event) => handleListItemClick(event, 2)}
+          >
+            <ListItemIcon>
+              <CalendarMonthIcon />
+            </ListItemIcon>
+            <ListItemText primary="Em breve" />
+          </ListItemButton>
+
+          <Divider />
+
+          <ListItemButton onClick={handleProjectListClick}>
+            <ListItemIcon>
+              <InboxIcon />
+            </ListItemIcon>
+            <ListItemText primary="Projetos" />
+            {projectListIsOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </ListItemButton>
+        </List>
+        <Collapse in={projectListIsOpen} timeout="auto" unmountOnExit>
+          <List component="div" disablePadding>
+            <ListItemButton
+              sx={{ pl: 4 }}
+              selected={selectedIndex === 3}
+              onClick={(event) => handleListItemClick(event, 3)}
+            >
+              <ListItemIcon>
+                <CircleIcon fontSize="small" color="primary" />
+              </ListItemIcon>
+              <ListItemText primary="Projeto 1" />
+            </ListItemButton>
+
+            <ListItemButton
+              sx={{ pl: 4 }}
+              selected={selectedIndex === 4}
+              onClick={(event) => handleListItemClick(event, 4)}
+            >
+              <ListItemIcon>
+                <CircleIcon fontSize={"small"} color="warning" />
+              </ListItemIcon>
+              <ListItemText primary="Projeto 2" />
+            </ListItemButton>
+          </List>
+        </Collapse>
+      </StyledDrawer>
+
+      <Main open={isOpen}>
+        <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus
+          dolor purus non enim praesent elementum facilisis leo vel. Risus at
+          ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum
+          quisque non tellus. Convallis convallis tellus id interdum velit
+          laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed
+          adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies
+          integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate
+          eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo
+          quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat
+          vivamus at augue. At augue eget arcu dictum varius duis at consectetur
+          lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien
+          faucibus et molestie ac.
+        </Typography>
+        <Typography paragraph>
+          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est
+          ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar
+          elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse
+          sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat
+          mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis
+          risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas
+          purus viverra accumsan in. In hendrerit gravida rutrum quisque non
+          tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant
+          morbi tristique senectus et. Adipiscing elit duis tristique
+          sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
+          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
+          posuere sollicitudin aliquam ultrices sagittis orci a.
+        </Typography>
+      </Main>
+    </Box>
+  );
+};
+
+export default LeftMenu;

src/components/LeftMenu/index.jsx

@@ -0,0 +1,3 @@
+import LeftMenu from './LeftMenu';
+
+export default LeftMenu;

src/components/LeftMenu/styles.jsx

@@ -0,0 +1,33 @@
+import { styled } from "@mui/material/styles";
+import { Drawer } from "@mui/material";
+
+const drawerWidth = 300;
+
+export const StyledDrawer = styled(Drawer)(({ theme }) => ({
+  width: drawerWidth,
+  flexShrink: 0,
+  "& .MuiDrawer-paper": {
+    position: "relative",
+    width: drawerWidth,
+    boxSizing: "border-box",
+  },
+}));
+
+export const Main = styled("main", {
+  shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+  flexGrow: 1,
+  padding: theme.spacing(3),
+  transition: theme.transitions.create("margin", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  marginLeft: `-${drawerWidth}px`,
+  ...(open && {
+    transition: theme.transitions.create("margin", {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginLeft: 0,
+  }),
+}));