text: import React, { useState } from 'react';
  import { Link as RouterLink } from 'react-router-dom';
  import clsx from 'clsx';
  import PropTypes from 'prop-types';
  import { fade, makeStyles } from '@material-ui/core/styles';
  import { AppBar, Toolbar, Hidden, IconButton } from '@material-ui/core';
  import MenuIcon from '@material-ui/icons/Menu';
  // import NotificationsIcon from '@material-ui/icons/NotificationsOutlined';
  import InputIcon from '@material-ui/icons/Input';
  // import AddIcon from '@material-ui/icons/Add';
  // import Fab from '@material-ui/core/Fab';
  // import InputBase from '@material-ui/core/InputBase';
  // import SearchIcon from '@material-ui/icons/Search';
  
  const useStyles = makeStyles(theme => ({
    root: {
      boxShadow: 'none'
    },
    flexGrow: {
      flexGrow: 1
    },
    signOutButton: {
      marginLeft: theme.spacing(1)
    },
    logo : {
      width: '10%',
      height: 'auto',
    },
    logoText : {
      color: '#F0FFFF',
      fontFamily: 'Aclonica',
    },
    extendedIcon: {
      marginRight: theme.spacing(1),
    },
    search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      '&:hover': {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginRight: theme.spacing(2),
      marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(3),
        width: 'auto',
      },
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
      // vertical padding + font size from searchIcon
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '20ch',
      },
    },
  }));
  
  const Topbar = props => {
    const { className, onSidebarOpen, ...rest } = props;
  
    const classes = useStyles();
  
    return (
      <AppBar
        {...rest}
        className={clsx(classes.root, className)}
      >
        <Toolbar>
          <RouterLink to="/">
            <img
              alt="Logo"
              src="/images/logos/robot-dribbble.jpg"
              className={classes.logo}
            />
            <span className={classes.logoText}> Dronbert </span>
          </RouterLink>
          <div className={classes.flexGrow} />
          <Hidden mdDown>
            {/* <IconButton color="inherit">
              * <Badge
                badgeContent={notifications.length}
                color="primary"
                variant="dot"
              >
                <NotificationsIcon />
              </Badge>
            </IconButton> */}
            <RouterLink to='/sign-in'><IconButton
              className={classes.signOutButton}
              color="inherit"
            >
              <InputIcon />
            </IconButton></RouterLink>
          </Hidden>
          <Hidden lgUp>
            <IconButton
              color="inherit"
              onClick={onSidebarOpen}
            >
              <MenuIcon />
            </IconButton>
          </Hidden>
        </Toolbar>
      </AppBar>
    );
  };
  
  Topbar.propTypes = {
    className: PropTypes.string,
    onSidebarOpen: PropTypes.func
  };
  
  export default Topbar;
  