refactor: resolve navbar resposiveness issue

app/contexts/mainContext.js

@@ -27,7 +27,7 @@ export const ContextProvider = ({ children }) => {
             console.log("Login Successful:", response.data);
             setToken(response.data.token)
             localStorage.setItem('token', response.data.token)
-            toast.success('Otp Sent Successfully');
+            toast.success('Login Successful');
             router.push('/')
 
             return response.data

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 Image from "next/image";
-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 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,24 +30,34 @@ const Navbar = () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  if (!isMounted) {
+  const categoryItems = category
-    return null; // or a loading placeholder
+    ? 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" : ""}`}>
+      <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">
+        <div className="container mx-auto flex justify-between items-center p-4">
-            <div className="flex items-center">
+          <div className="flex items-center space-x-4">
-              <button onClick={toggleMenu} className="z-50">
+            <button onClick={toggleSidebar} className="z-50">
-                {isOpen ? (
+              {isSidebarOpen ? (
-                  <IoMdClose size={44} />
+                <IoMdClose size={28} />
               ) : (
-                  <Menu size={44} strokeWidth={1} />
+                <Menu size={28} strokeWidth={1} />
               )}
             </button>
-              <Link href={"/"} className="flex items-center space-x-2">
+            <Link href="/">
               <Image
                 src="/logo1.jpg"
                 alt="Logo"
@@ -63,26 +68,12 @@ const Navbar = () => {
             </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 `} />
+              <ShoppingBag size={20} className="cursor-pointer" />
             </Link>
-              <div className={`cursor-pointer `}>
+            <div className="cursor-pointer">
               {token ? (
                 <Link href="/accounts/profile">
                   <UserRound size={20} />
@@ -102,28 +93,100 @@ const Navbar = () => {
             />
           </div>
         </div>
-        </nav>
 
-        {!isOpen && (
+        <div className="py-2 ">
-          <div
+          <div className="container mx-auto flex justify-center items-center">
-            className={`sm:block hidden bg-white p-2 transition-all duration-300 ${
+            <div className="flex space-x-4">
-              isScrolled ? "opacity-0 h-0 overflow-hidden" : "opacity-100"
+              {visibleItems.map((item) => (
-            }`}
+                <Link
+                  key={item.label}
+                  href={item.url}
+                  className="text-sm font-medium hover:text-[#AC8C6B] transition-colors"
                 >
-            <div className="container mx-auto flex justify-center items-center space-x-16">
+                  {item.label}
-              <DynamicNavbar toggleMenu={toggleMenu} />
+                </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>
       )}
-      </header>
 
-      <FullWidthMenu
+      <div className="h-[120px]"></div>
-        isOpen={isOpen}
-        onClose={toggleMenu}
-        isScrolled={isScrolled}
-      />
-
-      <div className="h-[104px] sm:h-[150px]"></div>
     </>
   );
 };