refactor: resolve navbar resposiveness issue

components/header/Navbar.jsx

@@ -1,32 +1,27 @@
 "use client";
 
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState, useEffect } from "react";
+import Link from "next/link";
 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 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";
-import Image from "next/image";
 
 const Navbar = () => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
+  const { category } = useContext(ProductContext);
   const { token } = useContext(MainContext);
-  const toggleMenu = () => setIsOpen(!isOpen);
   const { selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES } =
     useCurrency();
 
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+
   useEffect(() => {
-    setIsMounted(true);
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 60);
     };
@@ -35,95 +30,163 @@ const Navbar = () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  if (!isMounted) {
-    return null; // or a loading placeholder
-  }
+  const categoryItems = category
+    ? category.map((category) => ({
+        label: category.category_name,
+        url: `/collections/${category.id}`,
+      }))
+    : []; // 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 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}
+      <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">
+            <button onClick={toggleSidebar} className="z-50">
+              {isSidebarOpen ? (
+                <IoMdClose size={28} />
+              ) : (
+                <Menu size={28} strokeWidth={1} />
+              )}
+            </button>
+            <Link href="/">
+              <Image
+                src="/logo1.jpg"
+                alt="Logo"
+                width={56}
+                height={56}
+                className="object-contain"
               />
-            </div>
+            </Link>
           </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 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>
+
+        <div className="py-2 ">
+          <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>
 
-      <FullWidthMenu
-        isOpen={isOpen}
-        onClose={toggleMenu}
-        isScrolled={isScrolled}
-      />
+      {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="h-[104px] sm:h-[150px]"></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-[120px]"></div>
     </>
   );
 };