wip. logged off version done

src/Components/MobileDrawerMenu.js

+import React, {useContext, useState} from 'react'
+import { Store } from '../Store';
+import Drawer from '@material-ui/core/Drawer';
+import styled from 'styled-components'
+import {Link} from 'react-router-dom'
+import HomeIcon from '@material-ui/icons/Home';
+import InfoIcon from '@material-ui/icons/Info';
+import MailOutlineIcon from '@material-ui/icons/MailOutline';
+import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import {ButtonStyled} from './MenuBar'
+import ExitToAppIcon from '@material-ui/icons/ExitToApp'
+import { Button } from '@material-ui/core';
+import MenuItem from '@material-ui/core/MenuItem';
+
+export default function MobileDrawerMenu (props) {
+    const {state} = useContext(Store)
+
+    const menuSobre = [
+        { name : "Página Inicial", href : "/", icon : <HomeIcon/>},
+        { name : "Sobre a Plataforma", href : "sobre", icon : <InfoIcon/>},
+        { name : "Contato", href : "contato", icon : <MailOutlineIcon/>},
+        { name : "Central de Ajuda", href : "ajuda", icon : <HelpOutlineIcon/>},
+        { name : "Termos de Uso", href : "termos", icon : <AssignmentIcon/>},
+    ]
+    const [selectedIndex, setSelectedIndex] = React.useState(1);
+    const handleMenuItemClick = (event, index) => {
+        setSelectedIndex(index);
+    };
+
+    return (
+        <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
+            <MenuBody>
+                {
+                    menuSobre.map( (item, index) =>
+                        <Link to={item.href} className={`menu-buttons ${selectedIndex === index ? 'selected' : ''}`} onClick={(event) => handleMenuItemClick(event, index)}>
+                                {item.icon}
+                                {item.name}
+                        </Link>
+                    )
+                }
+            </MenuBody>
+            {
+                state.userIsLoggedIn ?
+                (
+                    <React.Fragment>
+                        <span>sim</span>
+                    </React.Fragment>
+                )
+                :
+                (
+                    <div style={{borderTop : "1px solid #e5e5e5", borderBottom : "1px solid #e5e5e5", marginTop : "10px"}}>
+
+                        <div style={{display : "flex", justifyContent : "center", marginTop : "10px"}}>
+                            <ButtonPublicarRecurso onClick={() => {console.log('props.openLogin')}}>
+                                PUBLICAR RECURSO?
+                            </ButtonPublicarRecurso>
+                        </div>
+
+                        <div style={{display : "flex", flexDirection : "row", margin : "10px 0", justifyContent : "center"}}>
+                            <div style={{borderRight : "1px solid #e5e5e5"}}>
+                                <ButtonStyled onClick={props.openLogin}>
+                                    <ExitToAppIcon style={{color:"#00bcd4"}}/>Entrar
+                                </ButtonStyled>
+                            </div>
+
+                            <div>
+                                <ButtonStyled onClick={props.openSignUp}>
+                                    Cadastre-se
+                                </ButtonStyled>
+                            </div>
+                        </div>
+                    </div>
+                )
+            }
+        </StyledDrawer>
+    )
+}
+
+const ButtonPublicarRecurso = styled(Button)`
+    font-weight : 500 !important;
+    border : 1.5px #666 solid !important;
+    color: #666;
+    box-shadow: none;
+    margin : 0 8px !important;
+    padding : 6px 25px !important;
+
+`
+
+const StyledDrawer = styled(Drawer)`
+    .MuiPaper-root {
+        width : 65% !important;
+    }
+`
+
+const MenuBody = styled.div`
+    margin-top : 20px;
+    display : flex;
+    flex-direction : column;
+    color : #666;
+
+    .menu-buttons {
+        padding : 10px 16px;
+        font-size : 14px;
+        font-weight : 500;
+        cursor : pointer;
+        outline : 0;
+        color : #666 !important;
+        text-decoration : none  !important;
+        background-color : transparent;
+        font-family : 'Roboto', sans serif;
+
+        .MuiSvgIcon-root {
+            color : #a5a5a5 !important;
+            margin-right : 20px;
+            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;
+        }
+    }
+
+    .selected {
+        color : #fff !important;
+        background-color : #00bcd4;
+        .MuiSvgIcon-root {
+            color : #fff !important;
+        }
+    }
+`