✨ feat: create new layout to all frontend

frontend/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.15",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -18,6 +19,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "tailwindcss": "^3.4.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.css

@@ -1,7 +1,5 @@
 * {
   text-align: center;
-  background-color: #382648;
-  color: white;
 }
 
 .App-header {
@@ -17,4 +15,4 @@
 
 .App-link {
   color: #61dafb;
-}
+}

frontend/src/App.tsx

@@ -2,30 +2,24 @@ import './App.css';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import {
   AboutComponent,
-  ChatComponent,
-  CoinectionsComponent,
-  HomeComponent,
   LoginComponent,
+  MainComponent,
   ProfileComponent,
   SettingsComponent,
-  YourCoinsComponent
 } from './components';
 
 function App() {
-  return (<div className="App">
+  return (<>
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<HomeComponent />} />
+        <Route path="/" element={<MainComponent />} />
         <Route path="profile" element={<ProfileComponent />} />
         <Route path="settings" element={<SettingsComponent />} />
-        <Route path="yourcoins" element={<YourCoinsComponent />} />
         <Route path="login" element={<LoginComponent />} />
-        <Route path="coinections" element={<CoinectionsComponent />} />
-        <Route path="chat" element={<ChatComponent />} />
         <Route path="about" element={<AboutComponent />} />
       </Routes>
     </BrowserRouter>
-  </div>
+    </>
   );
 }
 

frontend/src/components/index.ts

@@ -1,20 +1,14 @@
 import { AboutComponent } from "./about_component";
-import { ChatComponent } from "./chat_component";
-import { CoinectionsComponent } from "./coinections_component";
-import { HomeComponent } from "./home_component";
 import { LoginComponent } from "./login_component";
+import { MainComponent } from "./main_component";
 import { ProfileComponent } from "./profile_component";
 import { SettingsComponent } from "./settings_component";
-import { YourCoinsComponent } from "./your_coins_component";
 
 
 export {
-    AboutComponent,
-    ChatComponent,
-    CoinectionsComponent,
-    HomeComponent,    
+    AboutComponent,  
     LoginComponent,
+    MainComponent,
     ProfileComponent,
-    SettingsComponent,
-    YourCoinsComponent
+    SettingsComponent
 }

frontend/src/components/main_component/MainComponent.tsx

@@ -0,0 +1,132 @@
+import React, { ReactElement } from "react";
+import logo from '../../assets/logo-vertical-menu.png';
+import {
+    AppBar,
+    Button,
+    Container,
+    Drawer,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    Toolbar,
+    Typography
+} from "@mui/material";
+import LogoutIcon from '@mui/icons-material/Logout';
+import MenuIcon from '@mui/icons-material/Menu';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import CurrencyExchangeOutlinedIcon from '@mui/icons-material/CurrencyExchangeOutlined';
+import ChatBubbleOutlineOutlinedIcon from '@mui/icons-material/ChatBubbleOutlineOutlined';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { ChatComponent, CoinectionsComponent, HomeComponent, SettingsComponent } from "./components";
+// fazer um comportamento que troque o conteúdo priincipal (Home) pelos demais:
+// Coinections, Chat, Settings e o método de (Logout)
+
+const MainComponent = (): ReactElement => {
+    const [open, setOpen] = React.useState(false);
+
+    const toggleDrawer = (newOpen: boolean) => () => {
+        setOpen(newOpen);
+    };
+
+    const setComponent = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        if (home === false && coinections === false && chat === false && settings === false) {
+            return (<HomeComponent />)
+        }
+        else if (home === true) {
+            return (<HomeComponent />)
+        }
+        else if (coinections === true) {
+            return (<CoinectionsComponent />)
+        }
+        else if (chat === true) {
+            return (<ChatComponent />)
+        }
+        else if (settings === true) {
+            return (<SettingsComponent />)
+        }
+    }
+
+    const goToHome = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        return (
+            home = true,
+            coinections = false,
+            chat = false,
+            settings = false
+        )
+    }
+    const goToCoinections = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        return (
+            home = false,
+            coinections = true,
+            chat = false,
+            settings = false
+        )
+    }
+    const goToChat = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        return (
+            home = false,
+            coinections = false,
+            chat = true,
+            settings = false
+        )
+    }
+    const goToSettings = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        return (
+            home = false,
+            coinections = false,
+            chat = false,
+            settings = true
+        )
+    }
+
+    let home: boolean
+    let coinections: boolean
+    let chat: boolean
+    let settings: boolean
+
+    return (<>
+        <AppBar position="relative" style={{ backgroundColor: '#382648' }}>
+            <Toolbar>
+                <Typography variant="h3">
+                    <Button aria-label="delete" color='inherit' size='large' onClick={toggleDrawer(true)}><MenuIcon /></Button>
+                </Typography>
+            </Toolbar>
+        </AppBar>
+        <Drawer
+            open={open}
+            onClose={toggleDrawer(false)}
+            anchor="left"
+            disableScrollLock
+        >
+            <List style={{ width: '100%', height: '100%', backgroundColor: '#382648' }}>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <img src={logo} alt="Cryptonomics Inc. logo" width="90%" />
+                </ListItem>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <ListItemButton onClick={() => goToHome(home, coinections, chat, settings)}><HomeOutlinedIcon /></ListItemButton>
+                </ListItem>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <ListItemButton onClick={() => goToCoinections(home, coinections, chat, settings)}><CurrencyExchangeOutlinedIcon /></ListItemButton>
+                </ListItem>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <ListItemButton onClick={() => goToChat(home, coinections, chat, settings)}><ChatBubbleOutlineOutlinedIcon /></ListItemButton>
+                </ListItem>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <ListItemButton onClick={() => goToSettings(home, coinections, chat, settings)}><SettingsIcon /></ListItemButton>
+                </ListItem>
+                <ListItem alignItems="center" style={{ marginTop: '100%', verticalAlign: 'bottom', width: '100%' }}>
+                    <ListItemIcon>
+                        <LogoutIcon style={{ cursor: 'pointer' }} onClick={() => (window.location.reload())} />
+                    </ListItemIcon>
+                </ListItem>
+            </List>
+        </Drawer>
+        <Container style={{backgroundColor: '#382648', height: '100vh'}} maxWidth="xl" >
+            Renderizar o componente aqui
+        </Container>
+    </>
+    )
+}
+
+export { MainComponent }

frontend/src/components/chat_component/ChatComponent.tsx → frontend/src/components/main_component/components/ChatComponent/ChatComponent.tsx

@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
 
-
 const ChatComponent = (): ReactElement => {
     return (<>
         Chat

frontend/src/components/main_component/components/ChatComponent/index.ts

@@ -0,0 +1,3 @@
+import { ChatComponent } from './ChatComponent'
+
+export { ChatComponent }

frontend/src/components/coinections_component/CoinectionsComponent.tsx → frontend/src/components/main_component/components/CoinectionsComponent/CoinectionsComponent.tsx

@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
 
-
 const CoinectionsComponent = (): ReactElement => {
     return (<>
         Coinections

frontend/src/components/main_component/components/CoinectionsComponent/index.ts

@@ -0,0 +1,3 @@
+import { CoinectionsComponent } from './CoinectionsComponent'
+
+export { CoinectionsComponent }

frontend/src/components/main_component/components/FooterComponent/FooterComponent.tsx

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { Box } from "@mui/material";
+import { Typography } from '@mui/material'
+
+const FooterComponent = (): ReactElement => {
+    return (<>
+        <Box sx={{ bgcolor: 'background.paper', p: 2 }}>
+            <Typography variant="body1" align="center">
+                Meu Footer
+            </Typography>
+        </Box>
+
+    </>
+    )
+}
+
+export { FooterComponent }

frontend/src/components/main_component/components/FooterComponent/index.ts

@@ -0,0 +1,3 @@
+import { FooterComponent } from "./FooterComponent";
+
+export { FooterComponent}

frontend/src/components/home_component/HomeComponent.tsx → frontend/src/components/main_component/components/HomeComponent/HomeComponent.tsx

@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
 
-
 const HomeComponent = (): ReactElement => {
     return (<>
         Home

frontend/src/components/main_component/components/HomeComponent/index.ts

@@ -0,0 +1,3 @@
+import { HomeComponent } from './HomeComponent'
+
+export { HomeComponent }

frontend/src/components/your_coins_component/YourCoinsComponent.tsx → frontend/src/components/main_component/components/SettingsComponent/SettingsComponent.tsx

@@ -1,11 +1,10 @@
 import { ReactElement } from "react";
 
-
-const YourCoinsComponent = (): ReactElement => {
+const SettingsComponent = (): ReactElement => {
     return (<>
         Settings
     </>
     )
 }
 
-export { YourCoinsComponent }
+export { SettingsComponent }

frontend/src/components/main_component/components/SettingsComponent/index.ts

@@ -0,0 +1,3 @@
+import { SettingsComponent } from './SettingsComponent'
+
+export { SettingsComponent }

frontend/src/components/main_component/components/index.ts

@@ -0,0 +1,13 @@
+import { ChatComponent } from './ChatComponent'
+import { CoinectionsComponent } from './CoinectionsComponent'
+import { FooterComponent } from './FooterComponent'
+import { HomeComponent } from './HomeComponent'
+import { SettingsComponent } from './SettingsComponent'
+
+export {
+    ChatComponent,
+    CoinectionsComponent,
+    FooterComponent,
+    HomeComponent,
+    SettingsComponent
+}

frontend/src/components/main_component/index.ts

@@ -0,0 +1,3 @@
+import { MainComponent } from "./MainComponent"
+
+export { MainComponent }