Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 54aac07a by Ravindra Kanojiya
Options

updated header nav

1 parent be99c30d
Inline Side-by-side
Showing 6 changed files with 478 additions and 199 deletions
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
components/data/collectionsData.js
export const collectionsData = [
{
categorySlug: "kitchens",
categoryName: "Kitchens",
subCategories: [
{
subCategorySlug: "indoor-kitchens",
subCategoryName: "Indoor Kitchens",
subCategoryImage: "/image/collection-page/indoor-kitchens.png",
products: [
{
productSlug: "artematica",
title: "Artematica",
image: "/image/collection-page/indoor-kitchen/01.png",
},
{
productSlug: "artematica-soft-outline",
title: "Artematica Soft Outline",
image: "/image/collection-page/indoor-kitchen/02.png",
},
{
productSlug: "riciclantica",
title: "Riciclantica",
image: "/image/collection-page/indoor-kitchen/03.png",
},
{
productSlug: "riciclantica-outline",
title: "Riciclantica Outline",
image: "/image/collection-page/indoor-kitchen/04.png",
},
{
productSlug: "frame-classic",
title: "Frame Classic",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "outdoor-kitchens",
subCategoryName: "Outdoor Kitchens",
subCategoryImage: "/image/collection-page/outdoor-kitchens.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "pantry-and-coffee-bar",
subCategoryName: "Pantry and coffee bar",
subCategoryImage: "/image/collection-page/pantry.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "sepecial-elements",
subCategoryName: "Sepecial Elements",
subCategoryImage: "/image/collection-page/special-elements.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "kitchen-accessories",
subCategoryName: "Kitchen Accessories",
subCategoryImage: "/image/collection-page/kitchchen-Accessories.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
],
},
{
categorySlug: "wardrobes",
categoryName: "Wardrobes",
subCategories: [
{
subCategorySlug: "cabinet-free-wardrobes",
subCategoryName: "Cabinet Free Wardrobes",
subCategoryImage: "/image/collection-page/indoor-kitchens.png",
products: [
{
productSlug: "artematica",
title: "Artematica",
image: "/image/collection-page/indoor-kitchen/01.png",
},
{
productSlug: "artematica-soft-outline",
title: "Artematica Soft Outline",
image: "/image/collection-page/indoor-kitchen/02.png",
},
{
productSlug: "riciclantica",
title: "Riciclantica",
image: "/image/collection-page/indoor-kitchen/03.png",
},
{
productSlug: "riciclantica-outline",
title: "Riciclantica Outline",
image: "/image/collection-page/indoor-kitchen/04.png",
},
{
productSlug: "frame-classic",
title: "Frame Classic",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "glass-wardrobes ",
subCategoryName: "Glass Wardrobes ",
subCategoryImage: "/image/collection-page/outdoor-kitchens.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "open-wardrobes",
subCategoryName: "Open Wardrobes",
subCategoryImage: "/image/collection-page/pantry.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "walk-in-wardrobes",
subCategoryName: "Walk-in Wardrobes",
subCategoryImage: "/image/collection-page/special-elements.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "islands",
subCategoryName: "Islands",
subCategoryImage: "/image/collection-page/kitchchen-Accessories.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
],
},
];
{
"id": 31,
"categoryName": "Kitchens",
"categorySlug": "kitchens",
"subCategories": [
{
"id": 138,
"subCategoryName": "Indoor Kitchens",
"subCategorySlug": "indoor-kitchens",
"subCategoryImage": {
"id": 4,
"documentId": "skleh1m2pguzkpzzmtfac848",
"name": "indoor-kitchens.png",
"alternativeText": null,
"caption": null,
"width": 868,
"height": 560,
"formats": {
"small": {
"ext": ".png",
"url": "/uploads/small_indoor_kitchens_cbd2e08b6e.png",
"hash": "small_indoor_kitchens_cbd2e08b6e",
"mime": "image/png",
"name": "small_indoor-kitchens.png",
"path": null,
"size": 312.47,
"width": 500,
"height": 323,
"sizeInBytes": 312471
},
"medium": {
"ext": ".png",
"url": "/uploads/medium_indoor_kitchens_cbd2e08b6e.png",
"hash": "medium_indoor_kitchens_cbd2e08b6e",
"mime": "image/png",
"name": "medium_indoor-kitchens.png",
"path": null,
"size": 661.66,
"width": 750,
"height": 484,
"sizeInBytes": 661655
},
"thumbnail": {
"ext": ".png",
"url": "/uploads/thumbnail_indoor_kitchens_cbd2e08b6e.png",
"hash": "thumbnail_indoor_kitchens_cbd2e08b6e",
"mime": "image/png",
"name": "thumbnail_indoor-kitchens.png",
"path": null,
"size": 82.35,
"width": 242,
"height": 156,
"sizeInBytes": 82351
}
},
"hash": "indoor_kitchens_cbd2e08b6e",
"ext": ".png",
"mime": "image/png",
"size": 224.2,
"url": "/uploads/indoor_kitchens_cbd2e08b6e.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2026-02-04T06:27:05.335Z",
"updatedAt": "2026-02-04T06:27:05.335Z",
"publishedAt": "2026-02-04T06:27:05.335Z"
},
"products": [
{
"id": 247,
"productSlug": "artematica",
"title": "Artematica",
"image": null
},
{
"id": 248,
"productSlug": "artematica-soft-outline",
"title": "Artematica Soft Outline",
"image": null
},
]
},
{
"id": 144,
"subCategoryName": "Outdoor Kitchens",
"subCategorySlug": "outdoor-kitchens",
"subCategoryImage": {
"id": 1,
"documentId": "hvitlaxag973drq3my9wz60t",
"name": "outdoor-kitchens.png",
"alternativeText": null,
"caption": null,
"width": 867,
"height": 560,
"formats": {
"small": {
"ext": ".png",
"url": "/uploads/small_outdoor_kitchens_a38371800b.png",
"hash": "small_outdoor_kitchens_a38371800b",
"mime": "image/png",
"name": "small_outdoor-kitchens.png",
"path": null,
"size": 1.64,
"width": 500,
"height": 323,
"sizeInBytes": 1639
},
"medium": {
"ext": ".png",
"url": "/uploads/medium_outdoor_kitchens_a38371800b.png",
"hash": "medium_outdoor_kitchens_a38371800b",
"mime": "image/png",
"name": "medium_outdoor-kitchens.png",
"path": null,
"size": 2.83,
"width": 750,
"height": 484,
"sizeInBytes": 2827
},
"thumbnail": {
"ext": ".png",
"url": "/uploads/thumbnail_outdoor_kitchens_a38371800b.png",
"hash": "thumbnail_outdoor_kitchens_a38371800b",
"mime": "image/png",
"name": "thumbnail_outdoor-kitchens.png",
"path": null,
"size": 0.69,
"width": 242,
"height": 156,
"sizeInBytes": 691
}
},
"hash": "outdoor_kitchens_a38371800b",
"ext": ".png",
"mime": "image/png",
"size": 0.6,
"url": "/uploads/outdoor_kitchens_a38371800b.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2026-02-04T06:27:02.623Z",
"updatedAt": "2026-02-04T06:27:02.623Z",
"publishedAt": "2026-02-04T06:27:02.624Z"
},
"products": [
{
"id": 254,
"productSlug": "island ",
"title": "Island ",
"image": {
"id": 56,
"documentId": "vk828jrfb2mqhgputg1epz2r",
"name": "01.png",
"alternativeText": null,
"caption": null,
"width": 1856,
"height": 916,
"formats": {
"large": {
"ext": ".png",
"url": "/uploads/large_01_8db6689805.png",
"hash": "large_01_8db6689805",
"mime": "image/png",
"name": "large_01.png",
"path": null,
"size": 768.99,
"width": 1000,
"height": 494,
"sizeInBytes": 768990
},
"small": {
"ext": ".png",
"url": "/uploads/small_01_8db6689805.png",
"hash": "small_01_8db6689805",
"mime": "image/png",
"name": "small_01.png",
"path": null,
"size": 200.28,
"width": 500,
"height": 247,
"sizeInBytes": 200283
},
"medium": {
"ext": ".png",
"url": "/uploads/medium_01_8db6689805.png",
"hash": "medium_01_8db6689805",
"mime": "image/png",
"name": "medium_01.png",
"path": null,
"size": 435.49,
"width": 750,
"height": 370,
"sizeInBytes": 435486
},
"thumbnail": {
"ext": ".png",
"url": "/uploads/thumbnail_01_8db6689805.png",
"hash": "thumbnail_01_8db6689805",
"mime": "image/png",
"name": "thumbnail_01.png",
"path": null,
"size": 56.89,
"width": 245,
"height": 121,
"sizeInBytes": 56889
}
},
"hash": "01_8db6689805",
"ext": ".png",
"mime": "image/png",
"size": 508.16,
"url": "/uploads/01_8db6689805.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2026-02-06T11:58:47.570Z",
"updatedAt": "2026-02-09T13:46:37.428Z",
"publishedAt": "2026-02-06T11:58:47.570Z"
}
},
{
"id": 255,
"productSlug": "full-glass-unit ",
"title": "full Glass unit ",
"image": {
"id": 57,
"documentId": "pcshdea547bmsun6092ltjzi",
"name": "02.png",
"alternativeText": null,
"caption": null,
"width": 1856,
"height": 916,
"formats": {
"large": {
"ext": ".png",
"url": "/uploads/large_02_0c65f5179e.png",
"hash": "large_02_0c65f5179e",
"mime": "image/png",
"name": "large_02.png",
"path": null,
"size": 1033.84,
"width": 1000,
"height": 494,
"sizeInBytes": 1033842
},
"small": {
"ext": ".png",
"url": "/uploads/small_02_0c65f5179e.png",
"hash": "small_02_0c65f5179e",
"mime": "image/png",
"name": "small_02.png",
"path": null,
"size": 273.45,
"width": 500,
"height": 247,
"sizeInBytes": 273451
},
"medium": {
"ext": ".png",
"url": "/uploads/medium_02_0c65f5179e.png",
"hash": "medium_02_0c65f5179e",
"mime": "image/png",
"name": "medium_02.png",
"path": null,
"size": 593.68,
"width": 750,
"height": 370,
"sizeInBytes": 593682
},
"thumbnail": {
"ext": ".png",
"url": "/uploads/thumbnail_02_0c65f5179e.png",
"hash": "thumbnail_02_0c65f5179e",
"mime": "image/png",
"name": "thumbnail_02.png",
"path": null,
"size": 72.1,
"width": 245,
"height": 121,
"sizeInBytes": 72098
}
},
"hash": "02_0c65f5179e",
"ext": ".png",
"mime": "image/png",
"size": 761.91,
"url": "/uploads/02_0c65f5179e.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2026-02-06T11:58:48.325Z",
"updatedAt": "2026-02-06T11:58:48.325Z",
"publishedAt": "2026-02-06T11:58:48.326Z"
}
},
]
},
]
},
{
"id": 30,
"categoryName": "Wardrobes",
"categorySlug": "wardrobes",
"subCategories": [
{
"id": 139,
"subCategoryName": "Cabinet Free Wardrobes",
"subCategorySlug": "cabinet-free-wardrobes",
"subCategoryImage": {
"id": 4,
"documentId": "skleh1m2pguzkpzzmtfac848",
"name": "indoor-kitchens.png",
"alternativeText": null,
"caption": null,
"width": 868,
"height": 560,
"formats": {
"small": {
"ext": ".png",
"url": "/uploads/small_indoor_kitchens_cbd2e08b6e.png",
"hash": "small_indoor_kitchens_cbd2e08b6e",
"mime": "image/png",
"name": "small_indoor-kitchens.png",
"path": null,
"size": 312.47,
"width": 500,
"height": 323,
"sizeInBytes": 312471
},
"medium": {
"ext": ".png",
"url": "/uploads/medium_indoor_kitchens_cbd2e08b6e.png",
"hash": "medium_indoor_kitchens_cbd2e08b6e",
"mime": "image/png",
"name": "medium_indoor-kitchens.png",
"path": null,
"size": 661.66,
"width": 750,
"height": 484,
"sizeInBytes": 661655
},
"thumbnail": {
"ext": ".png",
"url": "/uploads/thumbnail_indoor_kitchens_cbd2e08b6e.png",
"hash": "thumbnail_indoor_kitchens_cbd2e08b6e",
"mime": "image/png",
"name": "thumbnail_indoor-kitchens.png",
"path": null,
"size": 82.35,
"width": 242,
"height": 156,
"sizeInBytes": 82351
}
},
"hash": "indoor_kitchens_cbd2e08b6e",
"ext": ".png",
"mime": "image/png",
"size": 224.2,
"url": "/uploads/indoor_kitchens_cbd2e08b6e.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2026-02-04T06:27:05.335Z",
"updatedAt": "2026-02-04T06:27:05.335Z",
"publishedAt": "2026-02-04T06:27:05.335Z"
},
"products": [
{
"id": 261,
"productSlug": "artematica",
"title": "Artematica",
"image": null
},
{
"id": 262,
"productSlug": "riciclantica",
"title": "Riciclantica",
"image": null
}
]
},
]
}
]
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 }) {
export default function App({ Component, pageProps, collectionsData}) {
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%;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!