Merge branch 'issue/11.2' into 'development'

Issue #11: Criar header

See merge request !10

src/App.js

 import React from "react";
 import { HashRouter, Route } from "react-router-dom";
-import Footer from "./components/footer/footer";
+import "./global.css";
 import CreateForm from "./pages/CreateForm";
 import AnswerForm from "./pages/AnswerForm";
-//import "./global.css";
+import Header from "./components/header/header";
+import Footer from "./components/footer/footer";
 
 function App() {
   return (
     <HashRouter>
+      <Header />
       <Route path="/create" component={CreateForm} />
       <Route path="/answer/:id" component={AnswerForm} />
     </HashRouter>

src/components/header/header.jsx

+import React from "react";
+import Grid from "@material-ui/core/Grid";
+import logo from "./header_imgs/imgsimmc-01.png";
+import { makeStyles } from "@material-ui/core";
+import MenuListComposition from "./header_components/MenuList";
+import { Avatar } from "@material-ui/core";
+
+import MenuItem from "@material-ui/core/MenuItem";
+import MenuList from "@material-ui/core/MenuList";
+import Button from "@material-ui/core/Button";
+import Popper from "@material-ui/core/Popper";
+import Grow from "@material-ui/core/Grow";
+import Paper from "@material-ui/core/Paper";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+
+const useStyles = makeStyles(theme => ({
+  barraBrasil: {
+    background: "#7F7F7F",
+    height: "20px",
+    padding: "0 0 0 10px",
+    display: "block"
+  },
+  menuBarraTemp: {
+    listStyle: "none"
+  },
+  menuBarraTempInterno: {
+    display: "inline",
+    float: "left",
+    paddingRight: "10px",
+    marginRight: "10px",
+    borderRight: "1px solid #EDEDED"
+  },
+  header: {
+    background: "#05a5dd",
+    width: "auto",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    height: "13%"
+  },
+  simmc: {
+    marginTop: "5%",
+    fontSize: "15px",
+    color: "#ffffff",
+    marginLeft: "2%",
+    ["@media (max-width:1040px)"]: {
+      display: "none"
+    },
+    ["@media (max-height:681px)"]: {
+      display: "none"
+    }
+  },
+  form_creator: {
+    color: "#ffffff",
+    marginTop: "10%",
+    ["@media (max-width:599px)"]: {
+      fontSize: "21px",
+      ["@media (max-width:525px)"]: {
+        marginTop: "5%",
+        marginLeft: "10%"
+      },
+      ["@media (max-width:337px)"]: {
+        fontSize: "19px"
+      }
+    },
+    ["@media (max-height:681px)"]: {
+      marginTop: "5%"
+    }
+  },
+  link: {
+    textDecoration: "none"
+  },
+  logo: {
+    marginLeft: "2.5%",
+    marginTop: "4%",
+    width: "85px",
+    ["@media (max-width:525px)"]: {
+      width: "65px",
+      ["@media (max-width:338px)"]: {
+        marginTop: "3%"
+      }
+    },
+    ["@media (max-height:681px)"]: {
+      width: "65px"
+    }
+  },
+  userImgContainer: {
+    display: "flex",
+    flexDirection: "column"
+  }
+}));
+
+export default function Header() {
+  const classes = useStyles();
+
+  return (
+    <Grid>
+      <header className={classes.header} alignItems="center ">
+        <Grid container item>
+          <Grid container item xs={3} sm={3} md={4}>
+            <a
+              href="https://simmc.c3sl.ufpr.br/"
+              title="Ir para a página inicial do SIMMC"
+            >
+              <img
+                src={logo}
+                alt="logo"
+                href="localhost3000/#/signup"
+                className={classes.logo}
+                maxWidth="100px"
+              />
+            </a>
+            <Grid
+              container
+              item
+              xs={5}
+              sm={6}
+              md={7}
+              alignContent="flexstart"
+              alignItems="start"
+            >
+              <a
+                href="https://simmc.c3sl.ufpr.br/"
+                title="Ir para a página inicial do SIMMC"
+                className={classes.link}
+              >
+                <h2 className={classes.simmc}>
+                  Sistema Integrado de Monitoramento do Ministério da Ciência,
+                  Tecnologia, Inovações e Comunicações
+                </h2>
+              </a>
+            </Grid>
+          </Grid>
+          <Grid container item xs={6} sm={6} md={4} justify="center">
+            <a
+              href="https://google.com.br"
+              title="Ir para a página inicial do Gerenciador de Formulários"
+              className={classes.link}
+            >
+              <h2 className={classes.form_creator}>
+                Gerenciador de Formulários
+              </h2>
+            </a>
+          </Grid>
+          <Grid
+            container
+            item
+            xs={3}
+            sm={3}
+            md={4}
+            className={classes.userImgContainer}
+            justify="center"
+            alignContent="flex-end"
+          >
+            <MenuListComposition />
+          </Grid>
+        </Grid>
+      </header>
+    </Grid>
+  );
+}

src/components/header/header_components/MenuList.jsx

+import React from "react";
+import Button from "@material-ui/core/Button";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import Grow from "@material-ui/core/Grow";
+import Paper from "@material-ui/core/Paper";
+import Popper from "@material-ui/core/Popper";
+import MenuItem from "@material-ui/core/MenuItem";
+import MenuList from "@material-ui/core/MenuList";
+import { makeStyles } from "@material-ui/core/styles";
+import UserImg from "./../header_imgs/user.png";
+
+import { Avatar } from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+  menuPopUp: {
+    alignContent: "start",
+    ["@media (max-width:346px)"]: {
+      width: "23%"
+    }
+  },
+  menuPopUpText: {
+    ["@media (max-width:525px)"]: {
+      fontSize: "13px"
+    }
+  },
+  popUpPaper: {
+    marginRight: "14%",
+    ["@media (max-width:525px)"]: {
+      marginRight: "0"
+    }
+  },
+  menuList: {
+    alignItems: "flex-start"
+  }
+}));
+
+/**
+ * Para fazer com que o componente não apareça em telas em que o usuário não está logado, basta fazer uma função de verificação para tal e retornar o componente,
+ * caso logado, ou NULL, caso não-logado.
+ */
+
+function MenuListComposition(props) {
+  const [open, setOpen] = React.useState(false);
+
+  const prevOpen = React.useRef(open);
+
+  const anchorRef = React.useRef(null);
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  function handleListKeyDown(event) {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+  React.useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Button
+        ref={anchorRef}
+        aria-controls={open ? "menu-list-grow" : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <Avatar alt="user_avatar" src={UserImg} className={classes.userImg} />{" "}
+      </Button>
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        className={classes.menuPopUp}
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === "bottom" ? "center top" : "center bottom"
+            }}
+          >
+            <Paper className={classes.popUpPaper}>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList
+                  className={classes.menuList}
+                  autoFocusItem={open}
+                  id="menu-list-grow"
+                  onKeyDown={handleListKeyDown}
+                  alignContent="flex-start"
+                >
+                  <MenuItem
+                    onClick={handleClose}
+                    className={classes.menuPopUpText}
+                  >
+                    Perfil
+                  </MenuItem>
+                  <MenuItem
+                    onClick={handleClose}
+                    className={classes.menuPopUpText}
+                  >
+                    Logout
+                  </MenuItem>
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </div>
+  );
+}
+
+export default MenuListComposition;