53 lines
1.4 KiB
TypeScript
53 lines
1.4 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/DropDown";
|
|
|
|
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);
|
|
};
|
|
|
|
const handleChange = (e: any) => {};
|
|
|
|
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;
|