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

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>
);
}