From 7d14b02e2495c18db3d94cbb2c86bc8725903adc Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Sun, 15 Nov 2020 19:13:19 -0300
Subject: [PATCH] wip. adding responsive mobile version. logo css needs fixing
---
src/Components/MenuBarMobile.js | 100 ++++++++++++++++++++++++++++++++
1 file changed, 100 insertions(+)
create mode 100644 src/Components/MenuBarMobile.js
diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js
new file mode 100644
index 00000000..ce236456
--- /dev/null
+++ b/src/Components/MenuBarMobile.js
@@ -0,0 +1,100 @@
+/*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;
+ }
+`
--
GitLab