diff --git a/src/Admin/Components/Components/AppBar.js b/src/Admin/Components/Components/AppBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..b596c35f59484e8754b79c68d787feced4011913
--- /dev/null
+++ b/src/Admin/Components/Components/AppBar.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import AppBar from "@material-ui/core/AppBar";
+import { Tab, Tabs } from "@material-ui/core";
+import { Link } from 'react-router-dom'
+import { TabsItens } from '../../Pages/AdminLabelTabs/LabelTabs'
+
+function TabPanel(props) {
+ const { children, value, index, ...other } = props;
+
+ return (
+ <div
+ role="tabpanel"
+ hidden={value !== index}
+ id={`nav-tabpanel-${index}`}
+ aria-labelledby={`nav-tab-${index}`}
+ {...other}
+ >
+ {value === index && (
+ <Box p={3}>
+ <Typography>{children}</Typography>
+ </Box>
+ )}
+ </div>
+ );
+}
+
+TabPanel.propTypes = {
+ children: PropTypes.node,
+ index: PropTypes.any.isRequired,
+ value: PropTypes.any.isRequired,
+};
+
+function a11yProps(index) {
+ return {
+ id: `nav-tab-${index}`,
+ "aria-controls": `nav-tabpanel-${index}`,
+ };
+}
+export default function AppBarAdmin() {
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
+
+ return (
+ <AppBar position="sticky" color="default">
+ <Tabs
+ variant="scrollable"
+ scrollButtons="on"
+ value={value}
+ onChange={handleChange}
+ aria-label="nav tabs example"
+ >
+ {
+ TabsItens.map((label, index) => (
+ <Tab
+ key={label.href}
+ label={label.label}
+ to={label.href}
+ icon={label.icon}
+ component={Link}
+ {...a11yProps(index)}
+ />
+ ))
+ }
+ </Tabs>
+ </AppBar>
+ )
+}
\ No newline at end of file
diff --git a/src/Admin/Components/Components/DisplayIcon.js b/src/Admin/Components/Components/DisplayIcon.js
deleted file mode 100644
index d79eb0437a3d902e3f9b1278c389e17b1c61e661..0000000000000000000000000000000000000000
--- a/src/Admin/Components/Components/DisplayIcon.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/*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 ListItemIcon from "@material-ui/core/ListItemIcon";
-import HomeIcon from "@material-ui/icons/Home";
-import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
-import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
-import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
-import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
-import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
-import StarRoundedIcon from "@material-ui/icons/StarRounded";
-import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded";
-import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
-import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
-import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
-import PersonRoundedIcon from "@material-ui/icons/PersonRounded";
-import BlockRoundedIcon from "@material-ui/icons/BlockRounded";
-import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
-import EmailRoundedIcon from "@material-ui/icons/EmailRounded";
-import TimelineRoundedIcon from "@material-ui/icons/TimelineRounded";
-import SettingsRoundedIcon from "@material-ui/icons/SettingsRounded";
-import ExitToAppRoundedIcon from "@material-ui/icons/ExitToAppRounded";
-import AllOutIcon from "@material-ui/icons/AllOut";
-import SportsEsportsRoundedIcon from '@material-ui/icons/SportsEsportsRounded';
-import { GiAchievement } from "react-icons/gi"
-import { DiRequirejs } from "react-icons/di"
-import { FaRegHandPointer } from 'react-icons/fa'
-
-//This file manipulate the icon that will be displayed in the left navigation menu
-
-const orange = "#ff7f00";
-const pink = "#e81f4f";
-const purple = "#673ab7";
-const blue = "#00bcd4";
-
-const icons = [
- <HomeIcon style={{ fill: orange }} />,
- <PeopleRoundedIcon style={{ fill: pink }} />,
- <AllOutIcon style={{ fill: purple }} />,
- <ContactSupportRoundedIcon style={{ fill: blue }} />,
- <AccountBalanceRoundedIcon style={{ fill: orange }} />,
- <LanguageRoundedIcon style={{ fill: pink }} />,
- <MenuBookRoundedIcon style={{ fill: purple }} />,
- <StarRoundedIcon style={{ fill: blue }} />,
- <AccountCircleRoundedIcon style={{ fill: orange }} />,
- <TrendingUpRoundedIcon style={{ fill: pink }} />,
- <HelpRoundedIcon style={{ fill: purple }} />,
- <CheckRoundedIcon style={{ fill: blue }} />,
- <PersonRoundedIcon style={{ fill: orange }} />,
- <BlockRoundedIcon style={{ fill: pink }} />,
- <AnnouncementRoundedIcon style={{ fill: purple }} />,
- <EmailRoundedIcon style={{ fill: blue }} />,
- <SportsEsportsRoundedIcon style={{ fill: orange }} />,
- <GiAchievement size={24} style={{ fill: pink }} />,
- <DiRequirejs size={24} style={{ fill: purple }} />,
- <FaRegHandPointer size={24} style={{ fill: blue }} />,
- <TimelineRoundedIcon style={{ fill: orange }} />,
- <SettingsRoundedIcon style={{ fill: pink }} />,
- <ExitToAppRoundedIcon style={{ fill: purple }} />,
-];
-
-const DisplayIcon = (props) => {
- return (
- <ListItemIcon>
- {icons[props.i]}
- </ListItemIcon>
- );
-};
-export default DisplayIcon;
diff --git a/src/Admin/Pages/AdminLabelTabs/LabelTabs.js b/src/Admin/Pages/AdminLabelTabs/LabelTabs.js
index eddb77be77677a6c655745ba407cff0219c8b02a..b8779a8aedd56f61eb6d7d2e8181e1a52a586530 100644
--- a/src/Admin/Pages/AdminLabelTabs/LabelTabs.js
+++ b/src/Admin/Pages/AdminLabelTabs/LabelTabs.js
@@ -18,70 +18,133 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
//This file has the labels of the left menu navigation from admin page
+import React from "react";
+import HomeIcon from "@material-ui/icons/Home";
+import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
+import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
+import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
+import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
+import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
+import StarRoundedIcon from "@material-ui/icons/StarRounded";
+import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded";
+import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
+import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
+import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
+import PersonRoundedIcon from "@material-ui/icons/PersonRounded";
+import BlockRoundedIcon from "@material-ui/icons/BlockRounded";
+import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
+import EmailRoundedIcon from "@material-ui/icons/EmailRounded";
+import AllOutIcon from "@material-ui/icons/AllOut";
+import SportsEsportsRoundedIcon from '@material-ui/icons/SportsEsportsRounded';
+import { GiAchievement } from "react-icons/gi"
+import { DiRequirejs } from "react-icons/di"
+import { FaRegHandPointer } from 'react-icons/fa'
+
+const orange = "#ff7f00";
+const pink = "#e81f4f";
+const purple = "#673ab7";
+const blue = "#00bcd4";
+
const TabsItens = [
{
- label: "Home",
- href: '/admin/home'
+ label: "Home",
+ href: '/admin/home',
+ icon: <HomeIcon style={{ fill: orange }} />,
},
{
label: 'Coleções',
href: '/admin/Collections',
+ icon: <PeopleRoundedIcon style={{ fill: pink }} />
},
{
label: "Atividades",
href: '/admin/activities',
+ icon: <AllOutIcon style={{ fill: purple }} />,
},
{
label: "Dúvidas da comunidade",
- href: '/admin/CommunityQuestions'
+ href: '/admin/CommunityQuestions',
+ icon: <ContactSupportRoundedIcon style={{ fill: blue }} />,
},
{
label: "Instituições",
- href: '/admin/intitutions'
+ href: '/admin/intitutions',
+ icon: <AccountBalanceRoundedIcon style={{ fill: orange }} />,
},
{
label: "Linguagens",
href: '/admin/languages',
+ icon: <LanguageRoundedIcon style={{ fill: pink }} />,
},
{
label: "Objetos educacionais",
href: "/admin/learningObjects",
+ icon: <MenuBookRoundedIcon style={{ fill: purple }} />,
},
{
label: "Rating",
- href : '/admin/Ratings'
+ href: '/admin/Ratings',
+ icon: <StarRoundedIcon style={{ fill: blue }} />,
},
{
label: "Permissões do usuário",
href: "/admin/permissions",
+ icon: <AccountCircleRoundedIcon style={{ fill: orange }} />,
},
{
- label: "Variáveis de nota",
- href:'/admin/noteVars'
+ label: "Variáveis de nota",
+ href: '/admin/noteVars',
+ icon: <TrendingUpRoundedIcon style={{ fill: pink }} />,
},
{
label: "Perguntas curadoria",
- href: "/admin/Questions"
+ href: "/admin/Questions",
+ icon: <HelpRoundedIcon style={{ fill: purple }} />,
},
{
label: "Aprovação de professores",
- href: "/admin/users/teacher_requests"
+ href: "/admin/users/teacher_requests",
+ icon: <CheckRoundedIcon style={{ fill: blue }} />,
},
{
label: "Usuários",
- href : "/admin/usersList"
+ href: "/admin/usersList",
+ icon: <PersonRoundedIcon style={{ fill: orange }} />,
},
{
label: "Usuários bloqueados",
- href : "/admin/BlockedUsers"
+ href: "/admin/BlockedUsers",
+ icon: <BlockRoundedIcon style={{ fill: pink }} />,
},
{
label: "Denúncias",
href: "/admin/complaints",
+ icon: <AnnouncementRoundedIcon style={{ fill: purple }} />,
},
{
label: "Enviar email",
- href:'/admin/sendEmail/none'
+ href: '/admin/sendEmail/none',
+ icon: <EmailRoundedIcon style={{ fill: blue }} />,
+ },
+ {
+ label: "Items",
+ href: '/admin/gamefication',
+ icon: <SportsEsportsRoundedIcon style={{ fill: orange }} />,
+ },
+ {
+ label: "Conquistas",
+ href: '/admin/achievements',
+ icon: <GiAchievement size={24} style={{ fill: pink }} />,
+ },
+ {
+ label: "Requisitos",
+ href: '/admin/requirements',
+ icon: <DiRequirejs size={24} style={{ fill: purple }} />,
+ },
+ {
+ label: "Ações",
+ href: '/admin/actions',
+ icon: <FaRegHandPointer size={24} style={{ fill: blue }} />,
},
];