You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.1 KiB
106 lines
3.1 KiB
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) => ( |
|
<div |
|
className={clsx(classes.list, { |
|
[classes.fullList]: anchor === 'top' || anchor === 'bottom', |
|
})} |
|
role="presentation" |
|
onClick={toggleDrawer(anchor, false)} |
|
onKeyDown={toggleDrawer(anchor, false)} |
|
> |
|
<NavbarDrawer |
|
setShare={props.setShare} |
|
user={props.user} |
|
logout={props.logout} |
|
needUpdate={props.needUpdate} |
|
/> |
|
</div> |
|
); |
|
|
|
const toggleDrawer = (anchor, open) => (event) => { |
|
if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { |
|
return; |
|
} |
|
|
|
setState({ [anchor]: open }); |
|
}; |
|
|
|
return ( |
|
<div className="header d-flex"> |
|
{state['searchFlag'] === true ? ( |
|
<div className="header__search d-flex"> |
|
<div onClick={() => setState({ ...state, searchFlag: !state.searchFlag })}> |
|
<ArrowRightAltIcon style={{ color: 'rgb(111,108,255)', width: 38, height: 38 }} /> |
|
</div> |
|
<input type="search" ref={inputRef5} placeholder="بنویس ..." /> |
|
<div> |
|
<SearchIcon style={{ color: 'gray', width: 38, height: 38, marginLeft: 15 }} /> |
|
</div> |
|
</div> |
|
) : ( |
|
<> |
|
<div onClick={() => setState({ ...state, searchFlag: !state.searchFlag })}> |
|
<SearchIcon style={{ color: 'white', width: 38, height: 38 }} /> |
|
</div> |
|
<div className="chat-header__title d-flex"> |
|
<h1 style={{ fontFamily: 'IRANSansNumeralBold' }}>ایما</h1> |
|
<span style={{ position: 'relative', top: -3 }}></span> |
|
<h1 style={{ fontSize: 17, position: 'relative', top: 2 }}>داستانبازی</h1> |
|
</div> |
|
<div onClick={toggleDrawer('right', true)}> |
|
<MenuIcon |
|
style={{ color: 'white', width: 38, height: 38, position: 'relative', top: 0 }} |
|
/> |
|
</div> |
|
|
|
<SwipeableDrawer |
|
anchor="right" |
|
open={state['right']} |
|
onClose={toggleDrawer('right', false)} |
|
onOpen={toggleDrawer('right', true)} |
|
> |
|
{list(props, 'right')} |
|
</SwipeableDrawer> |
|
</> |
|
)} |
|
</div> |
|
); |
|
}
|
|
|