Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import PropTypes from 'prop-types';
- import AppBar from '@material-ui/core/AppBar';
- import CssBaseline from '@material-ui/core/CssBaseline';
- import Divider from '@material-ui/core/Divider';
- import Drawer from '@material-ui/core/Drawer';
- import Hidden from '@material-ui/core/Hidden';
- import IconButton from '@material-ui/core/IconButton';
- import InboxIcon from '@material-ui/icons/MoveToInbox';
- import List from '@material-ui/core/List';
- import ListItem from '@material-ui/core/ListItem';
- import ListItemIcon from '@material-ui/core/ListItemIcon';
- import ListItemText from '@material-ui/core/ListItemText';
- import MailIcon from '@material-ui/icons/Mail';
- import MenuIcon from '@material-ui/icons/Menu';
- import Toolbar from '@material-ui/core/Toolbar';
- import Typography from '@material-ui/core/Typography';
- import { makeStyles, useTheme } from '@material-ui/core/styles';
- import Dashboard from '../views/DashboardAdmin'
- import Header from '../components/Header/Header'
- import { withStyles } from '@material-ui/styles'
- import Drawer1 from '../assets/img/drawer1.png'
- import Drawer2 from '../assets/img/drawer2.png'
- import Drawer3 from '../assets/img/drawer3.png'
- import Drawer4 from '../assets/img/drawer4.png'
- import CIWALOGO from '../assets/img/CIWALOGO.png'
- import { Row, Col } from "react-bootstrap";
- const drawerWidth = 240;
- const useStyles = makeStyles(theme => ({
- root: {
- display: 'flex',
- },
- drawer: {
- [theme.breakpoints.up('sm')]: {
- width: drawerWidth,
- flexShrink: 0,
- },
- },
- appBar: {
- marginLeft: drawerWidth,
- [theme.breakpoints.up('sm')]: {
- width: `calc(100% - ${drawerWidth}px)`,
- },
- },
- menuButton: {
- marginRight: theme.spacing(2),
- [theme.breakpoints.up('sm')]: {
- display: 'none',
- },
- },
- toolbar: theme.mixins.toolbar,
- drawerPaper: {
- width: drawerWidth,
- backgroundColor: "#05235F"
- },
- content: {
- flexGrow: 1,
- padding: theme.spacing(3),
- },
- }));
- function ResponsiveDrawer(props) {
- const { container } = props;
- const classes = useStyles();
- const theme = useTheme();
- const [mobileOpen, setMobileOpen] = React.useState(false);
- function handleDrawerToggle() {
- setMobileOpen(!mobileOpen);
- }
- const drawer = (
- <div>
- <div />
- <img src={CIWALOGO} alt="Logo de CIWA"/>
- <List>
- <ListItem button component="a" href="/">
- <img src={Drawer1} alt="Dashboard"/>
- <Col style={{color : "white"}}>
- <ListItemText primary="Dashboard" />
- </Col>
- </ListItem>
- <ListItem button component="a" href="/">
- <img src={Drawer2} alt="Deals partenaires"/>
- <Col style={{color : "white"}}>
- <ListItemText primary="Deals partenaires" />
- </Col>
- </ListItem>
- <ListItem button component="a" href="/">
- <img src={Drawer3} alt="Collaborateurs"/>
- <Col style={{color : "white"}}>
- <ListItemText primary="Collaborateurs" />
- </Col>
- </ListItem>
- <ListItem button component="a" href="/">
- <img src={Drawer4} alt="Contactez-nous"/>
- <Col style={{color : "white"}}>
- <ListItemText primary="Contactez-nous"/>
- </Col>
- </ListItem>
- </List>
- </div>
- );
- return (
- <div className={classes.root}>
- <CssBaseline />
- <AppBar color="white" position="fixed" className={classes.appBar}>
- <Toolbar>
- <IconButton
- color="inherit"
- aria-label="open drawer"
- edge="start"
- onClick={handleDrawerToggle}
- className={classes.menuButton}
- >
- <MenuIcon />
- </IconButton>
- <Header />
- </Toolbar>
- </AppBar>
- <nav className={classes.drawer} aria-label="mailbox folders">
- {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
- <Hidden smUp implementation="css">
- <Drawer
- classes={{ paper: classes.drawerPaper }}
- container={container}
- variant="temporary"
- anchor={theme.direction === 'rtl' ? 'right' : 'left'}
- open={mobileOpen}
- onClose={handleDrawerToggle}
- ModalProps={{
- keepMounted: true, // Better open performance on mobile.
- }}
- >
- {drawer}
- </Drawer>
- </Hidden>
- <Hidden xsDown implementation="css">
- <Drawer
- classes={{
- paper: classes.drawerPaper,
- }}
- variant="permanent"
- open
- >
- {drawer}
- </Drawer>
- </Hidden>
- </nav>
- <main style={{backgroundColor : "green"}} className={classes.content}>
- <div className={classes.toolbar} />
- <Dashboard />
- </main>
- </div>
- );
- }
- ResponsiveDrawer.propTypes = {
- /**
- * Injected by the documentation to work in an iframe.
- * You won't need it on your project.
- */
- container: PropTypes.object,
- };
- export default ResponsiveDrawer;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement