import React, { useEffect, useState, useRef } from 'react'; import MenuIcon from '@material-ui/icons/Menu'; import SearchIcon from '@material-ui/icons/Search'; import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'; import { makeStyles } from '@material-ui/core/styles'; import { SwipeableDrawer } from '@material-ui/core'; import NavbarDrawer from './NavbarDrawer/NavbarDrawer.js'; import clsx from 'clsx'; import './Header.scss'; const useStyles = makeStyles({ list: { width: window.innerWidth * 0.8, }, fullList: { width: 'auto', direction: 'rtl', textAlign: 'right', }, }); export default function Header(props) { const classes = useStyles(); const [state, setState] = useState({ top: false, left: false, bottom: false, right: false, searchFlag: false, }); const inputRef5 = useRef(); useEffect(() => { if (state['searchFlag'] === true) { inputRef5.current.focus(); } }); const list = (props, anchor) => (