refactor: improvements in UI and book consultion option
- Login is not responsive - Add country field in book consultant any country - correct form submit of book consultant in mobile view - updatr email in privacy page - make home page slider responsive - redirect login whentokenexpired
This commit is contained in:
@@ -18,30 +18,42 @@ const Navbar = () => {
|
||||
const { category } = useContext(ProductContext);
|
||||
const { token } = useContext(MainContext);
|
||||
const [cartItemCount, setCartItemCount] = useState(0);
|
||||
const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } =
|
||||
const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES, error } =
|
||||
useCurrency();
|
||||
|
||||
const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 60);
|
||||
const isMobile = window.innerWidth < 768;
|
||||
|
||||
setIsScrolled(isMobile || window.scrollY > 60);
|
||||
};
|
||||
|
||||
handleScroll();
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
window.addEventListener("resize", handleScroll);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
window.removeEventListener("resize", handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const getCart = async () => {
|
||||
try {
|
||||
const response = await authAxios.get("/orders/cart/");
|
||||
const cartData = response.data;
|
||||
console.log(cartData)
|
||||
console.log(cartData.length)
|
||||
|
||||
console.log(cartData);
|
||||
console.log(cartData.length);
|
||||
|
||||
// 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);
|
||||
const totalItems = cartData[0].items.reduce(
|
||||
(sum, item) => sum + item.quantity,
|
||||
0
|
||||
);
|
||||
setCartItemCount(totalItems);
|
||||
} else {
|
||||
setCartItemCount(0);
|
||||
@@ -66,10 +78,10 @@ const Navbar = () => {
|
||||
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);
|
||||
}
|
||||
@@ -91,10 +103,9 @@ const Navbar = () => {
|
||||
|
||||
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 p-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center md:space-x-4">
|
||||
<button onClick={toggleSidebar} className="z-50">
|
||||
{isSidebarOpen ? (
|
||||
<IoMdClose size={28} />
|
||||
@@ -106,9 +117,9 @@ const Navbar = () => {
|
||||
<Image
|
||||
src="/logo1.jpg"
|
||||
alt="Logo"
|
||||
width={56}
|
||||
height={56}
|
||||
className="object-contain"
|
||||
width={60}
|
||||
height={60}
|
||||
className="!max-w-[60px]"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -117,9 +128,9 @@ const Navbar = () => {
|
||||
<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>
|
||||
<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 ? (
|
||||
@@ -138,6 +149,7 @@ const Navbar = () => {
|
||||
selectedCurrency={selectedCurrency}
|
||||
setSelectedCurrency={setSelectedCurrency}
|
||||
SUPPORTED_CURRENCIES={SUPPORTED_CURRENCIES}
|
||||
error={error}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -169,65 +181,68 @@ const Navbar = () => {
|
||||
<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}>
|
||||
<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={item.url}
|
||||
href="/products/premium-rudraksha-consultation-astrology"
|
||||
onClick={toggleSidebar}
|
||||
className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
Get a Consultation
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user