111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
AppBar, Toolbar, Typography, Button, IconButton, Box, Drawer, List,
|
|
ListItem, ListItemButton, ListItemText
|
|
} from "@mui/material";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
import headerlogo from "../components/imageandgif/newlogo.png"
|
|
|
|
const Header: React.FC = () => {
|
|
const [mobileOpen, setMobileOpen] = useState<boolean>(false);
|
|
|
|
const toggleMobileMenu = () => {
|
|
setMobileOpen(!mobileOpen);
|
|
};
|
|
|
|
return (
|
|
<AppBar
|
|
position="fixed"
|
|
sx={{
|
|
backgroundColor: "#7c77770d",
|
|
margin: "20px 20px 10px 20px",
|
|
|
|
boxShadow: "none",
|
|
width: {
|
|
xs: "91.6vw",
|
|
sm: "95.5vw",
|
|
md: "96.5vw",
|
|
lg: "96.8vw",
|
|
xl: "96.4vw"
|
|
},
|
|
color: "black",
|
|
zIndex:11111
|
|
}}
|
|
>
|
|
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
|
|
{/* Logo in Desktop, Centered in Mobile */}
|
|
<Box sx={{ display: "flex", alignItems: "center", flexGrow: { xs: 1, md: 0 } }}>
|
|
<img
|
|
src={headerlogo}
|
|
alt="Logo"
|
|
style={{ height: "50px", cursor: "pointer", width:'176px' }}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Mobile Menu Button on the Right */}
|
|
<IconButton
|
|
edge="end"
|
|
color="inherit"
|
|
aria-label="menu"
|
|
sx={{ display: { xs: "block", md: "none" } }}
|
|
onClick={toggleMobileMenu}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
|
|
{/* Desktop Navigation */}
|
|
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 3 }}>
|
|
<Button color="inherit">Home</Button>
|
|
<Button color="inherit">About</Button>
|
|
<Button color="inherit">Team</Button>
|
|
<Button
|
|
sx={{
|
|
padding: "7px 20px",
|
|
backgroundColor: "#0841adcc",
|
|
color: "white",
|
|
"&:hover": { backgroundColor: "darkblue" }
|
|
}}
|
|
>
|
|
Contact-Us
|
|
</Button>
|
|
</Box>
|
|
|
|
{/* Mobile Drawer Menu */}
|
|
<Drawer anchor="right" open={mobileOpen} onClose={toggleMobileMenu} sx={{zIndex:111111}}>
|
|
<Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
|
|
<List>
|
|
<ListItem disablePadding>
|
|
<ListItemButton>
|
|
<ListItemText primary="Home" />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem disablePadding>
|
|
<ListItemButton>
|
|
<ListItemText primary="What we do" />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem disablePadding>
|
|
<ListItemButton>
|
|
<ListItemText primary="Our philosphy" />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem disablePadding>
|
|
<ListItemButton>
|
|
<ListItemText primary="Our team" />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
<ListItem >
|
|
<ListItemButton sx={{ backgroundColor: "blue", color: "white", "&:hover": { backgroundColor: "darkblue" } }}>
|
|
<ListItemText primary="Contact Us" />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</Box>
|
|
</Drawer>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|
|
|
|
export default Header;
|