Builded a navigations system

src/Admin/Pages/Pages/Admin.js

@@ -28,9 +28,14 @@ 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';
-import { Store } from '../../../Store'; 
+import { Store } from '../../../Store';
+import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
 import Unauthorized from '../../Components/Components/Unauthorized';
+import Welcome from '../../Components/Components/Welcome';
+import NoteVariables from './SubPages/NoteVariables';
+import Institution from './SubPages/Institutions'; 
+import SendEmail from './SubPages/SendEmail'; 
+import Inframe from './SubPages/Inframe';
 
 const useStyles = makeStyles({
     list: {
@@ -84,40 +89,62 @@ export default function Admin() {
         >
             <List>
                 {TabsItens.map((text, index) => (
-                    <ListItem button key={text.label} onClick={() => setIndexIcon(index)}>
-                        <IconButton>
-                            <DisplayIcon i={index} />
-                        </IconButton>
-                        <ListItemText primary={text.label} />
-                    </ListItem>
+                    <Link to={text.href} key={text.label}>
+                        <ListItem button key={text.label} onClick={() => setIndexIcon(index)}>
+                            <IconButton>
+                                <DisplayIcon i={index} />
+                            </IconButton>
+                            <ListItemText primary={text.label} />
+                        </ListItem>
+                    </Link>
                 ))}
             </List>
         </div>
-    ); 
+    );
 
     return (
-        <div>
-            {/**************** Begin of the Drawer ****************/}
+        <BrowserRouter>
+            <Switch>
+                <div style={{ paddingTop: '2em', paddingLeft: '2em', paddingRight: '2em', paddingBottom: '2em', backgroundColor: '	#D3D3D3' }}>
+                    <Route path='/admin/home' component={Welcome}/>
+                    <Route path='/admin/intitution' component={Institution}/>
+                    <Route path='/admin/sendEmail' component={SendEmail}/>
+                    <Route path='/admin/inframe' component={Inframe}/>
+                    <Route path='/admin/noteVar' component={NoteVariables} />
+                </div>
+            </Switch>
+
             <React.Fragment>
                 <Drawer anchor={'left'} open={State['left']} onClose={toggleDrawer('left', false)}>
                     {list('left')}
                 </Drawer>
             </React.Fragment>
-            {/**************** End of the Drawer****************/}
-
-            {/**************** Begin of the Content ****************/}
-            <div style={{ paddingTop: '2em', paddingLeft: '2em', paddingRight: '2em', paddingBottom: '2em', backgroundColor: '	#D3D3D3' }}>
-                <DisplayContent i={IndexIcon} />
-            </div>
-            {/**************** End of the Content ****************/}
-
-            {/**************** FLoating action Button ****************/}
             <Fab color="primary" aria-label="add" style={fab} onClick={toggleDrawer('left', true)}>
                 <MenuIcon />
             </Fab>
-        </div>
+        </BrowserRouter>
+        // <div>
+        //     {/**************** Begin of the Drawer ****************/}
+        //     <React.Fragment>
+        //         <Drawer anchor={'left'} open={State['left']} onClose={toggleDrawer('left', false)}>
+        //             {list('left')}
+        //         </Drawer>
+        //     </React.Fragment>
+        //     {/**************** End of the Drawer****************/}
+
+        //     {/**************** Begin of the Content ****************/}
+        //     <div style={{ paddingTop: '2em', paddingLeft: '2em', paddingRight: '2em', paddingBottom: '2em', backgroundColor: '	#D3D3D3' }}>
+        //         <DisplayContent i={IndexIcon} />
+        //     </div>
+        //     {/**************** End of the Content ****************/}
+
+        //     {/**************** FLoating action Button ****************/}
+        //     <Fab color="primary" aria-label="add" style={fab} onClick={toggleDrawer('left', true)}>
+        //         <MenuIcon />
+        //     </Fab>
+        // </div>
     );
-    
+
     // if (state.userIsLoggedIn) {
     //     var obj = { ...(state.currentUser.roles)[0] }
     //     if (obj.id === 3 || obj.id === 7) {