275 lines
9.0 KiB
JavaScript
275 lines
9.0 KiB
JavaScript
"use client";
|
|
|
|
import React, { useContext, useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { Menu, ShoppingBag, UserRound } from "lucide-react";
|
|
import authAxios, { backendUrl } from "@/utils/axios";
|
|
import { IoMdClose } from "react-icons/io";
|
|
import Image from "next/image";
|
|
import SearchComponent from "../search/searchComponent";
|
|
import ProductContext from "@/app/contexts/productContext";
|
|
import MainContext from "@/app/contexts/mainContext";
|
|
import { useCurrency } from "@/app/contexts/currencyContext";
|
|
import CurrencySelect from "../dynamic-navbar/currencySelect";
|
|
|
|
const Navbar = () => {
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const { category } = useContext(ProductContext);
|
|
const { token, user } = useContext(MainContext);
|
|
const [cartItemCount, setCartItemCount] = useState(0);
|
|
const {
|
|
selectedCurrency,
|
|
setSelectedCurrency,
|
|
SUPPORTED_CURRENCIES,
|
|
error,
|
|
setUserCountry,
|
|
userCountry,
|
|
} = useCurrency();
|
|
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const isMobile = window.innerWidth < 768;
|
|
|
|
setIsScrolled(isMobile || window.scrollY > 60);
|
|
};
|
|
|
|
handleScroll();
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
window.addEventListener("resize", handleScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
window.removeEventListener("resize", handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
// Set user's country from profile if available
|
|
useEffect(() => {
|
|
if (user && user.country && !userCountry) {
|
|
setUserCountry(user.country);
|
|
}
|
|
}, [user, setUserCountry, userCountry]);
|
|
|
|
const getCart = async () => {
|
|
try {
|
|
const response = await authAxios.get("/orders/cart/");
|
|
const cartData = response.data;
|
|
|
|
// Calculate total items in cart
|
|
if (cartData && cartData.length > 0 && cartData[0].items) {
|
|
const totalItems = cartData[0].items.reduce(
|
|
(sum, item) => sum + item.quantity,
|
|
0
|
|
);
|
|
setCartItemCount(totalItems);
|
|
} else {
|
|
setCartItemCount(0);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching cart:", error);
|
|
setCartItemCount(0);
|
|
}
|
|
};
|
|
|
|
// Fetch cart data when component mounts and when token changes
|
|
useEffect(() => {
|
|
if (token) {
|
|
getCart();
|
|
} else {
|
|
setCartItemCount(0);
|
|
}
|
|
}, [token]);
|
|
|
|
// Set up an interval to periodically check for cart updates
|
|
useEffect(() => {
|
|
if (token) {
|
|
// Initial fetch
|
|
getCart();
|
|
|
|
// Set up interval to check for updates every 3 seconds
|
|
const intervalId = setInterval(getCart, 3000);
|
|
|
|
// Clean up interval on component unmount
|
|
return () => clearInterval(intervalId);
|
|
}
|
|
}, [token]);
|
|
|
|
const categoryItems = category
|
|
? category.map((category) => ({
|
|
label: category.category_name,
|
|
url: `/category/${category.category_name}`,
|
|
}))
|
|
: []; // Fallback to an empty array if category is undefined
|
|
|
|
const consultation = {
|
|
label: "Rudraksha consultation",
|
|
url: "/products/premium-rudraksha-consultation-astrology",
|
|
};
|
|
|
|
const visibleItems = [...categoryItems.slice(0, 4), consultation];
|
|
|
|
return (
|
|
<>
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-white shadow-md">
|
|
<div className="container mx-auto flex justify-between items-center px-4 py-2">
|
|
<div className="flex items-center md:space-x-4">
|
|
<button onClick={toggleSidebar} className="z-50">
|
|
{!mounted ? null : isSidebarOpen ? (
|
|
<IoMdClose size={28} />
|
|
) : (
|
|
<Menu size={28} strokeWidth={1} />
|
|
)}
|
|
</button>
|
|
|
|
<Link href="/">
|
|
<Image
|
|
src="/logo1.jpg"
|
|
alt="Logo"
|
|
width={60}
|
|
height={60}
|
|
className="!max-w-[60px]"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<SearchComponent isScrolled={isScrolled} />
|
|
<Link href="/pages/shopping-cart" className="relative">
|
|
<ShoppingBag size={20} className="cursor-pointer" />
|
|
<span className="absolute -top-2 -right-2 bg-red-600 font-bold text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
|
|
{cartItemCount}
|
|
</span>
|
|
</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}
|
|
error={error}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-4 border-t">
|
|
<div className="container mx-auto flex justify-center items-center">
|
|
<div className="flex space-x-4">
|
|
{visibleItems.map((item) => (
|
|
<Link
|
|
key={item.label}
|
|
href={item.url}
|
|
className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
|
|
>
|
|
More
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{isSidebarOpen && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 z-40">
|
|
<div className="fixed top-0 left-0 w-full h-full bg-white shadow-lg z-50 pt-32">
|
|
<div className="p-4 h-full w-full md:w-1/2">
|
|
<div
|
|
style={{ justifyContent: "start" }}
|
|
className="flex md:items-start md:!justify-between h-full flex-col flex-col-reverse md:flex-row"
|
|
>
|
|
<div className="mb-6 border-t md:border-0">
|
|
<h2 className="text-lg font-semibold mb-4">Quick Links</h2>
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<Link
|
|
href="/products/premium-rudraksha-consultation-astrology"
|
|
onClick={toggleSidebar}
|
|
className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
|
|
>
|
|
Get a Consultation
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/pages/certification-and-guarantee"
|
|
onClick={toggleSidebar}
|
|
className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
|
|
>
|
|
Certification and Guarantee
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/pages/contact-us"
|
|
onClick={toggleSidebar}
|
|
className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
|
|
>
|
|
Contact Us
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/blogs/blog"
|
|
onClick={toggleSidebar}
|
|
className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
|
|
>
|
|
Blogs
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="mb-6 md:mb-0">
|
|
<h2 className="text-lg font-semibold mb-4">Categories</h2>
|
|
<ul className="space-y-2">
|
|
{categoryItems.map((item) => (
|
|
<li key={item.label}>
|
|
<Link
|
|
href={item.url}
|
|
onClick={toggleSidebar}
|
|
className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="h-[130px]"></div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|