Skip to content

sujata / Akruti-Frontend

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

updated menu

1 parent 02033113
Inline Side-by-side
Showing 1 changed file with 115 additions and 65 deletions
components/Layout/Header.js
......@@ -133,15 +133,14 @@ 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]
);
// BRANDS
const [brandL1, setBrandL1] = useState(brandsData[0]);
// COLLECTION
const [collectionL1, setCollectionL1] = useState(collectionsData[0]);
const [collectionL2, setCollectionL2] = useState(
collectionsData[0].subCategories[0],
);
// BRANDS
const [brandL1, setBrandL1] = useState(brandsData[0]);
const [mobileStep, setMobileStep] = useState("main");
......@@ -193,11 +192,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
/>
</Navbar.Brand>
<Nav className="d-none d-lg-flex ms-4 gap-4">
<Nav.Item className="nav-item dropdown-custom" onMouseEnter={() => {
setCollectionL1(collectionsData[0]);
setCollectionL2(collectionsData[0].subCategories[0]);
}}>
<Link
<Nav.Item
className="nav-item dropdown-custom"
onMouseEnter={() => {
setCollectionL1(collectionsData[0]);
setCollectionL2(collectionsData[0].subCategories[0]);
}}
>
<Link
href={
collectionsData?.length
? `/collections/${collectionsData[0].categorySlug}`
......@@ -223,11 +225,12 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
<Link
href={`/collections/${cat.categorySlug}`}
onMouseEnter={() => {
setCollectionL1(cat);
setCollectionL2(cat.subCategories[0]); // reset level 2
}}
setCollectionL1(cat);
setCollectionL2(cat.subCategories[0]); // reset level 2
}}
className={
collectionL1.categorySlug === cat.categorySlug
collectionL1.categorySlug ===
cat.categorySlug
? "active"
: ""
}
......@@ -239,7 +242,7 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
</ul>
</Col>
<Col md={4}>
<h6>{collectionL1.categoryName}</h6>
<h6 className="nav-head01">{collectionL1.categoryName}</h6>
<ul className="navList01">
{collectionL1.subCategories.map((sub) => (
......@@ -261,7 +264,7 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
</ul>
</Col>
<Col md={4}>
<h6>{collectionL2.subCategoryName}</h6>
<h6 className="nav-head01">{collectionL2.subCategoryName}</h6>
<ul className="navList01">
{collectionL2.products.map((product) => (
......@@ -279,24 +282,27 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
</Col>
<Col md={4}>
<Row>
{collectionL1.subCategories?.slice(0, 2).map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)}
>
<Image
src={sub.subCategoryImage}
width={260}
height={280}
alt={sub.subCategoryName}
className="img-fluid"
/>
<p className="img-head mt-1">{sub.subCategoryName}</p>
</Link>
</Col>
))}
{collectionL1.subCategories
?.slice(0, 2)
.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)}
>
<Image
src={sub.subCategoryImage}
width={260}
height={280}
alt={sub.subCategoryName}
className="img-fluid"
/>
<p className="img-head mt-1">
{sub.subCategoryName}
</p>
</Link>
</Col>
))}
</Row>
</Col>
</Row>
......@@ -304,12 +310,15 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
</div>
</Nav.Item>
<Nav.Item className="nav-item dropdown-custom" onMouseEnter={() => {
setBrandL1(brandsData[0]);
}}>
<Link href="/brands" className="nav-link" >
Brands
</Link>
<Nav.Item
className="nav-item dropdown-custom"
onMouseEnter={() => {
setBrandL1(brandsData[0]);
}}
>
<Link href="/brands" className="nav-link">
Brands
</Link>
<div className="dropdown-menu">
<div className="dropdown-menu-inner custom_container">
......@@ -317,22 +326,26 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
<Col md={8}>
<Row>
<Col md={4}>
<h6 className="nav-head01">{brandL1.categoryName}</h6>
<h6 className="nav-head01">
{brandL1.categoryName}
</h6>
<ul className="navList01">
{brandsData.map((brand) => (
<li key={brand.categorySlug}>
<Link
href={`/brands/${brand.categorySlug}`}
onMouseEnter={() => setBrandL1(brand)}
className={
brandL1?.categorySlug === brand.categorySlug ? "active" : ""
}
>
{brand.categoryName}
</Link>
</li>
))}
<li key={brand.categorySlug}>
<Link
href={`/brands/${brand.categorySlug}`}
onMouseEnter={() => setBrandL1(brand)}
className={
brandL1?.categorySlug ===
brand.categorySlug
? "active"
: ""
}
>
{brand.categoryName}
</Link>
</li>
))}
</ul>
</Col>
<Col md={4}>
......@@ -368,7 +381,9 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
alt={sub.subCategoryName}
className="img-fluid"
/>
<p className="mt-1 img-head">{sub.subCategoryName}</p>
<p className="mt-1 img-head">
{sub.subCategoryName}
</p>
</Link>
</Col>
))}
......@@ -471,14 +486,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
>
About
</Link>
<Link
<Link
href="/about"
className="menu-item"
onClick={() => setShow(false)}
>
Catalogue
</Link>
<Link
<Link
href="/contacts"
className="menu-item"
onClick={() => setShow(false)}
......@@ -495,7 +510,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn"
onClick={() => setMobileStep("main")}
>
<span><Image width={8} height={12} src="/image/icons/nav-arrow-left.svg" /></span> <span>{backLabel}</span>
<span>
<Image
width={8}
height={12}
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
<span>{backLabel}</span>
</button>
{collectionsData.map((cat) => (
......@@ -521,7 +543,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn"
onClick={() => setMobileStep("collections")}
>
<span><Image width={8} height={12} src="/image/icons/nav-arrow-left.svg" /></span> <span>{backLabel}</span>
<span>
<Image
width={8}
height={12}
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
<span>{backLabel}</span>
</button>
{activeCollection.subCategories.map((sub) => (
......@@ -547,7 +576,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn"
onClick={() => setMobileStep("collection-sub")}
>
<span><Image width={8} height={12} src="/image/icons/nav-arrow-left.svg" /></span> <span>{activeCollection.categoryName}</span>
<span>
<Image
width={8}
height={12}
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
<span>{activeCollection.categoryName}</span>
{/* ‹ {activeCollection.categoryName} */}
</button>
......@@ -571,7 +607,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn"
onClick={() => setMobileStep("main")}
>
<span><Image width={8} height={12} src="/image/icons/nav-arrow-left.svg" /></span> <span>{backLabel}</span>
<span>
<Image
width={8}
height={12}
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
<span>{backLabel}</span>
{/* ‹ {backLabel} */}
</button>
......@@ -598,7 +641,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn"
onClick={() => setMobileStep("brands")}
>
<span><Image width={8} height={12} src="/image/icons/nav-arrow-left.svg" /></span> <span>Brands</span>
<span>
<Image
width={8}
height={12}
src="/image/icons/nav-arrow-left.svg"
/>
</span>{" "}
<span>Brands</span>
{/* ‹ Brands */}
</button>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!