Page of the admin. It contains the Drawer, DisplayContent and DisplayIcon

src/Admin/Pages/Pages/Admin.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, { useState } from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import IconButton from '@material-ui/core/IconButton';
+import DisplayIcon from '../../Components/Components/DisplayIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuIcon from '@material-ui/icons/Menu';
+import Fab from '@material-ui/core/Fab';
+import { TabsItens } from '../AdminLabelTabs/LabelTabs';
+import DisplayContent from '../../Components/Components/DisplayContent';
+
+const useStyles = makeStyles({
+    list: {
+        width: 250,
+    },
+    fullList: {
+        width: 'auto',
+    },
+});
+
+const fab = {
+    margin: 0,
+    top: 'auto',
+    right: 20,
+    bottom: 20,
+    left: 'auto',
+    position: 'fixed',
+}
+
+
+export default function Admin() {
+    const classes = useStyles();
+    const [state, setState] = React.useState({
+        left: false
+    });
+    const [IndexIcon, setIndexIcon] = useState(0);
+
+    {/**************** Controlls the state of the Drawer ****************/}
+    const toggleDrawer = (anchor, open) => (event) => {
+        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+            return;
+        }
+
+        setState({ ...state, [anchor]: open });
+    };
+
+    {/**************** Dsiplay the itens of the Drawer ****************/}
+    const list = (anchor) => (
+        <div
+            className={clsx(classes.list, {
+                [classes.fullList]: anchor === 'top' || anchor === 'bottom',
+            })}
+            role="presentation"
+            onClick={toggleDrawer(anchor, false)}
+            onKeyDown={toggleDrawer(anchor, false)}
+        >
+            <List>
+                {TabsItens.map((text, index) => (
+                    <ListItem button key={text.label} onClick={() => setIndexIcon(index)}>
+                        <IconButton>
+                            <DisplayIcon label={text.label} />
+                        </IconButton>
+                        <ListItemText primary={text.label} />
+                    </ListItem>
+                ))}
+            </List>
+        </div>
+    );
+
+    return (
+        <div>
+            {/**************** Begin of the Drawer ****************/}
+            {['left'].map((anchor) => (
+                <React.Fragment key={anchor}>
+                    <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
+                        {list(anchor)}
+                    </Drawer>
+                </React.Fragment>
+            ))}
+            {/**************** End of the Drawer****************/} 
+
+            {/**************** Begin of the Content ****************/}
+            <div style={{ paddingTop: '2em', paddingLeft: '2em', paddingRight: '2em', paddingBottom: '2em', backgroundColor: '	#D3D3D3' }}>
+                <DisplayContent selectedIcon={IndexIcon} />
+            </div>
+            {/**************** End of the Content ****************/}
+            
+            {/**************** FLoating action Button ****************/}
+            <Fab color="primary" aria-label="add" style={fab} onClick={toggleDrawer('left', true)}>
+                <MenuIcon />
+            </Fab>
+        </div>
+    );
+}