wip. adding responsive mobile version. logo css needs fixing

src/Components/MenuBarMobile.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+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 logo from '../img/logo_small.svg'
+import {Link} from 'react-router-dom'
+import Grid from '@material-ui/core/Grid';
+import MobileDrawerMenu from './MobileDrawerMenu';
+
+export default function MenuBarMobile (props) {
+
+    const [drawerOpen, setDrawerStatus] = React.useState(false);
+
+    const toggleDrawer = (open) => (event) => {
+        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+            return;
+        }
+        setDrawerStatus(open);
+    };
+
+    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}>
+                    <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>
+    )
+}
+
+const OuterDiv = styled.div `
+    height : 48px;
+    margin : 5px 2px;
+    display : flex;
+    flex-direction : column;
+    align-content : stretch;
+    justify-content : center;
+
+    .logo {
+        height : 50px;
+        width : 150px;
+        padding : 5px;
+        padding-top : 15px;
+        text-align : center;
+
+        img {
+            height : 38px;
+            overflow : hidden;
+        }
+    }
+
+    .icon {
+        vertical-align : middle !important;
+        font-weight : normal !important;
+        font-style : normal !important;
+        font-size : 24px !important;
+        line-height : 1 !important;
+        letter-spacing : normal !important;
+        text-transform : none !important;
+        display : inline-block !important;
+        white-space : nowrap !important;
+        word-wrap : normal !important;
+        direction : ltr !important;
+        padding-right : 2px;
+        color : inherit !important;
+    }
+`