Create two more components to display the header

src/Admin/Components/Components/MobileComponents/MobilePageHeader.js

+/*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, { useEffect, useState } from "react";
+import Paper from "@material-ui/core/Paper"
+import Grid from "@material-ui/core/Grid"
+import Button from "@material-ui/core/Button"
+import Typography from "@material-ui/core/Typography"
+import CircularProgress from "@material-ui/core/CircularProgress"
+
+const MobilePageHeader = (props) => {
+    return (
+        <Paper style={{ padding: "1em" }}>
+            <Grid container spacing={3} direction="row" alignItems="center">
+                <Grid item xs={12}>
+                    <Typography variant="h4">{props.title}</Typography>
+                </Grid>
+                <Grid
+                    item
+                    xs={12}
+                >
+                    <Grid container justify="flex-start" spacing={3}>
+                        {props.actions.map((act, index) => {
+                            return (
+                                <Grid item key={act.name}>
+                                    <Button
+                                        variant="contained"
+                                        color="secondary"
+                                        disabled={act.isLoading}
+                                        onClick={act.func}
+                                        startIcon={act.icon}
+                                    >
+                                        {act.isLoading ? <CircularProgress size={24} /> : act.name}
+                                    </Button>
+                                </Grid>
+                            )
+                        })}
+                    </Grid>
+                </Grid>
+            </Grid>
+            {props.children}
+        </Paper>
+    )
+}
+
+export default MobilePageHeader;
\ No newline at end of file

src/Admin/Components/Components/PageHeader.js

+/*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, { useEffect, useState } from "react";
+import Paper from "@material-ui/core/Paper"
+import Grid from "@material-ui/core/Grid"
+import Button from "@material-ui/core/Button"
+import Typography from "@material-ui/core/Typography"
+import CircularProgress from "@material-ui/core/CircularProgress"
+
+const PageHeader = (props) => {
+    return (
+        <Paper style={{ padding: "1em" }}>
+            <Grid container spacing={3} direction="row" alignItems="center">
+                <Grid item xs={6}>
+                    <Typography variant="h4">{props.title}</Typography>
+                </Grid>
+                <Grid
+                    item
+                    xs={6}
+                >
+                    <Grid container justify="flex-end" spacing={3}>
+                        {props.actions.map((act, index) => {
+                            return (
+                                <Grid item key={act.name}>
+                                    <Button
+                                        variant="contained"
+                                        color="secondary"
+                                        disabled={act.isLoading}
+                                        onClick={act.func}
+                                        startIcon={act.icon}
+                                    >
+                                        {act.isLoading ? <CircularProgress size={24} /> : act.name}
+                                    </Button>
+                                </Grid>
+                            )
+                        })}
+                    </Grid>
+                </Grid>
+            </Grid>
+            {props.children}
+        </Paper>
+    )
+}
+
+export default PageHeader;
\ No newline at end of file