44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { AppBar, Toolbar, IconButton, Menu, MenuItem } from '@mui/material';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import Dropdown from './DropDown';
|
|
|
|
const Header = () => {
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
|
|
// Handle menu close
|
|
const handleMenuClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const handleChange = () => {
|
|
};
|
|
|
|
return (
|
|
<AppBar position="sticky" color="transparent" elevation={0} sx={{ borderBottom: '1px solid #22242626' }}>
|
|
<Toolbar>
|
|
{/* Burger Menu */}
|
|
<IconButton edge="start" color="inherit" aria-label="menu">
|
|
<MenuIcon />
|
|
</IconButton>
|
|
|
|
{/* Dropdown Button */}
|
|
<Dropdown onChange={handleChange}/>
|
|
|
|
{/* Dropdown Menu */}
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleMenuClose}
|
|
>
|
|
<MenuItem onClick={handleMenuClose}>Option 1</MenuItem>
|
|
<MenuItem onClick={handleMenuClose}>Option 2</MenuItem>
|
|
<MenuItem onClick={handleMenuClose}>Option 3</MenuItem>
|
|
</Menu>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|
|
|
|
export default Header;
|