diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js index ea3196dd0c45a6658adb77cc48c2358665beb616..4590e9dd578da0ed15a585e37982710e33cfced0 100644 --- a/src/Components/MenuBarMobile.js +++ b/src/Components/MenuBarMobile.js @@ -19,13 +19,13 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React from 'react' import MenuIcon from '@material-ui/icons/Menu'; import styled from 'styled-components' -import {Button} from '@material-ui/core' +import { Button } from '@material-ui/core' import logo from '../img/logo_small.svg' -import {Link} from 'react-router-dom' +import { Link } from 'react-router-dom' import Grid from '@material-ui/core/Grid'; import MobileDrawerMenu from './MobileDrawerMenu'; -export default function MenuBarMobile (props) { +export default function MenuBarMobile(props) { const [drawerOpen, setDrawerStatus] = React.useState(false); @@ -37,45 +37,40 @@ export default function MenuBarMobile (props) { }; return ( - <OuterDiv> - <Grid container> - <Grid item xs={3} style={{display : "flex"}}> - <Button style={{color : "#00bcd4"}} onClick={toggleDrawer(true)}> - <MenuIcon className="icon"/> - </Button> - </Grid> - - <Grid item xs={9} justify={'center'}> - <div className="logo"> - <Link to="/"> - <img src={logo} alt={"Plataforma Integrada"}/> - </Link> - </div> - </Grid> - </Grid> + <> <MobileDrawerMenu anchor={'left'} open={drawerOpen} onClose={toggleDrawer(false)} - openSignUp = {props.openSignUp} openLogin = {props.openLogin} - /> - </OuterDiv> + openSignUp={props.openSignUp} openLogin={props.openLogin} + /> + <OuterDiv> + <DrawerButtonDiv style={{justifySelf : "flex-start", position : "absolute", left : 0}}> + <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}> + <MenuIcon className="icon" /> + </Button> + </DrawerButtonDiv> + <div className="logo"> + <Link to="/"> + <img src={logo} alt={"Plataforma Integrada"} /> + </Link> + </div> + </OuterDiv> + </> ) } -const OuterDiv = styled.div ` +const OuterDiv = styled.div` height : 48px; - margin : 5px 2px; + width : 100%; display : flex; - flex-direction : column; - align-content : stretch; + flex-direction : row; + align-items : center; justify-content : center; + position : relative; .logo { - height : 50px; - width : 150px; - padding : 5px; - padding-top : 15px; + align-content : center; + justify-self : center; text-align : center; - img { height : 38px; overflow : hidden; @@ -98,3 +93,8 @@ const OuterDiv = styled.div ` color : inherit !important; } ` +const DrawerButtonDiv = styled.div` + justify-self : center; + position : absolute; + left : 0; +` \ No newline at end of file