added

components/header/Navbar.jsx

@@ -1,38 +1,42 @@
-"use client"
+"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"
+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()
+  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)
+    setIsMounted(true);
     const handleScroll = () => {
-      setIsScrolled(window.scrollY > 60)
-    }
+      setIsScrolled(window.scrollY > 60);
+    };
 
-    window.addEventListener("scroll", handleScroll)
-    return () => window.removeEventListener("scroll", handleScroll)
-  }, [])
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
 
   if (!isMounted) {
-    return null // or a loading placeholder
+    return null; // or a loading placeholder
   }
 
   return (
@@ -42,10 +46,20 @@ const Navbar = () => {
           <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} />}
+                {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" />
+                <Image
+                  src="/logo1.jpg"
+                  alt="Logo"
+                  width={56}
+                  height={56}
+                  className="object-contain"
+                />
               </Link>
             </div>
 
@@ -66,9 +80,9 @@ const Navbar = () => {
             <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"}`} />
+                <ShoppingBag size={20} className={`cursor-pointer `} />
               </Link>
-              <div className={`cursor-pointer ${isScrolled ? "block" : "hidden"}`}>
+              <div className={`cursor-pointer `}>
                 {token ? (
                   <Link href="/accounts/profile">
                     <UserRound size={20} />
@@ -103,12 +117,15 @@ const Navbar = () => {
         )}
       </header>
 
-      <FullWidthMenu isOpen={isOpen} onClose={toggleMenu} isScrolled={isScrolled} />
+      <FullWidthMenu
+        isOpen={isOpen}
+        onClose={toggleMenu}
+        isScrolled={isScrolled}
+      />
 
       <div className="h-[104px] sm:h-[150px]"></div>
     </>
-  )
-}
-
-export default Navbar
+  );
+};
 
+export default Navbar;