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
Expand all
Inline Side-by-side
Showing 6 changed files with 89 additions and 26 deletions
components/Layout/Header.js
...@@ -17,8 +17,9 @@ import Image from "next/image"; ...@@ -17,8 +17,9 @@ import Image from "next/image";
import { SubMenu } from "./SubMenu"; import { SubMenu } from "./SubMenu";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { fetchHeader } from "@/redux/slices/headerSlice"; import { fetchHeader } from "@/redux/slices/headerSlice";
import { collectionsData } from "@/components/data/collectionsData";
import { brandsData } from "@/components/data/brandsData"; import { brandsData } from "@/components/data/brandsData";
import { getCollectionPageData } from "@/services/collectionApi";
import { cleanImage } from "../services/imageHandling";
// const collectionsMenu = [ // const collectionsMenu = [
// { // {
// key: "kitchens", // key: "kitchens",
...@@ -126,7 +127,8 @@ import { brandsData } from "@/components/data/brandsData"; ...@@ -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 [scrolled, setScrolled] = useState(false);
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [activeMenu, setActiveMenu] = useState(null); const [activeMenu, setActiveMenu] = useState(null);
...@@ -134,10 +136,15 @@ export default function Navigation() { ...@@ -134,10 +136,15 @@ export default function Navigation() {
// const [level1, setLevel1] = useState(collectionsMenu[0] ?? null); // const [level1, setLevel1] = useState(collectionsMenu[0] ?? null);
// const [level2, setLevel2] = useState(collectionsMenu[0]?.subCategories[0] ?? null); // const [level2, setLevel2] = useState(collectionsMenu[0]?.subCategories[0] ?? null);
// COLLECTION // COLLECTION
const [collectionL1, setCollectionL1] = useState(collectionsData[0]); // const [collectionL1, setCollectionL1] = useState(collectionsData[0]);
const [collectionL2, setCollectionL2] = useState( // const [collectionL2, setCollectionL2] = useState(
collectionsData[0].subCategories[0], // collectionsData[0].subCategories[0],
); // );
const [collectionL1, setCollectionL1] = useState(collectionsData?.[0] ?? null);
const [collectionL2, setCollectionL2] = useState(
collectionsData?.[0]?.subCategories?.[0] ?? null
);
// BRANDS // BRANDS
const [brandL1, setBrandL1] = useState(brandsData[0]); const [brandL1, setBrandL1] = useState(brandsData[0]);
...@@ -196,7 +203,7 @@ export default function Navigation() { ...@@ -196,7 +203,7 @@ export default function Navigation() {
className="nav-item dropdown-custom" className="nav-item dropdown-custom"
onMouseEnter={() => { onMouseEnter={() => {
setCollectionL1(collectionsData[0]); setCollectionL1(collectionsData[0]);
setCollectionL2(collectionsData[0].subCategories[0]); setCollectionL2(collectionsData[0]?.subCategories[0]);
}} }}
> >
<Link <Link
...@@ -242,10 +249,10 @@ export default function Navigation() { ...@@ -242,10 +249,10 @@ export default function Navigation() {
</ul> </ul>
</Col> </Col>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01">{collectionL1.categoryName}</h6> <h6 className="nav-head01">{collectionL1?.categoryName}</h6>
<ul className="navList01"> <ul className="navList01">
{collectionL1.subCategories.map((sub) => ( {collectionL1?.subCategories.map((sub) => (
<li key={sub.subCategorySlug}> <li key={sub.subCategorySlug}>
<Link <Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`} href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
...@@ -264,10 +271,10 @@ export default function Navigation() { ...@@ -264,10 +271,10 @@ export default function Navigation() {
</ul> </ul>
</Col> </Col>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01">{collectionL2.subCategoryName}</h6> <h6 className="nav-head01">{collectionL2?.subCategoryName}</h6>
<ul className="navList01"> <ul className="navList01">
{collectionL2.products.map((product) => ( {collectionL2?.products.map((product) => (
<li key={product.productSlug}> <li key={product.productSlug}>
<Link <Link
href={`/collections/${collectionL1.categorySlug}/${collectionL2.subCategorySlug}/${product.productSlug}`} href={`/collections/${collectionL1.categorySlug}/${collectionL2.subCategorySlug}/${product.productSlug}`}
...@@ -282,7 +289,7 @@ export default function Navigation() { ...@@ -282,7 +289,7 @@ export default function Navigation() {
</Col> </Col>
<Col md={4}> <Col md={4}>
<Row> <Row>
{collectionL1.subCategories {collectionL1?.subCategories
?.slice(0, 2) ?.slice(0, 2)
.map((sub) => ( .map((sub) => (
<Col md={6} key={sub.subCategorySlug}> <Col md={6} key={sub.subCategorySlug}>
...@@ -291,7 +298,7 @@ export default function Navigation() { ...@@ -291,7 +298,7 @@ export default function Navigation() {
onMouseEnter={() => setCollectionL2(sub)} onMouseEnter={() => setCollectionL2(sub)}
> >
<Image <Image
src={sub.subCategoryImage} src={cleanImage(sub.subCategoryImage?.url)}
width={260} width={260}
height={280} height={280}
alt={sub.subCategoryName} alt={sub.subCategoryName}
...@@ -670,3 +677,21 @@ export default function Navigation() { ...@@ -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 \ No newline at end of file
pages/_app.js
...@@ -7,13 +7,15 @@ import Footer from "@/components/Layout/Footer"; ...@@ -7,13 +7,15 @@ import Footer from "@/components/Layout/Footer";
import Providers from "@/redux/providers"; import Providers from "@/redux/providers";
import { store } from "@/redux/store"; import { store } from "@/redux/store";
import SmoothScroll from "@/components/SmoothScroll"; import SmoothScroll from "@/components/SmoothScroll";
import { getCollectionPageData } from "@/services/collectionApi";
export default function App({ Component, pageProps }) { export default function App({ Component, pageProps, collectionsData}) {
return ( return (
<> <>
<Providers store={store}> <Providers store={store}>
{/* <SmoothScroll> */} {/* <SmoothScroll> */}
<Header /> <Header collectionsData={collectionsData} />
<Component {...pageProps} /> <Component {...pageProps} />
<Footer /> <Footer />
{/* </SmoothScroll> */} {/* </SmoothScroll> */}
...@@ -21,3 +23,19 @@ export default function App({ Component, pageProps }) { ...@@ -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 ...@@ -10,7 +10,7 @@ import { getCollectionDetailCategoryData } from "@/services/collectionDetailCate
import { getCataloguesBySlug } from "@/services/cataloguesApi"; import { getCataloguesBySlug } from "@/services/cataloguesApi";
const ProductPage = ({ productData, cataloguesData }) => { const ProductPage = ({ productData, cataloguesData }) => {
console.log("cataloguesData", cataloguesData) console.log("cataloguesData", productData)
const router = useRouter(); const router = useRouter();
const { category, subCategory: subCategorySlug, productSlug } = router.query; const { category, subCategory: subCategorySlug, productSlug } = router.query;
......
pages/collections/[category]/index.js
import InnerDetails from "@/components/Collection/InnerDetails"; import InnerDetails from "@/components/Collection/InnerDetails";
import Breadcrumb from "@/components/Common/Breadcrumb"; import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle"; import HeadTitle from "@/components/Common/HeadTitle";
import { getCollectionPageData } from "@/services/collectionApi";
import { getCollectionCategoryBySlug } from "@/services/collectionCategoryApi"; import { getCollectionCategoryBySlug } from "@/services/collectionCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi"; import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
export default function CategoryPage({ categoryData, categoriesSub }) { export default function CategoryPage({ categoryData, categoriesSub,collectionDataa }) {
console.log("categoriesSub", categoryData) console.log("categoriesSub", collectionDataa)
if (!categoryData) { if (!categoryData) {
return <h1>Category not found</h1>; return <h1>Category not found</h1>;
} }
...@@ -43,11 +44,13 @@ export async function getServerSideProps({ params }) { ...@@ -43,11 +44,13 @@ export async function getServerSideProps({ params }) {
const categoryData = await getCollectionCategoryBySlug(category); const categoryData = await getCollectionCategoryBySlug(category);
const categoriesSub = await getCollectionSubCategoryData(category); const categoriesSub = await getCollectionSubCategoryData(category);
const collectionDataa = await getCollectionPageData(category);
return { return {
props: { props: {
categoryData, categoryData,
categoriesSub, categoriesSub,
collectionDataa
}, },
}; };
} catch (error) { } catch (error) {
...@@ -55,6 +58,7 @@ export async function getServerSideProps({ params }) { ...@@ -55,6 +58,7 @@ export async function getServerSideProps({ params }) {
props: { props: {
categoryData: null, categoryData: null,
categoriesSub: [], categoriesSub: [],
collectionDataa:[]
}, },
}; };
} }
......
styles/style.css
...@@ -131,35 +131,51 @@ p { ...@@ -131,35 +131,51 @@ p {
} }
/* Nav links hover underline animation */ /* Nav links hover underline animation */
.nav-link { .custom-navbar .nav-link {
color: #000; color: #000;
/* position: relative; */ position: relative;
transition: color 0.3s ease; transition: color 0.3s ease;
/* border-bottom: 1px solid var(--secondary-color); */ /* border-bottom: 1px solid var(--secondary-color); */
} }
/* .nav-link::after { .custom-navbar .nav-link::after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -4px; bottom: 0px;
left: 50%; left: 50%;
width: 0; width: 0;
height: 2px; height: 2px;
background: var(--secondary-color); background: var(--secondary-color);
transition: all 0.3s ease; transition: all 0.3s ease;
transform: translateX(-50%); 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); color: var(--secondary-color);
} }
.nav-link:hover::after { .custom-navbar .nav-link:hover::after {
width: 100%; width: 100%;
} }
/* Keep underline for active */ /* Keep underline for active */
.navbar-nav .nav-link.active::after { .custom-navbar .navbar-nav .nav-link.active::after {
width: 100%; 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!