EditProfilePage.js

import React, {useState, useContext, useEffect} from 'react';
import styled from 'styled-components'
import {Link} from 'react-router-dom'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
import Paper from '@material-ui/core/Paper';
import TabPanelEditarPerfil from '../Components/TabPanels/UserPageTabs/PanelEditarPerfil.js'
import TabPanelSolicitarContaProfessor from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import TabPanelGerenciarConta from '../Components/TabPanels/UserPageTabs/PanelGerenciarConta.js'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import {Alert} from '../Components/LoginModal.js'
import Grid from '@material-ui/core/Grid'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'

export default function EditProfilePage (props) {
    const [tabs, setTabs] = useState([
        'Editar Perfil', 'Solicitar conta de Professor', 'Gerenciar Conta'
    ])
    const [tabValue, setTabValue] = useState(0)
    const handleChangeTab = (e, newValue) => {
        setTabValue(newValue)
    }

    const [snackbarOpened, handleSnackbar] = useState(false)
    const handleCloseSnackbar = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }

        handleSnackbar(false);
    }
    return (
        <div style={{backgroundColor:"#f4f4f4", color:"#666"}}>
            <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
            anchorOrigin = {{ vertical:'top', horizontal:'right' }}
            >
                <Alert severity="success" style={{backgroundColor:"#00acc1"}}>Senha alterada com sucesso!</Alert>
            </Snackbar>

            <CustomizedBreadcrumbs
                values={["Minha área", "Configurações da Conta", tabs[tabValue]]}
            />

            <div style={{justifyContent:"center", width:"1170px", margin:"auto"}}>
            <MainContainerDiv container spacing={3}>
                <Grid item xs={3} style={{width : "auto", fontFamily:"Roboto"}} >
                    <Paper elevation={3} style= {{width:"max-content"}}>
                        <ConfiguracoesMenu>
                            <h4 style={{marginTop:"10px", fontFamily:"inherit", display:"flex", justifyContent:"center"}}>
                            Configurações da Conta
                            </h4>
                            <StyledTabs
                                orientation = "vertical"
                                variant = "scrollable"
                                value = {tabValue}
                                onChange = {handleChangeTab}
                                TabIndicatorProps = {{style : {display : "none"}}}
                            >
                                <StyledTab label={tabs[0]}/>
                                <StyledTab label={tabs[1]}/>
                                <StyledTab label={tabs[2]}/>
                            </StyledTabs>
                        </ConfiguracoesMenu>
                    </Paper>
                </Grid>
                <TabContentDiv item xs={9}>
                    <Paper elevation={3} style= {{width:"100%"}}>
                        {tabValue === 0 && <TabPanelEditarPerfil />}
                        {tabValue === 1 && <TabPanelSolicitarContaProfessor/>}
                    </Paper>
                        {tabValue === 2 && <TabPanelGerenciarConta handleSnackbar={() => {handleSnackbar(true)}}/>}
                </TabContentDiv>
            </MainContainerDiv>
            </div>
        </div>
    )
}

const TabContentDiv = styled(Grid)`
    width : auto;

    .card-config {
        padding : 40px;
        margin : 20px 0 20px 10px;
        border-radius : 3px;
        box-shadow : 0 0 5px 0rgba(0,0,0,.25);
        background-color : #fff;
        text-align : start;
        margin-left : auto;
        margin-right : auto;
        display : flex;
        flex-direction : column;
    }

    .content-div {
        display : flex;
        flex-direction : column;
        align-content : stretch;
        align-items : stretch;
        font-family : 'Roboto', sans serif !important;
        font-size : 14px;
        justify-content : center;
        line-height : 20px;
        text-align : center;
        color : #666;
    }

    .h2 {
        margin-top : 20px;
        margin-bottom : 10px;
    }

    .p {
        margin : 0 0 10px;
    }

    .h1 {
        font-size : 30px;
        font-weight : 300;
        margin-top : 0;
        margin-bottom : 10px;
    }

    .h4 {
        font-size : 18px;
        margin-top : 10px;
        margin-bottom : 10px;
        font-weight : 500;
        line-height : 1.1;
    }
`

const StyledTabs = styled(Tabs)`
    .Mui-selected {
        background-color : #f4f4f4;
    }
`

const StyledTab = styled(Tab)`
    &:hover {
        background-color : #6666663d;
    }
`

const ConfiguracoesMenu = styled.div`
    margin : 20px 0 20px 0;
    border-radius : 3px;
    padding : 20px 0;
    background-color : #fff;
    text-align : start;
`

const MainContainerDiv = styled(Grid)`
    padding : 0;
    width : 1170;
    margin-right : auto;
    margin-left : auto;
    display : flex;
    flex-direction : row;
    align-content : center;
    justify-content : center;
`