diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js index 33bd2cb56acfa317bcdd2d6c60ae0ff16be5ab13..ef15bcb2bc94425dce168f57728ba19123ecc774 100644 --- a/src/Components/MenuBarMobile.js +++ b/src/Components/MenuBarMobile.js @@ -16,17 +16,21 @@ 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 React, { useContext } 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 MobileDrawerMenu from './MobileDrawerMenu'; +import { Store } from '../Store'; + export default function MenuBarMobile(props) { const [drawerOpen, setDrawerStatus] = React.useState(false); + const { state, dispatch } = useContext(Store) + const toggleDrawer = (open) => (event) => { if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { @@ -42,16 +46,14 @@ export default function MenuBarMobile(props) { 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"} /> + <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}> + <MenuIcon className="icon" /> + </Button> + <DrawerButtonDiv> + <Link to={"/"}> + <img src={logo} style={{ border: "0", verticalAlign: "middle" }} /> </Link> - </div> + </DrawerButtonDiv> </OuterDiv> </> ) @@ -60,40 +62,22 @@ export default function MenuBarMobile(props) { const OuterDiv = styled.div` height : 48px; width : 100%; - display : flex; - flex-direction : row; + ${'' /* position : relative; */} + display : flex; + direction : row; align-items : center; - justify-content : center; - position : relative; - .logo { - align-content : center; - justify-self : center; - text-align : center; - img { + 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; - } ` const DrawerButtonDiv = styled.div` - justify-self : center; - position : absolute; - left : 0; + height : 38px; + width : 45.55px; + position:absolute; + left:0; + right:0; + margin-left:auto; + margin-right:auto; ` \ No newline at end of file diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js index f872b4583c995b8ec6da6dad2d1d1c62b13d4b14..01ca7521d766886607235c6691c6e188c7085f7a 100644 --- a/src/Components/MobileDrawerMenu.js +++ b/src/Components/MobileDrawerMenu.js @@ -48,8 +48,8 @@ export default function MobileDrawerMenu (props) { { name : "Sobre a Plataforma", href : "sobre", icon : <InfoIcon/>}, { name : "Contato", href : "contato", icon : <MailOutlineIcon/>}, { name : "Central de Ajuda", href : "ajuda", icon : <HelpOutlineIcon/>}, - { name: "Busca", href: `/busca?query=${state.search.query}&search_class=${state.search.class}`, icon : <SearchIcon/>}, { name : "Termos de Uso", href : "termos", icon : <AssignmentIcon/>}, + { name : "Busca", href : `busca?query=${state.search.query}&search_class=${state.search.class}`, icon : <SearchIcon/> } ] // {/*used in dynamic css selection*/}