Untitled
unknown
plain_text
10 months ago
22 kB
11
Indexable
/* eslint-disable */
import React, { useEffect, useState } from "react";
import { Menu, X, User, LogIn, UserPlus, Home } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/router";
import { border, padding, width } from "@mui/system";
function MobileNavbar({
page,
section,
setSection,
openSidebar,
setOpenSidebar,
showMenu,
}) {
const [show, handleShow] = useState(true);
const [managerDetails, setManagerDetails] = useState();
const [userAgent, setUserAgent] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
const router = useRouter();
const [isMobile, setIsMobile] = useState(false);
// useEffect(() => {
// const handleScroll = () => {
// const isScrolled = window.scrollY > 10;
// setScrolled(isScrolled);
// };
// window.addEventListener("scroll", handleScroll);
// return () => window.removeEventListener("scroll", handleScroll);
// }, []);
useEffect(() => {
if (typeof window !== "undefined") {
const handleResize = () => {
setIsMobile(window.innerWidth <= 768);
};
handleResize(); // run once on mount
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}
}, []);
useEffect(() => {
if (openSidebar || isMobileMenuOpen) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "auto";
}
}, [openSidebar, isMobileMenuOpen]);
useEffect(() => {
const restrictedPaths = ["/managerdashboard", "/admin", "/mobileuser"];
if (
typeof window !== "undefined" &&
restrictedPaths.includes(window.location.pathname)
) {
handleShow(false);
}
const mockManagerDetails = { company_name: "acme corp" };
setManagerDetails(mockManagerDetails);
}, []);
useEffect(() => {
if (typeof window !== "undefined") {
const userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.includes("sm") || userAgent.includes("wv")) {
setUserAgent(true);
}
}
}, []);
const handleHome = () => {
if (userAgent) {
return router.push("/mobilelogin");
}
};
const handleLogin = () => {
router.push("/login");
setIsMobileMenuOpen(false);
};
const handleRegister = () => {
router.push("/register");
setIsMobileMenuOpen(false);
};
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen);
};
const capitalizeFirstLetter = (s) => {
return s && s[0].toUpperCase() + s.slice(1);
};
const styles = {
navbar: {
// position: "sticky",
// top: 0,
// zIndex: 1000,
background:'white',
// background: scrolled ? "rgba(15, 23, 41, 0)" : "rgba(15, 23, 41, 0)", // <-- change opacity
backdropFilter: "blur(20px)",
WebkitBackdropFilter: "blur(20px)",
borderBottom: scrolled
? "1px solid (15, 23, 41, 0)"
: "1px solid (15, 23, 41, 0)",
transition: "all 0.3s cubic-bezier(15, 23, 41, 0)",
boxShadow: scrolled
? "0 8px 32px rgba(15, 23, 41, 0)"
: "0 4px 20px rgba(15, 23, 41, 0)",
// border:'1px solid red' ,
},
container: {
// width: "90%",
// border:'1px solid red',
// maxWidth: "1200px",
margin: "0 auto",
padding: "0 20px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
height: "72px",
position: "relative",
boxShadow: scrolled
? "0 8px 32px rgba(15, 23, 41, 0)"
: "0 4px 20px rgba(15, 23, 41, 0)",
background: scrolled ? "rgba(15, 23, 41, 0)" : "rgba(15, 23, 41, 0)",
},
leftSection: {
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "16px",
// border:'1px solid red'
},
menuButton: {
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "white",
border: "1px solid rgba(255, 255, 255, 0.1)",
borderRadius: "10px",
cursor: "pointer",
padding: "10px",
transition: "all 0.3s ease",
color: "black",
},
menuButtonHover: {
background: "white",
color: "black",
transform: "scale(1.05)",
// boxShadow: "0 4px 15px rgba(16, 185, 129, 0.2)",
},
logo: {
cursor: "pointer",
transition: "transform 0.3s ease",
borderRadius: "12px",
// padding: "8px",
},
logoHover: {
transform: "scale(1.02)",
},
logoContent: {
display: "flex",
alignItems: "center",
gap: "12px",
// border:'1px solid red',
// padding:'0px'
},
logoIcon: {
width: "28px",
height: "28px",
color: "#00b4d8",
},
logoText: {
fontSize: "24px",
fontWeight: "800",
background: "#00b4d8",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
letterSpacing: "-0.5px",
},
desktopNav: {
display: "flex",
alignItems: "center",
gap: "12px",
},
navButton: {
display: "flex",
alignItems: "center",
gap: "8px",
padding: "12px 20px",
borderRadius: "10px",
fontWeight: "600",
fontSize: "14px",
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
cursor: "pointer",
border: "1px solid transparent",
textDecoration: "none",
position: "relative",
overflow: "hidden",
},
loginButton: {
// border:'1px solid #00b4d8',
// background: "rgba(30, 41, 59, 0.6)",
color: "black",
border: "2px solid #00b4d8",
},
loginButtonHover: {
background: "#00b4d8",
color: "#ffffff",
border: "1px solid rgba(255, 255, 255, 0.2)",
transform: "translateY(-2px)",
boxShadow: "0 8px 20px rgba(0, 0, 0, 0.2)",
},
registerButton: {
background: "#00b4d8",
color: "#ffffff",
boxShadow: "#00b4d8",
},
registerButtonHover: {
background: "#00b4d8",
transform: "translateY(-2px)",
boxShadow: "#00b4d8",
},
mobileToggle: {
display: "none",
background: "rgba(30, 41, 59, 0.6)",
border: "1px solid rgba(255, 255, 255, 0.1)",
borderRadius: "10px",
cursor: "pointer",
padding: "10px",
flexDirection: "column",
gap: "4px",
transition: "all 0.3s ease",
},
mobileToggleHover: {
background: "#00b4d8",
},
hamburger: {
width: "20px",
height: "2px",
background: "#00b4d8",
borderRadius: "1px",
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
transformOrigin: "center",
},
hamburgerActive1: {
transform: "rotate(45deg) translate(5px, 5px)",
background: "#00b4d8",
},
hamburgerActive2: {
opacity: 0,
transform: "scale(0)",
},
hamburgerActive3: {
transform: "rotate(-45deg) translate(5px, -5px)",
background: "#00b4d8",
},
mobileOverlay: {
position: "fixed",
top: "72px",
left: 0,
right: 0,
bottom: 0,
background: "rgba(0, 0, 0, 0.8)",
backdropFilter: "blur(8px)",
zIndex: 999,
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
padding: "20px",
animation: "fadeIn 0.3s ease",
},
mobileContent: {
background: "rgba(15, 23, 42, 0.95)",
backdropFilter: "blur(20px)",
borderRadius: "16px",
border: "1px solid rgba(255, 255, 255, 0.1)",
boxShadow: "0 25px 50px rgba(0, 0, 0, 0.5)",
width: "100%",
maxWidth: "380px",
overflow: "hidden",
animation: "slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
},
mobileHeader: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "20px",
borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
},
mobileTitle: {
fontSize: "18px",
fontWeight: "700",
color: "#ffffff",
margin: 0,
},
mobileCloseButton: {
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "rgba(30, 41, 59, 0.6)",
border: "1px solid rgba(255, 255, 255, 0.1)",
borderRadius: "8px",
cursor: "pointer",
padding: "8px",
color: "#94a3b8",
transition: "all 0.3s ease",
},
mobileCloseButtonHover: {
background: "rgba(30, 41, 59, 0.8)",
color: "#ef4444",
},
mobileButtons: {
padding: "20px",
display: "flex",
flexDirection: "column",
gap: "12px",
},
mobileButton: {
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "10px",
padding: "14px 20px",
background: "rgba(30, 41, 59, 0.6)",
border: "1px solid rgba(255, 255, 255, 0.1)",
borderRadius: "12px",
fontWeight: "600",
fontSize: "15px",
cursor: "pointer",
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
color: "#e2e8f0",
},
mobileButtonHover: {
background: "rgba(30, 41, 59, 0.8)",
border: "1px solid rgba(255, 255, 255, 0.2)",
transform: "translateY(-2px)",
color: "#ffffff",
},
mobileButtonPrimary: {
background: "linear-gradient(135deg, #10b981, #059669)",
color: "#ffffff",
border: "1px solid transparent",
boxShadow: "0 4px 15px rgba(16, 185, 129, 0.3)",
},
mobileButtonPrimaryHover: {
background: "linear-gradient(135deg, #059669, #047857)",
boxShadow: "0 8px 25px rgba(16, 185, 129, 0.4)",
},
welcome: {
display: "flex",
alignItems: "center",
border: "1px solid red",
},
welcomeContent: {
display: "flex",
alignItems: "center",
gap: "10px",
padding: "10px 16px",
background: "rgba(30, 41, 59, 0.6)",
borderRadius: "12px",
border: "1px solid rgba(255, 255, 255, 0.1)",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.2)",
},
welcomeIcon: {
width: "18px",
height: "18px",
color: "#00b4d8",
},
welcomeText: {
color: "#e2e8f0",
fontWeight: "600",
fontSize: "14px",
},
};
const [hoveredElement, setHoveredElement] = useState(null);
return (
<>
<nav style={styles.navbar}>
<div style={styles.container}>
{/* Left Side - Menu & Logo */}
<div style={styles.leftSection}>
<div
style={{
...styles.logo,
...(hoveredElement === "logo" ? styles.logoHover : {}),
}}
onClick={show ? handleHome : undefined}
onMouseEnter={() => setHoveredElement("logo")}
onMouseLeave={() => setHoveredElement(null)}
role={show ? "button" : "img"}
tabIndex={show ? 0 : -1}
aria-label="Company logo"
>
<div style={styles.logoContent} onClick={() => router.push("/")}>
<Image src="/logo.png" height={80} width={140} alt="logo" />
</div>
</div>
{(section || showMenu) && (
<button
style={{
...styles.menuButton,
...(hoveredElement === "menu" ? styles.menuButtonHover : {}),
}}
onClick={() => {
window.scrollTo(0, 0);
setOpenSidebar(!openSidebar);
}}
onMouseEnter={() => setHoveredElement("menu")}
onMouseLeave={() => setHoveredElement(null)}
aria-label="Toggle menu"
>
<Menu style={{ width: "25px", height: "25px" }} />
</button>
)}
</div>
{/* Right Side - Navigation Links */}
{show && (
<>
{/* Desktop Navigation */}
{/* <div style={styles.desktopNav}>
<button
style={{
...styles.navButton,
...styles.loginButton,
...(hoveredElement === "login"
? styles.loginButtonHover
: {}),
}}
onClick={handleLogin}
onMouseEnter={() => setHoveredElement("login")}
onMouseLeave={() => setHoveredElement(null)}
>
<LogIn style={{ width: "16px", height: "16px" }} />
Login
</button>
<button
style={{
...styles.navButton,
...styles.registerButton,
...(hoveredElement === "register"
? styles.registerButtonHover
: {}),
}}
onClick={handleRegister}
onMouseEnter={() => setHoveredElement("register")}
onMouseLeave={() => setHoveredElement(null)}
>
<UserPlus style={{ width: "16px", height: "16px" }} />
Register
</button>
</div> */}
<div className="desktop-nav" style={styles.desktopNav}>
<button
style={{
...styles.navButton,
...styles.loginButton,
...(hoveredElement === "login"
? styles.loginButtonHover
: {}),
}}
onClick={handleLogin}
onMouseEnter={() => setHoveredElement("login")}
onMouseLeave={() => setHoveredElement(null)}
>
<LogIn style={{ width: "16px", height: "16px" }} />
Login
</button>
<button
style={{
...styles.navButton,
...styles.registerButton,
...(hoveredElement === "register"
? styles.registerButtonHover
: {}),
}}
onClick={handleRegister}
onMouseEnter={() => setHoveredElement("register")}
onMouseLeave={() => setHoveredElement(null)}
>
<UserPlus style={{ width: "16px", height: "16px" }} />
Register
</button>
</div>
{/* Mobile Menu Toggle */}
{/* <button
style={{
...styles.mobileToggle,
...(hoveredElement === 'mobile-toggle' ? styles.mobileToggleHover : {}),
display: isMobile ? "flex" : "none",
}}
onClick={toggleMobileMenu}
onMouseEnter={() => setHoveredElement('mobile-toggle')}
onMouseLeave={() => setHoveredElement(null)}
aria-label="Toggle mobile menu"
aria-expanded={isMobileMenuOpen}
>
<span
style={{
...styles.hamburger,
...(isMobileMenuOpen ? styles.hamburgerActive1 : {})
}}
></span>
<span
style={{
...styles.hamburger,
...(isMobileMenuOpen ? styles.hamburgerActive2 : {})
}}
></span>
<span
style={{
...styles.hamburger,
...(isMobileMenuOpen ? styles.hamburgerActive3 : {})
}}
></span>
</button> */}
<button
className="mobile-toggle"
style={{
...styles.mobileToggle,
...(hoveredElement === "mobile-toggle"
? styles.mobileToggleHover
: {}),
}}
onClick={toggleMobileMenu}
onMouseEnter={() => setHoveredElement("mobile-toggle")}
onMouseLeave={() => setHoveredElement(null)}
aria-label="Toggle mobile menu"
aria-expanded={isMobileMenuOpen}
>
<span
style={{
...styles.hamburger,
...(isMobileMenuOpen ? styles.hamburgerActive1 : {}),
}}
/>
<span
style={{
...styles.hamburger,
...(isMobileMenuOpen ? styles.hamburgerActive2 : {}),
}}
/>
<span
style={{
...styles.hamburger,
...(isMobileMenuOpen ? styles.hamburgerActive3 : {}),
}}
/>
</button>
</>
)}
{/* Manager Welcome Message */}
{/* {!show && managerDetails && (
<div style={styles.welcome}>
<div style={styles.welcomeContent}>
<User style={styles.welcomeIcon} />
<span style={styles.welcomeText}>
Welcome, {capitalizeFirstLetter(managerDetails.company_name)}!
</span>
</div>
</div>
)} */}
</div>
</nav>
{/* Mobile Menu Overlay */}
{show && isMobileMenuOpen && (
<div style={styles.mobileOverlay}>
<div style={styles.mobileContent}>
<div style={styles.mobileHeader}>
<h3 style={styles.mobileTitle}>Navigation</h3>
<button
style={{
...styles.mobileCloseButton,
...(hoveredElement === "close"
? styles.mobileCloseButtonHover
: {}),
}}
onClick={() => setIsMobileMenuOpen(false)}
onMouseEnter={() => setHoveredElement("close")}
onMouseLeave={() => setHoveredElement(null)}
aria-label="Close menu"
>
<X style={{ width: "18px", height: "18px" }} />
</button>
</div>
<div style={styles.mobileButtons}>
<button
style={{
...styles.mobileButton,
...(hoveredElement === "mobile-login"
? styles.mobileButtonHover
: {}),
}}
onClick={handleLogin}
onMouseEnter={() => setHoveredElement("mobile-login")}
onMouseLeave={() => setHoveredElement(null)}
>
<LogIn style={{ width: "18px", height: "18px" }} />
Login
</button>
<button
style={{
...styles.mobileButton,
...styles.mobileButtonPrimary,
...(hoveredElement === "mobile-register"
? {
...styles.mobileButtonHover,
...styles.mobileButtonPrimaryHover,
}
: {}),
}}
onClick={handleRegister}
onMouseEnter={() => setHoveredElement("mobile-register")}
onMouseLeave={() => setHoveredElement(null)}
>
<UserPlus style={{ width: "18px", height: "18px" }} />
Register
</button>
</div>
</div>
</div>
)}
{/* Responsive CSS with keyframes */}
<style jsx>{`
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 768px) {
.desktop-nav {
display: none !important;
}
.mobile-toggle {
display: flex !important;
}
.container {
padding: 0 15px !important;
height: 64px !important;
}
.logo-text {
font-size: 20px !important;
}
.left-section {
gap: 12px !important;
}
.mobile-overlay {
top: 64px !important;
padding: 15px !important;
}
}
@media (max-width: 480px) {
.container {
padding: 0 10px !important;
}
.welcome-content {
padding: 8px 12px !important;
}
.welcome-text {
font-size: 12px !important;
}
.logo-text {
display: none !important;
}
.mobile-content {
width: 95% !important;
}
.mobile-overlay {
padding: 10px !important;
}
}
`}</style>
</>
);
}
export default MobileNavbar;
Editor is loading...
Leave a Comment