152 lines
7.2 KiB
TypeScript
152 lines
7.2 KiB
TypeScript
import { useState } from "react";
|
|
import { AppBar, Toolbar, IconButton, Box, Typography, Container } from "@mui/material";
|
|
import { motion } from "framer-motion";
|
|
import { Outlet } from "react-router-dom";
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import smallone from "../qsmall.png";
|
|
import big from "../QUDRAEDGELOGOTRANSPARENTBLACKfinal.png";
|
|
|
|
export default function Layout() {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<Box sx={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
|
|
|
|
{/* HEADER */}
|
|
<AppBar position="static" sx={{ background: "transparent", boxShadow: "none", overflow: "hidden", paddingRight: '0px' }}>
|
|
<Toolbar sx={{ position: "relative", height: "64px", display: "flex", justifyContent: "space-between", alignItems: "center", paddingRight: '0px' }}>
|
|
|
|
{/* Expanding Menu Animation (Right to Left) */}
|
|
<motion.div
|
|
initial={{ width: "0%", right: 0 }}
|
|
animate={{ width: menuOpen ? "100%" : "0%" }}
|
|
transition={{ duration: 0.5 }}
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
height: "100%",
|
|
background: "black",
|
|
zIndex: -1,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "flex-end",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{/* Menu Items - Now Horizontal */}
|
|
{menuOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.2, duration: 0.5 }}
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: "40px",
|
|
color: "white",
|
|
paddingRight: "90px"
|
|
}}
|
|
>
|
|
<Typography
|
|
|
|
variant="h6"
|
|
component="a"
|
|
href="#"
|
|
sx={{
|
|
color:'white',
|
|
cursor: "pointer",
|
|
"&:hover": { color: "#f5a623" },
|
|
whiteSpace: "nowrap"
|
|
}}
|
|
>
|
|
Home
|
|
</Typography>
|
|
<Typography
|
|
variant="h6"
|
|
component="a"
|
|
href="#"
|
|
sx={{
|
|
color:'white',
|
|
cursor: "pointer",
|
|
"&:hover": { color: "#f5a623" },
|
|
whiteSpace: "nowrap"
|
|
}}
|
|
>
|
|
About
|
|
</Typography>
|
|
<Typography
|
|
variant="h6"
|
|
component="a"
|
|
href="#"
|
|
sx={{
|
|
color:'white',
|
|
cursor: "pointer",
|
|
"&:hover": { color: "#f5a623" },
|
|
whiteSpace: "nowrap"
|
|
}}
|
|
>
|
|
Services
|
|
</Typography>
|
|
<Typography
|
|
variant="h6"
|
|
component="a"
|
|
href="#"
|
|
sx={{
|
|
color:'white',
|
|
cursor: "pointer",
|
|
"&:hover": { color: "#f5a623" },
|
|
whiteSpace: "nowrap"
|
|
}}
|
|
>
|
|
Contact
|
|
</Typography>
|
|
</motion.div>
|
|
)}
|
|
</motion.div>
|
|
|
|
{/* Left Side Logo Animation */}
|
|
<Box
|
|
sx={{ position: "relative", width: 50, height: 50, overflow: "hidden" }}
|
|
onMouseEnter={(e) => (e.currentTarget.style.width = "120px")}
|
|
onMouseLeave={(e) => (e.currentTarget.style.width = "40px")}
|
|
>
|
|
<img src={smallone} alt="Logo" width={50} height={50} />
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.3 }}
|
|
style={{ position: "absolute", top: 0, left: 50 }}
|
|
>
|
|
<img src={big} alt="Full Logo" width={100} height={50} />
|
|
</motion.div>
|
|
</Box>
|
|
|
|
{/* Right Side Menu Button */}
|
|
<IconButton onClick={() => setMenuOpen(!menuOpen)}>
|
|
<motion.div animate={{ rotate: menuOpen ? 135 : 0 }} transition={{ duration: 0.5 }}>
|
|
{menuOpen ? <CloseIcon sx={{ color: "white" }} /> : <MenuIcon />}
|
|
</motion.div>
|
|
</IconButton>
|
|
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
{/* MAIN CONTENT */}
|
|
<Box sx={{ flexGrow: 1 }}>
|
|
<Outlet />
|
|
</Box>
|
|
|
|
{/* FOOTER */}
|
|
<Box sx={{ backgroundColor: "black", color: "white", textAlign: "center", padding: "10px 0", marginTop: "auto" }}>
|
|
<Container>
|
|
<Typography variant="body2">
|
|
© {new Date().getFullYear()} QudraEdge. All Rights Reserved.
|
|
</Typography>
|
|
</Container>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
} |