updated header nav

components/Layout/Header.js

@@ -17,8 +17,9 @@ import Image from "next/image";
 import { SubMenu } from "./SubMenu";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchHeader } from "@/redux/slices/headerSlice";
-import { collectionsData } from "@/components/data/collectionsData";
 import { brandsData } from "@/components/data/brandsData";
+import { getCollectionPageData } from "@/services/collectionApi";
+import { cleanImage } from "../services/imageHandling";
 // const collectionsMenu = [
 //   {
 //     key: "kitchens",
@@ -126,7 +127,8 @@ import { brandsData } from "@/components/data/brandsData";
 //   },
 // ];
 
-export default function Navigation() {
+export default function Navigation({collectionsData = []}) {
+  console.log("Navigation", collectionsData)
   const [scrolled, setScrolled] = useState(false);
   const [show, setShow] = useState(false);
   const [activeMenu, setActiveMenu] = useState(null);
@@ -134,10 +136,15 @@ export default function Navigation() {
   // const [level1, setLevel1] = useState(collectionsMenu[0] ?? null);
   // const [level2, setLevel2] = useState(collectionsMenu[0]?.subCategories[0] ?? null);
   // COLLECTION
-  const [collectionL1, setCollectionL1] = useState(collectionsData[0]);
-  const [collectionL2, setCollectionL2] = useState(
-    collectionsData[0].subCategories[0],
-  );
+  // const [collectionL1, setCollectionL1] = useState(collectionsData[0]);
+  // const [collectionL2, setCollectionL2] = useState(
+  //   collectionsData[0].subCategories[0],
+  // );
+  const [collectionL1, setCollectionL1] = useState(collectionsData?.[0] ?? null);
+const [collectionL2, setCollectionL2] = useState(
+  collectionsData?.[0]?.subCategories?.[0] ?? null
+);
+
 
   // BRANDS
   const [brandL1, setBrandL1] = useState(brandsData[0]);
@@ -196,7 +203,7 @@ export default function Navigation() {
                 className="nav-item dropdown-custom"
                 onMouseEnter={() => {
                   setCollectionL1(collectionsData[0]);
-                  setCollectionL2(collectionsData[0].subCategories[0]);
+                  setCollectionL2(collectionsData[0]?.subCategories[0]);
                 }}
               >
                 <Link
@@ -242,10 +249,10 @@ export default function Navigation() {
                             </ul>
                           </Col>
                           <Col md={4}>
-                            <h6 className="nav-head01">{collectionL1.categoryName}</h6>
+                            <h6 className="nav-head01">{collectionL1?.categoryName}</h6>
 
                             <ul className="navList01">
-                              {collectionL1.subCategories.map((sub) => (
+                              {collectionL1?.subCategories.map((sub) => (
                                 <li key={sub.subCategorySlug}>
                                   <Link
                                     href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
@@ -264,10 +271,10 @@ export default function Navigation() {
                             </ul>
                           </Col>
                           <Col md={4}>
-                            <h6 className="nav-head01">{collectionL2.subCategoryName}</h6>
+                            <h6 className="nav-head01">{collectionL2?.subCategoryName}</h6>
 
                             <ul className="navList01">
-                              {collectionL2.products.map((product) => (
+                              {collectionL2?.products.map((product) => (
                                 <li key={product.productSlug}>
                                   <Link
                                     href={`/collections/${collectionL1.categorySlug}/${collectionL2.subCategorySlug}/${product.productSlug}`}
@@ -282,7 +289,7 @@ export default function Navigation() {
                       </Col>
                       <Col md={4}>
                         <Row>
-                          {collectionL1.subCategories
+                          {collectionL1?.subCategories
                             ?.slice(0, 2)
                             .map((sub) => (
                               <Col md={6} key={sub.subCategorySlug}>
@@ -291,7 +298,7 @@ export default function Navigation() {
                                   onMouseEnter={() => setCollectionL2(sub)}
                                 >
                                   <Image
-                                    src={sub.subCategoryImage}
+                                    src={cleanImage(sub.subCategoryImage?.url)}
                                     width={260}
                                     height={280}
                                     alt={sub.subCategoryName}
@@ -670,3 +677,21 @@ export default function Navigation() {
     </>
   );
 }
+export async function getServerSideProps({ params }) {
+  try {
+    const { category } = params;
+    const collectionsData = await getCollectionPageData(category);
+
+    return {
+      props: {
+        collectionsData
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        collectionsData:[]
+      },
+    };
+  }
+}
\ No newline at end of file

pages/_app.js

@@ -7,13 +7,15 @@ import Footer from "@/components/Layout/Footer";
 import Providers from "@/redux/providers";
 import { store } from "@/redux/store";
 import SmoothScroll from "@/components/SmoothScroll";
+import { getCollectionPageData } from "@/services/collectionApi";
+
+export default function App({ Component, pageProps, collectionsData}) {
  
-export default function App({ Component, pageProps }) {
   return (
     <>
       <Providers store={store}>
         {/* <SmoothScroll> */}
-          <Header />
+          <Header collectionsData={collectionsData} />
           <Component {...pageProps} />
           <Footer />
         {/* </SmoothScroll> */}
@@ -21,3 +23,19 @@ export default function App({ Component, pageProps }) {
     </>
   );
 }
+
+/* ✅ THIS IS REQUIRED */
+App.getInitialProps = async () => {
+  try {
+    const collectionsData = await getCollectionPageData();
+
+    return {
+      collectionsData,
+    };
+  } catch (error) {
+    console.error("Collections fetch failed", error);
+    return {
+      collectionsData: [],
+    };
+  }
+};

pages/collections/[category]/[subCategory]/[productSlug].js

@@ -10,7 +10,7 @@ import { getCollectionDetailCategoryData } from "@/services/collectionDetailCate
 import { getCataloguesBySlug } from "@/services/cataloguesApi";
 
 const ProductPage = ({ productData, cataloguesData }) => {
-  console.log("cataloguesData", cataloguesData)
+  console.log("cataloguesData", productData)
   const router = useRouter();
   const { category, subCategory: subCategorySlug, productSlug } = router.query;
 

pages/collections/[category]/index.js

 import InnerDetails from "@/components/Collection/InnerDetails";
 import Breadcrumb from "@/components/Common/Breadcrumb";
 import HeadTitle from "@/components/Common/HeadTitle";
+import { getCollectionPageData } from "@/services/collectionApi";
 import { getCollectionCategoryBySlug } from "@/services/collectionCategoryApi";
 import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
 
-export default function CategoryPage({ categoryData, categoriesSub }) {
-  console.log("categoriesSub", categoryData)
+export default function CategoryPage({ categoryData, categoriesSub,collectionDataa }) {
+  console.log("categoriesSub", collectionDataa)
   if (!categoryData) {
     return <h1>Category not found</h1>;
   }
@@ -43,11 +44,13 @@ export async function getServerSideProps({ params }) {
 
     const categoryData = await getCollectionCategoryBySlug(category);
     const categoriesSub = await getCollectionSubCategoryData(category);
+    const collectionDataa = await getCollectionPageData(category);
 
     return {
       props: {
         categoryData,
         categoriesSub,
+        collectionDataa
       },
     };
   } catch (error) {
@@ -55,6 +58,7 @@ export async function getServerSideProps({ params }) {
       props: {
         categoryData: null,
         categoriesSub: [],
+        collectionDataa:[]
       },
     };
   }

styles/style.css

@@ -131,35 +131,51 @@ p {
 }
 
 /* Nav links hover underline animation */
-.nav-link {
+.custom-navbar .nav-link {
   color: #000;
-  /* position: relative; */
+  position: relative;
   transition: color 0.3s ease;
   /* border-bottom: 1px solid var(--secondary-color); */
 }
 
-/* .nav-link::after {
+.custom-navbar .nav-link::after {
   content: "";
   position: absolute;
-  bottom: -4px;
+  bottom: 0px;
   left: 50%;
   width: 0;
   height: 2px;
   background: var(--secondary-color);
   transition: all 0.3s ease;
   transform: translateX(-50%);
-} */
+}
+
+/* Hover on link */
+.custom-navbar .nav-item:hover > .nav-link {
+  color: var(--secondary-color);
+}
+
+/* Keep active when dropdown is hovered */
+.custom-navbar .nav-item.dropdown-custom:hover > .nav-link {
+  color: var(--secondary-color);
+}
+
+/* Animate underline */
+.custom-navbar .nav-item:hover > .nav-link::after,
+.custom-navbar .nav-item.dropdown-custom:hover > .nav-link::after {
+  width: 100%;
+}
 
-.nav-link:hover {
+.custom-navbar .nav-link:hover {
   color: var(--secondary-color);
 }
 
-.nav-link:hover::after {
+.custom-navbar .nav-link:hover::after {
   width: 100%;
 }
 
 /* Keep underline for active */
-.navbar-nav .nav-link.active::after {
+.custom-navbar .navbar-nav .nav-link.active::after {
   width: 100%;
 }