Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 8e7f368b by Ravindra Kanojiya
Options

updated header menu

1 parent 29b2cc52
Inline Side-by-side
Showing 3 changed files with 39 additions and 229 deletions
components/Collection/Gallery.js
...@@ -35,7 +35,6 @@ const Gallery = ({ productData }) => { ...@@ -35,7 +35,6 @@ const Gallery = ({ productData }) => {
return ( return (
<Col <Col
key={item?.id} key={item?.id}
// xs={6}
xs={isFullWidth ? 12 : 6} xs={isFullWidth ? 12 : 6}
className="mb-4" className="mb-4"
> >
......
components/Layout/Header.js
...@@ -6,173 +6,33 @@ import { ...@@ -6,173 +6,33 @@ import {
Nav, Nav,
Container, Container,
Offcanvas, Offcanvas,
Button,
Row, Row,
Col, Col,
Dropdown,
} from "react-bootstrap"; } from "react-bootstrap";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import Image from "next/image"; import Image from "next/image";
import { SubMenu } from "./SubMenu";
import { useDispatch, useSelector } from "react-redux";
import { fetchHeader } from "@/redux/slices/headerSlice";
import { brandsData } from "@/components/data/brandsData"; import { brandsData } from "@/components/data/brandsData";
import { getCollectionPageData } from "@/services/collectionApi";
import { cleanImage } from "../services/imageHandling"; import { cleanImage } from "../services/imageHandling";
// const collectionsMenu = [
// {
// key: "kitchens",
// title: "Kitchens",
// slug: "kitchens",
// previewImages: [
// { image: "/image/header/luxury-kitchen.png", title: "Luxury Kitchen" },
// { image: "/image/header/Modern-Kitchen.png", title: "Modern Kitchen" },
// ],
// subCategories: [
// {
// key: "all-kitchens",
// title: "All Kitchens",
// slug: "all-kitchens",
// items: [
// {
// title: "Artematica",
// slug: "artematica",
// },
// {
// title: "Riciclantica",
// slug: "riciclantica",
// },
// ],
// },
// {
// key: "indoor",
// title: "Indoor Kitchen",
// slug: "indoor-kitchen",
// items: [
// {
// title: "Artematica",
// slug: "artematica",
// },
// {
// title: "Riciclantica",
// slug: "riciclantica",
// },
// ],
// },
// {
// key: "outdoor",
// title: "Outdoor Kitchen",
// slug: "outdoor-kitchen",
// items: [
// {
// title: "Sunstone Pro",
// slug: "sunstone-pro",
// },
// ],
// },
// ],
// },
// {
// key: "wardrobes",
// title: "Wardrobes",
// slug: "wardrobes",
// previewImages: [
// { image: "/image/header/Modern-Kitchen.png", title: "Modern Wardrobe" },
// { image: "/image/header/luxury-kitchen.png", title: "Luxury Wardrobe" },
// ],
// subCategories: [
// {
// key: "walkin",
// title: "Walk-in Wardrobes",
// slug: "walk-in-wardrobes",
// items: [
// {
// title: "Linea",
// slug:"linea"
// },
// {
// title: "Vista",
// slug:"vista"
// }
// ]
// },
// ],
// },
// {
// key: "doorsandpartitions",
// title: "Doors and Partitions",
// slug: "doors-and-partitions",
// previewImages: [
// { image: "/image/header/luxury-kitchen.png", title: "Luxury Wardrobe" },
// { image: "/image/header/Modern-Kitchen.png", title: "Modern Wardrobe" },
// ],
// subCategories: [
// {
// key: "walkin",
// title: "Walk-in Wardrobes",
// items: [
// {
// title:"Linea",
// slug:"linea"
// },
// {
// title:"Vista",
// slug:"vista"
// },
// ]
// },
// ],
// },
// ];
export default function Navigation({ collectionsData = [] }) { export default function Navigation({ collectionsData = [] }) {
const pathname = usePathname();
const path = pathname?.split("?")[0].replace(/\/$/, "") || "";
const segments = path.split("/").filter(Boolean);
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 [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] ?? null,
);
const [collectionL2, setCollectionL2] = useState(
collectionsData?.[0]?.subCategories?.[0] ?? null,
);
// BRANDS const [collectionL1, setCollectionL1] = useState(collectionsData?.[0] ?? null);
const [brandL1, setBrandL1] = useState(brandsData[0]); const [collectionL2, setCollectionL2] = useState(collectionsData?.[0]?.subCategories?.[0] ?? null);
const [mobileStep, setMobileStep] = useState("main"); const [mobileStep, setMobileStep] = useState("main");
const [backLabel, setBackLabel] = useState("Menu"); const [backLabel, setBackLabel] = useState("Menu");
const [activeCollection, setActiveCollection] = useState(null); const [activeCollection, setActiveCollection] = useState(null);
const [activeSubCollection, setActiveSubCollection] = useState(null); const [activeSubCollection, setActiveSubCollection] = useState(null);
const [activeBrand, setActiveBrand] = useState(null);
const pathname = usePathname();
// const isActive = (path) => {
// if (!path) return false;
// return pathname === path || pathname.startsWith(path + "/");
// };
// FLAGS
const path = pathname?.split("?")[0].replace(/\/$/, "") || "";
const segments = path.split("/").filter(Boolean);
// 🔥 ONLY ONE ACTIVE MENU
let activeMenu = ""; let activeMenu = "";
if (segments[0] === "collections") activeMenu = "collections"; if (segments[0] === "collections") activeMenu = "collections";
else if (segments[0] === "brands") activeMenu = "brands"; else if (segments[0] === "brands") activeMenu = "brands";
else if (path === "/about") activeMenu = "about"; else if (path === "/about") activeMenu = "about";
...@@ -185,16 +45,13 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -185,16 +45,13 @@ export default function Navigation({ collectionsData = [] }) {
return () => window.removeEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll);
}, []); }, []);
// const handleMenuClick = (menu) => {
// setActiveMenu((prev) => (prev === menu ? null : menu));
// };
const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
// dispatch(fetchHeader()); if (!pathname || segments[0] !== "collections") return;
}, []); const cat = collectionsData.find((c) => c.categorySlug === segments[1]) ?? collectionsData?.[0] ?? null;
const sub = cat?.subCategories?.find((s) => s.subCategorySlug === segments[2]) ?? cat?.subCategories?.[0] ?? null;
const headerData = useSelector((state) => state.header.data); setCollectionL1(cat);
setCollectionL2(sub);
}, [pathname]);
const showLevel3 = collectionL2?.products?.length > 0; const showLevel3 = collectionL2?.products?.length > 0;
...@@ -221,8 +78,14 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -221,8 +78,14 @@ export default function Navigation({ collectionsData = [] }) {
<Nav.Item <Nav.Item
className="nav-item dropdown-custom" className="nav-item dropdown-custom"
onMouseEnter={() => { onMouseEnter={() => {
setCollectionL1(collectionsData[0]); const activeCat =
setCollectionL2(collectionsData[0]?.subCategories[0]); collectionsData.find((c) => c.categorySlug === segments[1]) ??
collectionsData[0];
const activeSub =
activeCat?.subCategories?.find((s) => s.subCategorySlug === segments[2]) ??
activeCat?.subCategories?.[0];
setCollectionL1(activeCat);
setCollectionL2(activeSub);
}} }}
> >
<Link <Link
...@@ -235,7 +98,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -235,7 +98,7 @@ export default function Navigation({ collectionsData = [] }) {
<div className="dropdown-menu"> <div className="dropdown-menu">
<div className="dropdown-menu-inner custom_container"> <div className="dropdown-menu-inner custom_container">
<Row> <Row>
<Col md={showLevel3 ? 8 : 8}> <Col md={8}>
<Row> <Row>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01">Collections</h6> <h6 className="nav-head01">Collections</h6>
...@@ -292,7 +155,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -292,7 +155,7 @@ export default function Navigation({ collectionsData = [] }) {
<Link <Link
href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`} href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`}
className={ className={
segments[3] === product.productSlug ? "active" : "" segments[3] === product.productSlug?.trim() ? "active" : ""
} }
> >
{product.title} {product.title}
...@@ -311,7 +174,8 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -311,7 +174,8 @@ export default function Navigation({ collectionsData = [] }) {
?.slice(0, 2) ?.slice(0, 2)
.map((sub) => ( .map((sub) => (
<Col md={6} key={sub.subCategorySlug}> <Col md={6} key={sub.subCategorySlug}>
<Link className="header-rt-image" <Link
className="header-rt-image"
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`} href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)} onMouseEnter={() => setCollectionL2(sub)}
> >
...@@ -335,12 +199,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -335,12 +199,7 @@ export default function Navigation({ collectionsData = [] }) {
</div> </div>
</Nav.Item> </Nav.Item>
<Nav.Item <Nav.Item className="nav-item dropdown-custom">
className="nav-item dropdown-custom"
onMouseEnter={() => {
setBrandL1(brandsData[0]);
}}
>
<Link <Link
href="/brands/valcucine" href="/brands/valcucine"
className={`nav-link ${activeMenu === "brands" ? "active" : ""}`} className={`nav-link ${activeMenu === "brands" ? "active" : ""}`}
...@@ -394,11 +253,8 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -394,11 +253,8 @@ export default function Navigation({ collectionsData = [] }) {
</div> </div>
</div> </div>
</Nav.Item> </Nav.Item>
{/* <Nav.Link as={Link} href="/brands/doors">
Brands
</Nav.Link> */}
<Link
<Link
href="/about" href="/about"
className={`nav-link ${activeMenu === "about" ? "active" : ""}`} className={`nav-link ${activeMenu === "about" ? "active" : ""}`}
> >
...@@ -406,7 +262,6 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -406,7 +262,6 @@ export default function Navigation({ collectionsData = [] }) {
</Link> </Link>
<Link <Link
href="/catalogue" href="/catalogue"
className={`nav-link ${activeMenu === "catalogue" ? "active" : ""}`} className={`nav-link ${activeMenu === "catalogue" ? "active" : ""}`}
> >
...@@ -414,7 +269,6 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -414,7 +269,6 @@ export default function Navigation({ collectionsData = [] }) {
</Link> </Link>
<Link <Link
href="/connect" href="/connect"
className={`nav-link ${activeMenu === "connect" ? "active" : ""}`} className={`nav-link ${activeMenu === "connect" ? "active" : ""}`}
> >
...@@ -423,31 +277,6 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -423,31 +277,6 @@ export default function Navigation({ collectionsData = [] }) {
</Nav> </Nav>
</div> </div>
{/* Right side */}
{/* <div className="d-none d-lg-flex align-items-center gap-4">
<Nav.Link as={Link} href="/" onClick={() => setShow(false)}>
About
</Nav.Link>
<Nav.Link as={Link} href="/" onClick={() => setShow(false)}>
Catalogue
</Nav.Link>
<Nav.Link as={Link} href="/" onClick={() => setShow(false)}>
Contacts
</Nav.Link>
<Dropdown>
<Dropdown.Toggle variant="link" id="language-dropdown">
English
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/en">English</Dropdown.Item>
<Dropdown.Item href="#/fr">Français</Dropdown.Item>
<Dropdown.Item href="#/de">Deutsch</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div> */}
{/* Mobile Toggle */} {/* Mobile Toggle */}
<Navbar.Toggle onClick={() => setShow(true)} /> <Navbar.Toggle onClick={() => setShow(true)} />
</Container> </Container>
...@@ -529,6 +358,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -529,6 +358,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={8} width={8}
height={12} height={12}
alt=""
src="/image/icons/nav-arrow-left.svg" src="/image/icons/nav-arrow-left.svg"
/> />
</span>{" "} </span>{" "}
...@@ -562,6 +392,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -562,6 +392,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={8} width={8}
height={12} height={12}
alt=""
src="/image/icons/nav-arrow-left.svg" src="/image/icons/nav-arrow-left.svg"
/> />
</span>{" "} </span>{" "}
...@@ -612,17 +443,17 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -612,17 +443,17 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={8} width={8}
height={12} height={12}
alt=""
src="/image/icons/nav-arrow-left.svg" src="/image/icons/nav-arrow-left.svg"
/> />
</span>{" "} </span>{" "}
<span>{activeCollection.categoryName}</span> <span>{activeCollection?.categoryName}</span>
{/* ‹ {activeCollection.categoryName} */}
</button> </button>
{activeSubCollection.products.map((p) => ( {activeSubCollection?.products?.map((p) => (
<Link <Link
key={p.productSlug} key={p.productSlug}
href={`/collections/${activeCollection.categorySlug}/${activeSubCollection.subCategorySlug}/${p.productSlug}`} href={`/collections/${activeCollection?.categorySlug}/${activeSubCollection?.subCategorySlug}/${p.productSlug}`}
className="menu-item" className="menu-item"
onClick={() => setShow(false)} onClick={() => setShow(false)}
> >
...@@ -643,11 +474,11 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -643,11 +474,11 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={8} width={8}
height={12} height={12}
alt=""
src="/image/icons/nav-arrow-left.svg" src="/image/icons/nav-arrow-left.svg"
/> />
</span>{" "} </span>{" "}
<span>{backLabel}</span> <span>{backLabel}</span>
{/* ‹ {backLabel} */}
</button> </button>
{brandsData.map((brand) => ( {brandsData.map((brand) => (
...@@ -677,20 +508,18 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -677,20 +508,18 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={8} width={8}
height={12} height={12}
alt=""
src="/image/icons/nav-arrow-left.svg" src="/image/icons/nav-arrow-left.svg"
/> />
</span>{" "} </span>{" "}
<span>Brands</span> <span>Brands</span>
{/* ‹ Brands */}
</button> </button>
<Link href="/brands/valcucine"> <Link href="/brands/valcucine">
<Image <Image
width={177} width={177}
height={60} height={60}
alt="valcucine"
src="/image/header-logo/valcucine.png" src="/image/header-logo/valcucine.png"
/> />
</Link> </Link>
...@@ -698,6 +527,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -698,6 +527,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={177} width={177}
height={60} height={60}
alt="rimadesio"
src="/image/header-logo/rimadesio.png" src="/image/header-logo/rimadesio.png"
/> />
</Link> </Link>
...@@ -705,11 +535,10 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -705,11 +535,10 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={177} width={177}
height={60} height={60}
alt="inalco"
src="/image/header-logo/inalco.png" src="/image/header-logo/inalco.png"
/> />
</Link> </Link>
</> </>
)} )}
</Nav> </Nav>
...@@ -718,21 +547,3 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -718,21 +547,3 @@ export default function Navigation({ collectionsData = [] }) {
</> </>
); );
} }
export async function getServerSideProps({ params }) {
try {
const { category } = params;
const collectionsData = await getCollectionPageData(category);
return {
props: {
collectionsData,
},
};
} catch (error) {
return {
props: {
collectionsData: [],
},
};
}
}
components/StoneFinishCabinet/Details.js
...@@ -40,7 +40,7 @@ const Details = ({DetailsItem,bottomInfo}) => { ...@@ -40,7 +40,7 @@ const Details = ({DetailsItem,bottomInfo}) => {
{/* Image */} {/* Image */}
<div className={`col-md-7 mb-4 mb-md-0 ${!isEven ? 'order-md-2' : ''}`}> <div className={`col-md-7 mb-4 mb-md-0 ${!isEven ? 'order-md-2' : ''}`}>
<div className='stain-Details-image'> <div className='stain-Details-image'>
<img className='img-fluid' src={cleanImage(item?.image?.url)} alt={item?.title || ''} /> <img className='img-fluid w-100' src={cleanImage(item?.image?.url)} alt={item?.title || ''} />
</div> </div>
</div> </div>
{/* Content */} {/* Content */}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!