merging feat/sidebar into master

kinvo-gabriel/src/App.css

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  overflow-x: hidden;
 }
 
 .App-logo {

kinvo-gabriel/src/components/ApplicationShell/ApplicationShell.tsx

@@ -1,31 +1,29 @@
+import { Sidebar } from '../'
 import { Header } from '../Header'
-import { Home } from '../../views/Home'
+import { Home } from '../../views/Home' 
 import { Grid, Stack } from '@mui/material'
 
 export const ApplicationShell: React.FC = () => {
 
   return (
     <Stack
       sx={{
-        width: '100vw',
         minHeight: '100vh',
         overflowX: 'hidden',
       }}
     >
       <Header />
       <Grid
-        flex={1}
         container
         direction='row'
         bgcolor='rgba(218, 224, 227, .3)'
       >
         <Grid
           item
           xs={2}
-          padding={2}
           bgcolor='common.white'
         >
-          <div>sidebar</div>
+          <Sidebar />
         </Grid>
         <Grid item xs={10} padding={2}>
           <Home />

kinvo-gabriel/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,78 @@
+import { Stack } from '@mui/material'
+import { SidebarMenuItem, SidebarItem } from './components'
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
+import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined'
+import PieChartOutlinedIcon from '@mui/icons-material/PieChartOutlined'
+import AutoModeOutlinedIcon from '@mui/icons-material/AutoModeOutlined'
+import ExtensionOutlinedIcon from '@mui/icons-material/ExtensionOutlined'
+import DonutLargeOutlinedIcon from '@mui/icons-material/DonutLargeOutlined'
+import MonetizationOnOutlinedIcon from '@mui/icons-material/MonetizationOnOutlined'
+import InsertChartOutlinedTwoToneIcon from '@mui/icons-material/InsertChartOutlinedTwoTone'
+
+export interface SidebarMenuItemProps {
+  label: string,
+  icon: JSX.Element
+  currentSelected?: boolean
+}
+
+export interface SidebarItemProps {
+  label: string
+  currentSelected?: boolean
+}
+
+export const Sidebar: React.FC = () => {
+
+  const MENU_ITEMS_1: SidebarMenuItemProps[] = [
+    {
+      icon: <AutoModeOutlinedIcon sx={{ color: '#FFF' }} />,
+      label: 'Resumo da Carteira',
+    },
+    {
+      icon: <PieChartOutlinedIcon sx={{ color: '#FFF' }} />,
+      label: 'Meus Produtos',
+    },
+    {
+      icon: <MonetizationOnOutlinedIcon sx={{ color: '#FFF' }} />,
+      label: 'Meus Proventos',
+    },
+    {
+      icon: <ExtensionOutlinedIcon sx={{ color: '#FFF' }} />,
+      label: 'Classe de Ativos',
+      currentSelected: true
+    },
+  ]
+
+  const ASSET_CLASS: SidebarItemProps[] = [
+    { label: 'Ação' },
+    { label: 'Fundo' },
+    { label: 'Fundo Imobiliário' },
+    { label: 'Fundo Renda Fixa', currentSelected: true },
+  ]
+
+  const MENU_ITEMS_2: SidebarMenuItemProps[] = [
+    {
+      icon: <DiamondOutlinedIcon sx={{ color: '#FFF' }} />,
+      label: 'Rentabilidade Real',
+    },
+    {
+      icon: <InsertChartOutlinedTwoToneIcon sx={{ color: '#FFF' }} />,
+      label: 'Projeção da Carteira',
+    },
+    {
+      icon: <DonutLargeOutlinedIcon sx={{ color: '#FFF' }} />,
+      label: 'Risco x Retorno',
+    },
+    {
+      icon: <LockOutlinedIcon sx={{ color: '#FFF' }} />,
+      label: 'Cobertura do FGC',
+    },
+  ]
+
+  return (
+    <Stack>
+      {MENU_ITEMS_1.map(menuItem => <SidebarMenuItem menuItem={menuItem} />)}
+      {ASSET_CLASS.map(item => <SidebarItem item={item} />)}
+      {MENU_ITEMS_2.map(menuItem => <SidebarMenuItem menuItem={menuItem} />)}
+    </Stack>
+  )
+}

kinvo-gabriel/src/components/Sidebar/components/SidebarItem/SidebarItem.tsx

@@ -0,0 +1,23 @@
+import { Stack, Typography } from '@mui/material'
+import { SidebarItemProps } from '../../'
+import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined'
+
+export const SidebarItem: React.FC<{ item: SidebarItemProps }> = ({ item }) => {
+  return (
+    <Stack
+      p={2}
+      direction='row'
+      alignItems='center'
+      justifyContent='space-between'
+      borderBottom='1px solid rgba(218, 224, 227, .5)'
+      bgcolor={item.currentSelected ? 'rgba(218, 224, 227, .4)' : '#FFF'}
+      sx={{ cursor: 'pointer', '&:hover': { bgcolor: 'rgba(218, 224, 227, .4)' } }}
+    >
+      <Stack alignItems='center' direction='row'>
+        <Stack height='10px' width='10px' bgcolor='primary.main' borderRadius='50%' />
+        <Typography color='grey.300' variant='text5' ml={1}>{item.label}</Typography>
+      </Stack>
+      <ChevronRightOutlinedIcon sx={{ color: '#627179' }} />
+    </Stack>
+  )
+}

kinvo-gabriel/src/components/Sidebar/components/SidebarItem/index.ts

@@ -0,0 +1 @@
+export * from './SidebarItem'

kinvo-gabriel/src/components/Sidebar/components/SidebarMenuItem/SidebarMenuItem.tsx

@@ -0,0 +1,36 @@
+import { Stack, Typography } from '@mui/material'
+import { SidebarMenuItemProps } from '../..'
+import ChevronRightOutlinedIcon from '@mui/icons-material/ChevronRightOutlined'
+
+interface SidebarItemProps {
+  menuItem: SidebarMenuItemProps
+}
+
+export const SidebarMenuItem: React.FC<SidebarItemProps> = ({ menuItem }) => {
+  return (
+    <Stack
+      p={2}
+      direction='row'
+      alignItems='center'
+      justifyContent='space-between'
+      borderBottom='1px solid rgba(218, 224, 227, .5)'
+      bgcolor={menuItem.currentSelected ? 'rgba(218, 224, 227, .4)' : '#FFF'}
+      sx={{ cursor: 'pointer', '&:hover': { bgcolor: 'rgba(218, 224, 227, .4)' } }}
+    >
+      <Stack alignItems='center' direction='row'>
+        <Stack
+          width='50px'
+          height='50px'
+          borderRadius='50%'
+          alignItems='center'
+          justifyContent='center'
+          bgcolor={menuItem.currentSelected ? 'primary.main' : 'grey.50'}
+        >
+          {menuItem.icon}
+        </Stack>
+        <Typography pl={2} width='40%' color='grey.300' variant='text5'>{menuItem.label}</Typography>
+      </Stack>
+      <ChevronRightOutlinedIcon sx={{ color: '#627179' }} />
+    </Stack>
+  )
+}

kinvo-gabriel/src/components/Sidebar/components/SidebarMenuItem/index.ts

@@ -0,0 +1 @@
+export * from './SidebarMenuItem'

kinvo-gabriel/src/components/Sidebar/components/index.ts

@@ -0,0 +1,2 @@
+export * from './SidebarItem'
+export * from './SidebarMenuItem'

kinvo-gabriel/src/components/Sidebar/index.ts

@@ -0,0 +1 @@
+export * from './Sidebar'

kinvo-gabriel/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './Header'
+export * from './Sidebar'
+export * from './ApplicationShell'

kinvo-gabriel/src/index.tsx

@@ -14,13 +14,13 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 )
 root.render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <ThemeProvider theme={kinvoTheme}>
-        <App />
-      </ThemeProvider>
-    </Provider>
-  </React.StrictMode>
+  // <React.StrictMode>
+  <Provider store={store}>
+    <ThemeProvider theme={kinvoTheme}>
+      <App />
+    </ThemeProvider>
+  </Provider>
+  // </React.StrictMode>
 )
 
 reportWebVitals()

kinvo-gabriel/src/views/Home/Home.tsx

@@ -18,15 +18,15 @@ export const Home: React.FC = () => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
-
+   
 
   return (
     <Stack>
       <FixedIncome />
       <FixedIncomeGraphic />
       <FixedIncomeDetailed />
       <WalletGraphic />
-
+          
     </Stack>
   )
 }

kinvo-gabriel/src/views/Home/components/FixedIncome/FixedIncome.tsx

@@ -14,7 +14,7 @@ export const FixedIncome: React.FC = () => {
   }
 
   return (
-    <Stack paddingX={2} paddingY={4}>
+    <Stack mt={3}>
       <Typography variant='h3' color='primary.main'>Renda Fixa</Typography>
       <Stack spacing={2} mt={3}>
         <Swiper

kinvo-gabriel/src/views/Home/components/FixedIncomeDetailed/FixedIncomeDetailed.tsx

@@ -26,7 +26,13 @@ export const FixedIncomeDetailed: React.FC = () => {
       <Stack>
         <Header />
         {currentItems().map((item, index) => (
-          <Stack key={index} bgcolor={index % 2 === 0 ? 'rgba(218, 224, 227, .2)' : 'unset'} width='100%' direction='row' spacing={1} p={2}>
+          <Stack
+            p={2}
+            key={index}
+            spacing={1}
+            direction='row'
+            bgcolor={index % 2 === 0 ? 'unset' : 'rgba(218, 224, 227, .2)'}
+          >
             <Stack justifyContent='space-between' width='30%' border='1px solid #DAE0E3' padding={1} borderRadius={3}>
               <Stack alignItems='center' direction='row'>
                 <Typography color='grey.300' variant='text3'>TÍTULO</Typography>
@@ -104,7 +110,6 @@ export const FixedIncomeDetailed: React.FC = () => {
             </Stack>
           </Stack>
         ))}
-
       </Stack>
     </Card>
   )

kinvo-gabriel/src/views/Home/components/FixedIncomeGraphic/FixedIncomeGraphic.tsx

@@ -76,26 +76,24 @@ export const FixedIncomeGraphic: React.FC = () => {
   }
 
   return (
-    <Stack width='100%'>
-      <Stack width='100%' alignItems='center'>
-        <Card
-          elevation={2}
-          sx={{
-            marginY: 4,
-            paddingX: 4,
-            width: '96%',
-            height: '50vh',
-            borderRadius: 3,
-            justifyContent: 'center',
-            paddingY: { xs: 2, lg: 4 },
-          }}
-        >
-          <Stack direction='row' justifyContent='space-between' alignItems='center'>
-            <Typography variant='h4' color='grey.200'>Rentabilidade dos títulos</Typography>
-          </Stack>
-          <Line data={GRAPHIC_DATA_CONFIG} options={GRAPHIC_CONFIG} height='80%' />
-        </Card>
-      </Stack>
+    <Stack>
+      <Card
+        elevation={2}
+        sx={{
+          p: 2,
+          mb: 2,
+          width: '97.9%',
+          height: '50vh',
+          borderRadius: 3,
+          justifyContent: 'center',
+          paddingY: { xs: 2, lg: 4 },
+        }}
+      >
+        <Stack direction='row' justifyContent='space-between' alignItems='center'>
+          <Typography variant='h4' color='grey.200'>Rentabilidade dos títulos</Typography>
+        </Stack>
+        <Line data={GRAPHIC_DATA_CONFIG} options={GRAPHIC_CONFIG} height='80%' />
+      </Card>
     </Stack>
   )
 }

kinvo-gabriel/src/views/Home/components/WalletGraphic/WalletGraphic.tsx

@@ -38,11 +38,11 @@ export const WalletGraphic: React.FC = () => {
   }
 
   return (
-    <Stack mt={2} direction='row' width='100%' justifyContent='space-between'>
-      <Stack width='49%'>
+    <Stack my={2} direction='row' width='99%' justifyContent='space-between'>
+      <Stack width='48%'>
         <GraphicByType GRAPHIC_CONFIG={GRAPHIC_CONFIG} />
       </Stack>
-      <Stack width='49%'>
+      <Stack width='48%'>
         <GraphicByTitle GRAPHIC_CONFIG={GRAPHIC_CONFIG} />
       </Stack>
     </Stack>