47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { AppBar, Toolbar, IconButton, Menu, MenuItem, Button } from '@mui/material';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
|
|
const Header = () => {
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
|
|
// Handle menu open
|
|
const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
// Handle menu close
|
|
const handleMenuClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
return (
|
|
<AppBar position="sticky" color="transparent" elevation={0}>
|
|
<Toolbar>
|
|
{/* Burger Menu */}
|
|
<IconButton edge="start" color="inherit" aria-label="menu">
|
|
<MenuIcon />
|
|
</IconButton>
|
|
|
|
{/* Dropdown Button */}
|
|
<Button color="inherit" onClick={handleMenuClick}>
|
|
Options
|
|
</Button>
|
|
|
|
{/* 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;
|