Chat/src/components/AppBar/AppBar.jsx

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import { useState } from 'react';
import { SearchAppBarWrapper, SearchInput } from './AppBar.style';





export default function SearchAppBar({openUserMenu}) {
  const [value, setValue] = useState('');
  return (
    <SearchAppBarWrapper>
          <IconButton
              onClick={openUserMenu}
              size="medium"
              edge="start"
              aria-label="open drawer"
              sx={{ m: '0 7px' }}
            >
              <MenuIcon style={{color: '#b4b4b4'}}/>
            </IconButton>

          <SearchInput placeholder='Search' value={value} onChange={e => setValue(e.target.value)}></SearchInput>
    </SearchAppBarWrapper>
          
          
          
     
  );
}