nav
This commit is contained in:
@ -8,6 +8,7 @@ const Navbar = () => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [activeSection, setActiveSection] = useState("home");
|
||||
const [isDarkMode, setIsDarkMode] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
@ -20,6 +21,16 @@ const Navbar = () => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// small scroll listener to add background/shadow after scrolling a bit
|
||||
useEffect(() => {
|
||||
const onScroll = () => {
|
||||
setScrolled(window.scrollY > 10);
|
||||
};
|
||||
onScroll();
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
@ -85,37 +96,40 @@ const Navbar = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="fixed top-6 left-0 right-0 z-50 pointer-events-auto">
|
||||
<div className="max-w-screen-xl mx-auto px-4">
|
||||
{/* grid: spacer | centered nav | controls */}
|
||||
<nav
|
||||
className={`fixed top-0 left-0 right-0 w-full z-50 pointer-events-auto transition-all duration-300 ${
|
||||
scrolled ? "backdrop-blur-sm bg-white/70 dark:bg-gray-900/70 shadow-md" : "bg-transparent"
|
||||
}`}
|
||||
aria-label="Primary"
|
||||
>
|
||||
{/* container with comfortable vertical padding to avoid overlapping page content */}
|
||||
<div className="max-w-screen-xl mx-auto px-4 py-3">
|
||||
{/* grid: left spacer | center nav | right controls */}
|
||||
<div className="grid grid-cols-3 items-center">
|
||||
{/* left: spacer (removed TPS image as requested) */}
|
||||
{/* left spacer */}
|
||||
<div className="flex items-center">
|
||||
<div style={{ width: 44 }} />
|
||||
</div>
|
||||
|
||||
{/* center: 3D nav card */}
|
||||
{/* center: stretch nav */}
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className="hidden md:flex items-center nav-center"
|
||||
style={{ perspective: "1000px" }}
|
||||
>
|
||||
<div className="nav-card bg-gradient-to-r from-white/90 to-gray-100/60 dark:from-gray-800/75 dark:to-gray-900/70 backdrop-blur-sm rounded-2xl px-5 py-3 shadow-2xl">
|
||||
<ul className="flex items-center space-x-6 rtl:space-x-reverse">
|
||||
<div className="w-full">
|
||||
<div className="hidden md:flex items-center w-full">
|
||||
<ul className="flex items-center justify-between w-full px-3">
|
||||
{navItems.map((item) => (
|
||||
<li key={item.key}>
|
||||
<li key={item.key} className="flex-1">
|
||||
<Link
|
||||
to={item.key}
|
||||
smooth
|
||||
duration={500}
|
||||
spy={true}
|
||||
offset={-70}
|
||||
offset={-80}
|
||||
onSetActive={() => setActiveSection(item.key)}
|
||||
onClick={() => {
|
||||
setActiveSection(item.key);
|
||||
setMenuOpen(false);
|
||||
}}
|
||||
className={`nav-item relative inline-flex items-center text-base md:text-lg font-semibold px-6 py-3 rounded-full transition-all duration-300 focus:outline-none select-none
|
||||
className={`nav-item relative inline-flex w-full justify-center text-base md:text-lg font-semibold py-3 rounded-full transition-all duration-300 focus:outline-none select-none
|
||||
${
|
||||
activeSection === item.key
|
||||
? "text-yellow-500"
|
||||
@ -125,52 +139,94 @@ const Navbar = () => {
|
||||
role="link"
|
||||
aria-current={activeSection === item.key ? "page" : undefined}
|
||||
>
|
||||
{/* glow layer */}
|
||||
<span className="nav-item-glow" aria-hidden="true" />
|
||||
|
||||
<span className="relative z-10">{item.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* mobile compact center (if needed) */}
|
||||
<div className="md:hidden flex justify-center">
|
||||
<div className="flex items-center gap-3 rtl:gap-x-reverse">
|
||||
{navItems.slice(0, 3).map((item) => (
|
||||
<Link
|
||||
key={item.key}
|
||||
to={item.key}
|
||||
smooth
|
||||
duration={500}
|
||||
spy={true}
|
||||
offset={-70}
|
||||
onSetActive={() => setActiveSection(item.key)}
|
||||
onClick={() => {
|
||||
setActiveSection(item.key);
|
||||
setMenuOpen(false);
|
||||
}}
|
||||
className={`nav-item relative inline-flex items-center text-sm font-semibold px-4 py-2 rounded-full transition-all duration-300
|
||||
${
|
||||
activeSection === item.key
|
||||
? "text-yellow-500"
|
||||
: "text-gray-800 dark:text-white"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<span className="nav-item-glow" aria-hidden="true" />
|
||||
<span className="relative z-10">{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* right: controls (dark mode, language toggle, mobile) */}
|
||||
{/* right: controls */}
|
||||
<div className="flex justify-end items-center space-x-2 rtl:space-x-reverse">
|
||||
{/* Dark mode - refined icon with subtle motion */}
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
type="button"
|
||||
className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
|
||||
className="group inline-flex items-center p-2 w-12 h-12 justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||
aria-pressed={isDarkMode}
|
||||
aria-label={isDarkMode ? "Light Mode" : "Dark Mode"}
|
||||
title={isDarkMode ? "Light Mode" : "Dark Mode"}
|
||||
>
|
||||
{isDarkMode ? (
|
||||
<svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>
|
||||
)}
|
||||
<svg
|
||||
className="w-6 h-6 transform transition-transform duration-350"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{/* Moon shape (when light) */}
|
||||
<path
|
||||
d="M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z"
|
||||
fill="currentColor"
|
||||
style={{ opacity: isDarkMode ? 0 : 1, transition: "opacity 220ms" }}
|
||||
/>
|
||||
{/* Sun: center circle + rays (when dark) */}
|
||||
<g style={{ opacity: isDarkMode ? 1 : 0, transition: "opacity 220ms" }} fill="currentColor">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M12 2v1M12 21v1M4.2 4.2l.7.7M19.1 19.1l.7.7M1 12h1M22 12h1M4.2 19.8l.7-.7M19.1 4.9l.7-.7" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Language toggle (only EN / AR) with a globe + letters icon */}
|
||||
{/* Language toggle - professional globe + pill */}
|
||||
<button
|
||||
onClick={toggleLang}
|
||||
type="button"
|
||||
className="inline-flex items-center px-3 py-2 rounded-lg border border-transparent hover:border-gray-200 dark:hover:border-gray-700 transition-all duration-200 text-sm font-medium"
|
||||
className="inline-flex items-center px-3 py-2 rounded-lg border border-transparent hover:border-gray-200 dark:hover:border-gray-700 transition-all duration-300 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||
aria-label="Toggle language"
|
||||
title={i18n.language === "ar" ? "العربية" : "English"}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5" />
|
||||
<path d="M2 12h20M12 2v20M4.5 6.5c3 2.5 6 2.5 15 0" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<span className="text-sm font-semibold">{i18n.language === "ar" ? "ع" : "EN"}</span>
|
||||
<svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.5" />
|
||||
<path d="M2 12h20M12 2v20" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span className="inline-flex items-center justify-center w-9 h-6 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">
|
||||
{i18n.language === "ar" ? "ع" : "EN"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@ -178,20 +234,20 @@ const Navbar = () => {
|
||||
<button
|
||||
onClick={toggleMenu}
|
||||
type="button"
|
||||
className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
|
||||
className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg className="w-6 h-6" viewBox="0 0 17 14" fill="none">
|
||||
<svg className="w-6 h-6" viewBox="0 0 17 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu (centered items in column) */}
|
||||
<div className={`${menuOpen ? "block" : "hidden"} md:hidden mt-3 bg-white/90 dark:bg-gray-900/80 backdrop-blur-sm rounded-lg p-3`}>
|
||||
{/* Mobile menu */}
|
||||
<div className={`${menuOpen ? "block" : "hidden"} md:hidden mt-3 bg-white/95 dark:bg-gray-900/85 backdrop-blur-sm rounded-lg p-3`}>
|
||||
<ul className="flex flex-col items-center space-y-3">
|
||||
{navItems.map((item) => (
|
||||
<li key={item.key} className="w-full">
|
||||
@ -200,7 +256,7 @@ const Navbar = () => {
|
||||
smooth
|
||||
duration={500}
|
||||
spy={true}
|
||||
offset={-70}
|
||||
offset={-80}
|
||||
onSetActive={() => setActiveSection(item.key)}
|
||||
onClick={() => {
|
||||
setActiveSection(item.key);
|
||||
@ -222,32 +278,22 @@ const Navbar = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* inline CSS for 3D / hover visual polish */}
|
||||
{/* inline CSS for polish */}
|
||||
<style>{`
|
||||
.nav-center { perspective: 1000px; }
|
||||
.nav-card { transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(.2,.9,.3,1), box-shadow 0.35s; }
|
||||
.nav-item { transform-style: preserve-3d; transition: transform 0.28s, box-shadow 0.28s, color 0.2s; position: relative; }
|
||||
.nav-item:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 20px 34px rgba(2,6,23,0.14); }
|
||||
.nav-item:active { transform: translateY(-4px) scale(1.03); }
|
||||
.nav-item-glow { position: absolute; inset: -8px; border-radius: 9999px; filter: blur(14px); opacity:0; transition: opacity 0.35s, transform 0.35s; pointer-events:none; z-index:0; }
|
||||
.nav-item .relative { z-index: 10; }
|
||||
.nav-item-glow { background: radial-gradient(circle at 50% 40%, rgba(250,204,21,0.14), transparent 30%); transform: scale(0.98); }
|
||||
.nav-item:hover .nav-item-glow { opacity:0.9; transform: scale(1.03); }
|
||||
|
||||
/* IMPORTANT: active (aria-current) NO longer elevates - only color change and subtle underline */
|
||||
.nav-item[aria-current="page"] { transform: none !important; box-shadow: none !important; }
|
||||
/* core nav item polish */
|
||||
.nav-item { transform-style: preserve-3d; transition: transform 0.28s, box-shadow 0.28s, color 0.2s; position: relative; display: inline-flex; }
|
||||
.nav-item:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 30px rgba(2,6,23,0.10); }
|
||||
.nav-item:active { transform: translateY(-3px) scale(1.02); }
|
||||
.nav-item-glow { position: absolute; inset: -6px; border-radius: 9999px; filter: blur(12px); opacity:0; transition: opacity 0.28s, transform 0.28s; pointer-events:none; z-index:0; background: radial-gradient(circle at 50% 40%, rgba(250,204,21,0.12), transparent 30%); transform: scale(0.98); }
|
||||
.nav-item:hover .nav-item-glow { opacity:0.9; transform: scale(1.02); }
|
||||
.nav-item[aria-current="page"]::after { content: ""; position: absolute; height: 3px; left: 18%; right: 18%; bottom: -6px; border-radius: 9999px; background: linear-gradient(90deg, rgba(250,204,21,0.95), rgba(250,200,40,0.9)); opacity: 1; }
|
||||
|
||||
/* ensure text doesn't wrap */
|
||||
.nav-item span { white-space: nowrap; }
|
||||
|
||||
/* small accessibility tweak: focus visible style */
|
||||
/* focus for accessibility */
|
||||
.nav-item:focus-visible { outline: 3px solid rgba(99,102,241,0.12); outline-offset: 4px; }
|
||||
|
||||
/* mobile: slightly larger tappable targets */
|
||||
@media (max-width: 767px) {
|
||||
.nav-item { padding-left: 1rem; padding-right: 1rem; }
|
||||
}
|
||||
/* reduce nav height overlap: ensure page content doesn't hide under nav (optional note) */
|
||||
/* If you want, add: body { padding-top: 68px; } in global css so page content starts below navbar. */
|
||||
`}</style>
|
||||
</nav>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user