feat: Implement dynamic rendering of menu items

refactor: Use destructured import for menu data
style: Update mega menu layout and styles
fix: Display new arrival products in mega menu
chore: Remove commented code for home menu items
docs: Add comments to explain menu component behavior

src/layout/headers/header-com/menus.jsx

@@ -0,0 +1,120 @@
+import React from "react";
+import menu_data from "@/data/menu-data";
+import Link from "next/link";
+import Image from "next/image";
+import OfferCouponArea from "@/components/offerHeader/OfferCouponArea";
+import { useGetProductTypeQuery } from "@/redux/features/productApi";
+import { HomeNewArrivalPrdLoader } from "@/components/loader";
+import ErrorMsg from "@/components/common/error-msg";
+import ProductItem from "@/components/products/electronics/product-item";
+
+const Menus = () => {
+  const { data: products, isError, isLoading } = useGetProductTypeQuery({
+    type: 'electronics',
+    query: 'new=true'
+  });
+
+  // decide what to render
+  let content = null;
+
+  if (isLoading) {
+    content = (
+      <HomeNewArrivalPrdLoader loading={isLoading} />
+    );
+  }
+
+  if (!isLoading && isError) {
+    content = <ErrorMsg msg="There was an error" />;
+  }
+
+  if (!isLoading && !isError && products?.data?.length === 0) {
+    content = <ErrorMsg msg="No Products found!" />;
+  }
+
+  if (!isLoading && !isError && products?.data?.length > 0) {
+    const product_items = products.data;
+
+    content = (
+      <div className="row">
+        {product_items.slice(0, 4).map((item) => (
+          <div key={item._id} className="col-md-3">
+            <ProductItem product={item} />
+          </div>
+        ))}
+      </div>
+    );
+  } else {
+    // If there are no products or an error occurs, set content to an empty array
+    content = [];
+  }
+  return (
+    <ul>
+      {menu_data.map((menu) =>
+        menu.homes ? (
+          <li key={menu.id} className="has-dropdown has-mega-menu">
+            <Link href={menu.link}>{menu.title}</Link>
+            <div className="home-menu tp-submenu tp-mega-menu">
+            <div className="tp-product-arrival-slider fix">
+    {content}
+  </div>
+                {/* <OfferCouponArea/> */}
+              <div className="row row-cols-1 row-cols-lg-4 row-cols-xl-4">
+                {menu.home_pages.map((home, i) => (
+                  <div key={i} className="col">
+                    <div className="home-menu-item">
+                      {/* <Link href={home.link}>
+                        <div className="home-menu-thumb p-relative fix">
+                          <Image src={home.img} alt="home img" />
+                        </div>
+                        <div className="home-menu-content">
+                          <h5 className="home-menu-title">{home.title}</h5>
+                        </div>
+                      </Link> */}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </li>
+        ) : menu.products ? (
+          <li key={menu.id} className="has-dropdown has-mega-menu ">
+            <Link href={menu.link}>{menu.title}</Link>
+            <ul className="tp-submenu tp-mega-menu mega-menu-style-2">
+              {menu.product_pages.map((p, i) => (
+                <li key={i} className="has-dropdown">
+                  <Link href={p.link} className="mega-menu-title">
+                    {p.title}
+                  </Link>
+                  <ul className="tp-submenu">
+                    {p.mega_menus.map((m, i) => (
+                      <li key={i}>
+                        <Link href={m.link}>{m.title}</Link>
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ) : menu.sub_menu ? (
+          <li key={menu.id} className="has-dropdown">
+            <Link href={menu.link}>{menu.title}</Link>
+            <ul className="tp-submenu">
+              {menu.sub_menus.map((b, i) => (
+                <li key={i}>
+                  <Link href={b.link}>{b.title}</Link>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ) : (
+          <li key={menu.id}>
+            <Link href={menu.link}>{menu.title}</Link>
+          </li>
+        )
+      )}
+    </ul>
+  );
+};
+
+export default Menus;