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 }) => {
return (
<Col
key={item?.id}
// xs={6}
xs={isFullWidth ? 12 : 6}
className="mb-4"
>
......
components/Layout/Header.js
......@@ -6,173 +6,33 @@ import {
Nav,
Container,
Offcanvas,
Button,
Row,
Col,
Dropdown,
} from "react-bootstrap";
import Link from "next/link";
import { usePathname } from "next/navigation";
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 { getCollectionPageData } from "@/services/collectionApi";
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 = [] }) {
const pathname = usePathname();
const path = pathname?.split("?")[0].replace(/\/$/, "") || "";
const segments = path.split("/").filter(Boolean);
const [scrolled, setScrolled] = 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 [brandL1, setBrandL1] = useState(brandsData[0]);
const [collectionL1, setCollectionL1] = useState(collectionsData?.[0] ?? null);
const [collectionL2, setCollectionL2] = useState(collectionsData?.[0]?.subCategories?.[0] ?? null);
const [mobileStep, setMobileStep] = useState("main");
const [backLabel, setBackLabel] = useState("Menu");
const [activeCollection, setActiveCollection] = 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 = "";
if (segments[0] === "collections") activeMenu = "collections";
else if (segments[0] === "brands") activeMenu = "brands";
else if (path === "/about") activeMenu = "about";
......@@ -185,16 +45,13 @@ export default function Navigation({ collectionsData = [] }) {
return () => window.removeEventListener("scroll", onScroll);
}, []);
// const handleMenuClick = (menu) => {
// setActiveMenu((prev) => (prev === menu ? null : menu));
// };
const dispatch = useDispatch();
useEffect(() => {
// dispatch(fetchHeader());
}, []);
const headerData = useSelector((state) => state.header.data);
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;
setCollectionL1(cat);
setCollectionL2(sub);
}, [pathname]);
const showLevel3 = collectionL2?.products?.length > 0;
......@@ -221,8 +78,14 @@ export default function Navigation({ collectionsData = [] }) {
<Nav.Item
className="nav-item dropdown-custom"
onMouseEnter={() => {
setCollectionL1(collectionsData[0]);
setCollectionL2(collectionsData[0]?.subCategories[0]);
const activeCat =
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
......@@ -235,7 +98,7 @@ export default function Navigation({ collectionsData = [] }) {
<div className="dropdown-menu">
<div className="dropdown-menu-inner custom_container">
<Row>
<Col md={showLevel3 ? 8 : 8}>
<Col md={8}>
<Row>
<Col md={4}>
<h6 className="nav-head01">Collections</h6>
......@@ -292,7 +155,7 @@ export default function Navigation({ collectionsData = [] }) {
<Link
href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`}
className={
segments[3] === product.productSlug ? "active" : ""
segments[3] === product.productSlug?.trim() ? "active" : ""
}
>
{product.title}
......@@ -311,7 +174,8 @@ export default function Navigation({ collectionsData = [] }) {
?.slice(0, 2)
.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<Link className="header-rt-image"
<Link
className="header-rt-image"
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)}
>
......@@ -335,12 +199,7 @@ export default function Navigation({ collectionsData = [] }) {
</div>
</Nav.Item>
<Nav.Item
className="nav-item dropdown-custom"
onMouseEnter={() => {
setBrandL1(brandsData[0]);
}}
>
<Nav.Item className="nav-item dropdown-custom">
<Link
href="/brands/valcucine"
className={`nav-link ${activeMenu === "brands" ? "active" : ""}`}
......@@ -394,11 +253,8 @@ export default function Navigation({ collectionsData = [] }) {
</div>
</div>
</Nav.Item>
{/* <Nav.Link as={Link} href="/brands/doors">
Brands
</Nav.Link> */}
<Link
<Link
href="/about"
className={`nav-link ${activeMenu === "about" ? "active" : ""}`}
>
......@@ -406,7 +262,6 @@ export default function Navigation({ collectionsData = [] }) {
</Link>
<Link
href="/catalogue"
className={`nav-link ${activeMenu === "catalogue" ? "active" : ""}`}
>
......@@ -414,7 +269,6 @@ export default function Navigation({ collectionsData = [] }) {
</Link>
<Link
href="/connect"
className={`nav-link ${activeMenu === "connect" ? "active" : ""}`}
>
......@@ -423,31 +277,6 @@ export default function Navigation({ collectionsData = [] }) {
</Nav>
</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 */}
<Navbar.Toggle onClick={() => setShow(true)} />
</Container>
......@@ -529,6 +358,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={8}
height={12}
alt=""
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
......@@ -562,6 +392,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={8}
height={12}
alt=""
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
......@@ -612,17 +443,17 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={8}
height={12}
alt=""
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
<span>{activeCollection.categoryName}</span>
{/* ‹ {activeCollection.categoryName} */}
<span>{activeCollection?.categoryName}</span>
</button>
{activeSubCollection.products.map((p) => (
{activeSubCollection?.products?.map((p) => (
<Link
key={p.productSlug}
href={`/collections/${activeCollection.categorySlug}/${activeSubCollection.subCategorySlug}/${p.productSlug}`}
href={`/collections/${activeCollection?.categorySlug}/${activeSubCollection?.subCategorySlug}/${p.productSlug}`}
className="menu-item"
onClick={() => setShow(false)}
>
......@@ -643,11 +474,11 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={8}
height={12}
alt=""
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
<span>{backLabel}</span>
{/* ‹ {backLabel} */}
</button>
{brandsData.map((brand) => (
......@@ -677,20 +508,18 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={8}
height={12}
alt=""
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
<span>Brands</span>
{/* ‹ Brands */}
</button>
<Link href="/brands/valcucine">
<Image
width={177}
height={60}
alt="valcucine"
src="/image/header-logo/valcucine.png"
/>
</Link>
......@@ -698,6 +527,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={177}
height={60}
alt="rimadesio"
src="/image/header-logo/rimadesio.png"
/>
</Link>
......@@ -705,11 +535,10 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={177}
height={60}
alt="inalco"
src="/image/header-logo/inalco.png"
/>
</Link>
</>
)}
</Nav>
......@@ -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}) => {
{/* Image */}
<div className={`col-md-7 mb-4 mb-md-0 ${!isEven ? 'order-md-2' : ''}`}>
<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>
{/* Content */}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!