app/webRTC/components/Header.js

import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { withStyles, getMuiTheme } from '@material-ui/core/styles';
import MenuIcon from '@material-ui/icons/Menu';
import Link from 'next/link'
import Drawer from '@material-ui/core/Drawer';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Divider from '@material-ui/core/Divider';
import SendIcon from '@material-ui/icons/Send';
import CodeIcon from '@material-ui/icons/Code';
import HomeIcon from '@material-ui/icons/Home';
import FingerprintIcon from '@material-ui/icons/Fingerprint';
import LocalBarIcon from '@material-ui/icons/LocalBar';

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import { ListItemText } from '@material-ui/core';

import { Spring, animated } from 'react-spring'

const styles = theme => ({
  root: {
    width: '100%',
    '& a':{
      textDecoration:'none'
    }
  },

  grow: {
    flexGrow: 1,
  },
  bar: {
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
    [theme.breakpoints.up('sm')]: {
      display: 'none',
    },
    [theme.breakpoints.down('md')]: {
      display: 'block',
    },
  },
  menuLogo: {
    marginLeft: 20,
    marginRight: 40,
    cursor: 'pointer'
  },
  title: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
    [theme.breakpoints.down('md')]: {
      display: 'none',
    },
    marginRight: 15,
    cursor: 'pointer'
  },
  sectionDesktop: {
    display: 'none',
    [theme.breakpoints.up('md')]: {
      display: 'flex',
    },
  },
  sectionMobile: {
    display: 'flex',
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
  },
  fullList: {
    width: 'auto',
    cursor: 'pointer'
  },
});

class Header extends React.Component {
  state = {
    top: false,
    left: false,
    bottom: false,
    right: false,
    toggle: true
  };

  toggleDrawer = (side, open) => () => {
    this.setState({
      [side]: open,
    });
  };

  toggle = () => this.setState(state => ({ toggle: !state.toggle }))

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <Drawer anchor="top" open={this.state.top} onClose={this.toggleDrawer('top', false)}>
          <div
            tabIndex={0}
            role="button"
            onClick={this.toggleDrawer('top', false)}
            onKeyDown={this.toggleDrawer('top', false)}
          >
            <div className={classes.fullList}>
              <List>
                <Link href="/" prefetch >
                  <a><ListItem>
                    <ListItemIcon>
                      <HomeIcon />
                    </ListItemIcon>
                    <ListItemText primary='Accueil'>
                    </ListItemText>
                  </ListItem></a>
                </Link>
                <Divider />
                <Link href="/contact" prefetch >
                  <a><ListItem>
                    <ListItemIcon>
                      <SendIcon />
                    </ListItemIcon>
                    <ListItemText primary='contact'>
                    </ListItemText>
                  </ListItem></a>
                </Link>
              </List>
            </div>
          </div>
        </Drawer>
        <AppBar position="static" className={classes.appBar}>
          <Toolbar>
            <IconButton className={classes.menuButton} onClick={this.toggleDrawer('top', true)}
              color="inherit" aria-label="Open drawer">
              <MenuIcon />
            </IconButton>

            <Link href="/" prefetch>
            <a><div onClick={this.toggle}>
                <Spring native from={{ x: 0 }} to={{ x: this.state.toggle ? 1 : 0 }} config={{ duration: 1000 }}>
                  {({ x }) => (
                    <animated.div
                      style={{
                        opacity: x.interpolate({ output: [1, 1] }),
                        transform: x
                          .interpolate({
                            range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
                            output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1]
                          })
                          .interpolate(x => `scale(${x})`)
                      }}>
                      <img alt="e-declic" src='https://www.e-declic.com/files/e-declic/img/logo.png' className={classes.menuLogo} />
                    </animated.div>
                  )}
                </Spring>
              </div></a>
            </Link>
           
            <Link href="/contact" prefetch >
              <a><Typography className={classes.title} variant="h5" color="inherit" noWrap>
                Contact
              </Typography></a>
            </Link>
          </Toolbar>
        </AppBar>
      </div >
    );
  }
}

Header.propTypes = {
  classes: PropTypes.object.isRequired,
};


export default withStyles(styles)(Header)