152 lines
4.2 KiB
TypeScript
152 lines
4.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
AppBar,
|
|
Toolbar,
|
|
Typography,
|
|
IconButton,
|
|
Drawer,
|
|
List,
|
|
ListItem,
|
|
ListItemText,
|
|
Button,
|
|
useMediaQuery,
|
|
useTheme,
|
|
Box,
|
|
Container,
|
|
ListItemButton,
|
|
} from "@mui/material";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
import { motion } from "framer-motion";
|
|
|
|
const navItems = ["Home", "Services", "Portfolio", "About Us", "Blog"];
|
|
|
|
const Header = () => {
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
|
|
|
|
const toggleDrawer = () => {
|
|
setMobileOpen(!mobileOpen);
|
|
};
|
|
|
|
const drawer = (
|
|
<Box sx={{ width: 250, backgroundColor: "#000" }} onClick={toggleDrawer}>
|
|
<List>
|
|
{navItems.map((item) => (
|
|
<ListItemButton component="a" href="#" key={item}>
|
|
<ListItemText primary={item} sx={{ color: "#fff" }} />
|
|
</ListItemButton>
|
|
))}
|
|
<ListItem disablePadding>
|
|
<Button
|
|
variant="outlined"
|
|
fullWidth
|
|
sx={{
|
|
borderColor: "#00E0FF",
|
|
color: "#00E0FF",
|
|
backgroundColor: "transparent",
|
|
borderRadius: "8px",
|
|
m: 2,
|
|
"&:hover": {
|
|
backgroundColor: "#00E0FF",
|
|
color: "#000",
|
|
},
|
|
}}
|
|
>
|
|
Contact Us
|
|
</Button>
|
|
</ListItem>
|
|
</List>
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<AppBar
|
|
position="sticky"
|
|
sx={{ backgroundColor: "#000", boxShadow: "none" }}
|
|
>
|
|
<Container maxWidth="lg">
|
|
<Toolbar sx={{ justifyContent: "space-between", padding: "16px 0" }}>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<Typography variant="h6" sx={{ fontWeight: 700, color: "#fff" }}>
|
|
QUADRA EDGE
|
|
</Typography>
|
|
</motion.div>
|
|
|
|
{isMobile ? (
|
|
<>
|
|
<IconButton color="inherit" edge="end" onClick={toggleDrawer}>
|
|
<MenuIcon sx={{ color: "#fff" }} />
|
|
</IconButton>
|
|
<Drawer
|
|
anchor="right"
|
|
open={mobileOpen}
|
|
onClose={toggleDrawer}
|
|
sx={{ "& .MuiDrawer-paper": { backgroundColor: "#000" } }}
|
|
>
|
|
{drawer}
|
|
</Drawer>
|
|
</>
|
|
) : (
|
|
<Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
|
|
{navItems.map((item, index) => (
|
|
<motion.div
|
|
key={item}
|
|
initial={{ opacity: 0, y: -5 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 * index }}
|
|
>
|
|
<Typography
|
|
variant="body1"
|
|
component="a"
|
|
href="#"
|
|
sx={{
|
|
color: "#fff",
|
|
textDecoration: "none",
|
|
"&:hover": {
|
|
color: "#00E0FF",
|
|
},
|
|
}}
|
|
>
|
|
{item}
|
|
</Typography>
|
|
</motion.div>
|
|
))}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -5 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.5 }}
|
|
>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
borderColor: "#00E0FF",
|
|
color: "#00E0FF",
|
|
backgroundColor: "transparent",
|
|
borderRadius: "8px",
|
|
textTransform: "none",
|
|
padding: "8px 24px",
|
|
"&:hover": {
|
|
backgroundColor: "#00E0FF",
|
|
color: "#000",
|
|
borderColor: "#00E0FF",
|
|
},
|
|
}}
|
|
>
|
|
Contact Us
|
|
</Button>
|
|
</motion.div>
|
|
</Box>
|
|
)}
|
|
</Toolbar>
|
|
</Container>
|
|
</AppBar>
|
|
);
|
|
};
|
|
|
|
export default Header;
|