110 lines
3.6 KiB
TypeScript
110 lines
3.6 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: { md: "#f7f7f7", xs: "white" },
|
|
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, fontFamily: "Helvetica" }}>
|
|
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41"}} >Home</Button>
|
|
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41" }} >About</Button>
|
|
<Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" ,color:"#2F2E41" }} >Team</Button>
|
|
<Button
|
|
sx={{
|
|
padding: "7px 20px",
|
|
backgroundColor: "#317AF6",
|
|
color: "white",
|
|
fontFamily: "Helvetica",
|
|
textTransform: "capitalize",
|
|
"&: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>
|
|
{["Home", "What we do", "Our philosophy", "Our team"].map((text) => (
|
|
<ListItem key={text} disablePadding>
|
|
<ListItemButton>
|
|
<ListItemText
|
|
primary={text}
|
|
sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
<ListItem>
|
|
<ListItemButton
|
|
sx={{
|
|
backgroundColor: "blue",
|
|
color: "white",
|
|
fontFamily: "Helvetica",
|
|
textTransform: "capitalize",
|
|
"&:hover": { backgroundColor: "darkblue" }
|
|
}}
|
|
>
|
|
<ListItemText primary="Contact us" />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</Box>
|
|
</Drawer>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|
|
|
|
export default Header;
|