132 lines
4.4 KiB
JavaScript
132 lines
4.4 KiB
JavaScript
"use client";
|
|
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
import { Menu, ShoppingBag, UserRound } from "lucide-react";
|
|
import { IoMdClose } from "react-icons/io";
|
|
import Link from "next/link";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuList,
|
|
} from "@/components/ui/navigation-menu";
|
|
import FullWidthMenu from "./FullWidthMenu";
|
|
import MainContext from "@/app/contexts/mainContext";
|
|
import DynamicNavbar from "../dynamic-navbar/dynamicNavbar";
|
|
import SearchComponent from "../search/searchComponent";
|
|
import { useCurrency } from "@/app/contexts/currencyContext";
|
|
import CurrencySelect from "../dynamic-navbar/currencySelect";
|
|
import Image from "next/image";
|
|
|
|
const Navbar = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
const { token } = useContext(MainContext);
|
|
const toggleMenu = () => setIsOpen(!isOpen);
|
|
const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } =
|
|
useCurrency();
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 60);
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
if (!isMounted) {
|
|
return null; // or a loading placeholder
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<header className="fixed top-0 left-0 right-0 z-50 transition-all duration-200">
|
|
<nav className={`bg-white p-4 ${isScrolled ? "shadow-lg" : ""}`}>
|
|
<div className="container mx-auto flex justify-between items-center">
|
|
<div className="flex items-center">
|
|
<button onClick={toggleMenu} className="z-50">
|
|
{isOpen ? (
|
|
<IoMdClose size={44} />
|
|
) : (
|
|
<Menu size={44} strokeWidth={1} />
|
|
)}
|
|
</button>
|
|
<Link href={"/"} className="flex items-center space-x-2">
|
|
<Image
|
|
src="/logo1.jpg"
|
|
alt="Logo"
|
|
width={56}
|
|
height={56}
|
|
className="object-contain"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
{!isOpen && (
|
|
<div
|
|
className={`hidden lg:flex items-center w-1/2 space-x-9 capitalize text-xl ${
|
|
isScrolled ? "opacity-100" : "opacity-0"
|
|
} transition-opacity duration-200`}
|
|
>
|
|
<NavigationMenu className="text-xl">
|
|
<NavigationMenuList className="text-2xl">
|
|
<DynamicNavbar toggleMenu={toggleMenu} />
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<SearchComponent isScrolled={isScrolled} />
|
|
<Link href="/pages/shopping-cart">
|
|
<ShoppingBag size={20} className={`cursor-pointer `} />
|
|
</Link>
|
|
<div className={`cursor-pointer `}>
|
|
{token ? (
|
|
<Link href="/accounts/profile">
|
|
<UserRound size={20} />
|
|
</Link>
|
|
) : (
|
|
<Link href="/accounts/login">
|
|
<button className="bg-[#c19a5b] text-white px-3 py-1 rounded hover:bg-[#b48943] text-sm">
|
|
Login
|
|
</button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<CurrencySelect
|
|
selectedCurrency={selectedCurrency}
|
|
setSelectedCurrency={setSelectedCurrency}
|
|
SUPPORTED_CURRENCIES={SUPPORTED_CURRENCIES}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{!isOpen && (
|
|
<div
|
|
className={`sm:block hidden bg-white p-2 transition-all duration-300 ${
|
|
isScrolled ? "opacity-0 h-0 overflow-hidden" : "opacity-100"
|
|
}`}
|
|
>
|
|
<div className="container mx-auto flex justify-center items-center space-x-16">
|
|
<DynamicNavbar toggleMenu={toggleMenu} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</header>
|
|
|
|
<FullWidthMenu
|
|
isOpen={isOpen}
|
|
onClose={toggleMenu}
|
|
isScrolled={isScrolled}
|
|
/>
|
|
|
|
<div className="h-[104px] sm:h-[150px]"></div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|