diff --git a/src/App.js b/src/App.js
index 6990081cace26209be98ce4726f140e61cff54ed..50962d9c065ba585f2f181121ba1de8073cfa068 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,14 @@
import React from "react";
import { HashRouter, Route } from "react-router-dom";
-
+import "./global.css";
import CreateForm from "./pages/CreateForm";
import AnswerForm from "./pages/AnswerForm";
+import Header from "./components/header/header";
function App() {
return (
<HashRouter>
+ <Header />
<Route path="/create" component={CreateForm} />
<Route path="/answer/:id" component={AnswerForm} />
</HashRouter>
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1ffafe76150062e710a1f15742e1a18227e22cee
--- /dev/null
+++ b/src/components/header/header.jsx
@@ -0,0 +1,161 @@
+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>
+ );
+}
diff --git a/src/components/header/header_components/MenuList.jsx b/src/components/header/header_components/MenuList.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7c8613e2661ae595bf94614f5f9cdfed1ad61732
--- /dev/null
+++ b/src/components/header/header_components/MenuList.jsx
@@ -0,0 +1,130 @@
+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;
diff --git a/src/components/header/header_imgs/imgsimmc-01.png b/src/components/header/header_imgs/imgsimmc-01.png
new file mode 100644
index 0000000000000000000000000000000000000000..c549ed8b629749b0ca98d74230f7b1edf7928a15
Binary files /dev/null and b/src/components/header/header_imgs/imgsimmc-01.png differ
diff --git a/src/components/header/header_imgs/user.png b/src/components/header/header_imgs/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..35fcbb89031acbae1c31fec417d35580fab07218
Binary files /dev/null and b/src/components/header/header_imgs/user.png differ
diff --git a/src/global.css b/src/global.css
new file mode 100644
index 0000000000000000000000000000000000000000..aa7913b6d1193d2fef634b42b4fe8d98cf3ca099
--- /dev/null
+++ b/src/global.css
@@ -0,0 +1,25 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
+
+* {
+ margin: 0;
+ padding: 0;
+ outline: 0;
+ box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+ height: 100%;
+}
+
+body {
+ background: #eceff3;
+ -webkit-font-smoothing: antialiased;
+}
+
+body,
+input,
+button {
+ font-family: Roboto, sans-serif;
+}