Header - Copy this React, Tailwind Component to your project

import React, {useState} from "react"; import {AppBar, Toolbar, Box, IconButton, Menu, MenuItem, Button} from "@mui/material"; import MenuIcon from "@mui/icons-material/Menu"; const MegaMenuBar = () => { const [mobileMenuAnchorEl, setMobileMenuAnchorEl] = useState(null); const [childMenuAnchorEl, setChildMenuAnchorEl] = useState(null); const [superChildMenuAnchorEl, setSuperChildMenuAnchorEl] = useState(null); const [Automotive, setAutomotive] = useState(null); const [spaceSystem, setSpaceSystem] = useState(null); const isMobileMenuOpen = Boolean(mobileMenuAnchorEl); const isChildMenuOpen = Boolean(childMenuAnchorEl); const isSuperChildMenuOpen = Boolean(superChildMenuAnchorEl); const handleMobileMenuOpen = (event) => setMobileMenuAnchorEl(event.currentTarget); const handleMobileMenuClose = () => setMobileMenuAnchorEl(null); const handleChildMenuOpen = (event) => setChildMenuAnchorEl(event.currentTarget); const handleChildMenuClose = () => setChildMenuAnchorEl(null); const handleSuperChildMenuOpen = (event) => setSuperChildMenuAnchorEl(event.currentTarget); const handleSuperChildMenuClose = () => setSuperChildMenuAnchorEl(null); const handleAutomotive = (event) => setAutomotive(event.currentTarget); const handleAutomotiveClose = () => setAutomotive(null); const handleSpaceSystem = (event) => setSpaceSystem(event.currentTarget); const handleSpaceSystemClose = () => setSpaceSystem(null); return ( <Box> {/* AppBar */} <AppBar position="static"> <Toolbar> {/* Mobile Hamburger */} <IconButton edge="start" color="inherit" aria-label="menu" onClick={handleMobileMenuOpen} sx={{display: {xs: "block", md: "none"}}} > <MenuIcon /> </IconButton> {/* Desktop Menu */} <Box sx={{display: {xs: "none", md: "flex"}}}> <Button onMouseEnter={handleChildMenuOpen} onClick={handleChildMenuOpen} color="inherit"> About </Button> <Button onMouseEnter={handleChildMenuOpen} onClick={handleChildMenuOpen} color="inherit"> Service </Button> <Button color="inherit">Products</Button> <Button color="inherit">Career</Button> <Button color="inherit">Blog</Button> <Menu anchorEl={childMenuAnchorEl} open={isChildMenuOpen} onClose={handleChildMenuClose} onMouseLeave={handleChildMenuClose} PaperProps={{ sx: { display: "flex", flexDirection: "column", gap: 1, padding: 1, }, }} > {/* Top Row: Main Categories */} <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", gap: 2, paddingX: 2, }} > <MenuItem onMouseEnter={handleSuperChildMenuOpen}>Industries</MenuItem> <MenuItem>Engineering Service</MenuItem> <MenuItem>IT, AI, IoT Service</MenuItem> </Box> {isSuperChildMenuOpen && ( <Box sx={{ display: "flex", flexDirection: "column", paddingLeft: 2, paddingTop: 1, gap: 1, }} > <MenuItem onClick={handleAutomotive}>Automotive</MenuItem> <MenuItem onClick={handleSpaceSystem}>Space System</MenuItem> <MenuItem onMouseLeave={handleAutomotiveClose}>General Engineering</MenuItem> <MenuItem onMouseLeave={handleAutomotiveClose}>Heavy Engineering</MenuItem> <MenuItem onMouseLeave={handleAutomotiveClose}>Energy Solutions</MenuItem> </Box> )} {Automotive && ( <Box sx={{ position: "absolute", top: 0, left: "200px", display: "flex", flexDirection: "column", padding: 1, backgroundColor: "white", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", zIndex: 10, }} onMouseLeave={handleAutomotiveClose} > <MenuItem>Body in White</MenuItem> <MenuItem>Chassis & Suspension</MenuItem> <MenuItem>Electrical & Electronics</MenuItem> <MenuItem>Trims & Seating</MenuItem> <MenuItem>Power Train Design</MenuItem> </Box> )} {spaceSystem && ( <Box sx={{ position: "absolute", top: 0, left: "200px", display: "flex", flexDirection: "column", padding: 1, backgroundColor: "white", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", zIndex: 10, }} onMouseLeave={handleSpaceSystemClose} > <MenuItem>Structures</MenuItem> <MenuItem>Structural Analysis and Optimization</MenuItem> <MenuItem>Deployment Mechanisms</MenuItem> <MenuItem>Electronic Packages</MenuItem> <MenuItem>Ground Handling Systems</MenuItem> </Box> )} </Menu> <Button color="inherit">Contact</Button> </Box> </Toolbar> </AppBar> {/* Mobile Menu */} <Menu anchorEl={mobileMenuAnchorEl} open={isMobileMenuOpen} onClose={handleMobileMenuClose} PaperProps={{sx: {width: "100%"}}} > <MenuItem onClick={handleMobileMenuClose}>Home</MenuItem> <MenuItem onClick={handleMobileMenuClose}>About</MenuItem> <MenuItem onClick={handleChildMenuOpen}>Features</MenuItem> {/* Mobile Submenu */} <Menu anchorEl={childMenuAnchorEl} open={isChildMenuOpen} onClose={handleChildMenuClose} PaperProps={{sx: {width: "100%"}}} > <MenuItem onClick={handleAutomotive}>Automotive</MenuItem> <MenuItem onClick={handleSpaceSystem}>Space System</MenuItem> <MenuItem onClick={handleMobileMenuClose}>General Engineering</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Heavy Engineering</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Energy Solutions</MenuItem> </Menu> <Menu anchorEl={Automotive} open={Boolean(Automotive)} onClose={handleAutomotiveClose} PaperProps={{sx: {width: "100%"}}} > <MenuItem onClick={handleMobileMenuClose}>Body in White</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Chassis & Suspension</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Electrical & Electronics</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Trims & Seating</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Power Train Design</MenuItem> </Menu> <Menu anchorEl={spaceSystem} open={Boolean(spaceSystem)} onClose={handleSpaceSystemClose} PaperProps={{sx: {width: "100%"}}} > <MenuItem onClick={handleMobileMenuClose}>Structures</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Structural Analysis and Optimization</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Deployment Mechanisms</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Electronic Packages</MenuItem> <MenuItem onClick={handleMobileMenuClose}>Ground Handling Systems</MenuItem> </Menu> <MenuItem onClick={handleMobileMenuClose}>Contact</MenuItem> </Menu> </Box> ); }; export default MegaMenuBar; corre t it