Centered the logo

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