category , subcategory, product url changes

components/header/Navbar.jsx

@@ -18,15 +18,20 @@ const Navbar = () => {
   const { category } = useContext(ProductContext);
   const { token, user } = useContext(MainContext);
   const [cartItemCount, setCartItemCount] = useState(0);
-  const { 
-    selectedCurrency, 
-    setSelectedCurrency, 
-    SUPPORTED_CURRENCIES, 
+  const {
+    selectedCurrency,
+    setSelectedCurrency,
+    SUPPORTED_CURRENCIES,
     error,
     setUserCountry,
-    userCountry
+    userCountry,
   } = useCurrency();
 
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
 
   useEffect(() => {
@@ -101,7 +106,7 @@ const Navbar = () => {
   const categoryItems = category
     ? category.map((category) => ({
         label: category.category_name,
-        url: `/category/${category.id}`,
+        url: `/category/${category.category_name}`,
       }))
     : []; // Fallback to an empty array if category is undefined
 
@@ -118,12 +123,13 @@ const Navbar = () => {
         <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">
-              {isSidebarOpen ? (
+              {!mounted ? null : isSidebarOpen ? (
                 <IoMdClose size={28} />
               ) : (
                 <Menu size={28} strokeWidth={1} />
               )}
             </button>
+
             <Link href="/">
               <Image
                 src="/logo1.jpg"