115 lines
4.2 KiB
JavaScript
115 lines
4.2 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 ${isScrolled ? "block" : "hidden"}`} />
|
|
</Link>
|
|
<div className={`cursor-pointer ${isScrolled ? "block" : "hidden"}`}>
|
|
{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
|
|
|