48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import { AppBar, Toolbar, IconButton } from "@mui/material";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
import Dropdown from "./dropDown/DropDown";
|
|
import AccountMenu from "./accountMenu/AccountMenu";
|
|
import "./Header.scss";
|
|
|
|
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
|
|
className="header"
|
|
position="sticky"
|
|
color="transparent"
|
|
elevation={0}
|
|
sx={{ borderBottom: "1px solid #22242626" }}
|
|
>
|
|
<Toolbar className="header__toolbar">
|
|
<div className="header__left-group">
|
|
<IconButton edge="start" color="inherit" aria-label="menu">
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Dropdown onChange={handleChange} />
|
|
</div>
|
|
|
|
<div className="header__right-group">
|
|
<AccountMenu />
|
|
</div>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|
|
|
|
export default Header;
|