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 79 additions and 29 deletions
components/Layout/Header.js
...@@ -133,15 +133,14 @@ export default function Navigation() { ...@@ -133,15 +133,14 @@ 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],
); );
// BRANDS
const [brandL1, setBrandL1] = useState(brandsData[0]);
// BRANDS
const [brandL1, setBrandL1] = useState(brandsData[0]);
const [mobileStep, setMobileStep] = useState("main"); const [mobileStep, setMobileStep] = useState("main");
...@@ -193,10 +192,13 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -193,10 +192,13 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
/> />
</Navbar.Brand> </Navbar.Brand>
<Nav className="d-none d-lg-flex ms-4 gap-4"> <Nav className="d-none d-lg-flex ms-4 gap-4">
<Nav.Item className="nav-item dropdown-custom" onMouseEnter={() => { <Nav.Item
className="nav-item dropdown-custom"
onMouseEnter={() => {
setCollectionL1(collectionsData[0]); setCollectionL1(collectionsData[0]);
setCollectionL2(collectionsData[0].subCategories[0]); setCollectionL2(collectionsData[0].subCategories[0]);
}}> }}
>
<Link <Link
href={ href={
collectionsData?.length collectionsData?.length
...@@ -227,7 +229,8 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -227,7 +229,8 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
setCollectionL2(cat.subCategories[0]); // reset level 2 setCollectionL2(cat.subCategories[0]); // reset level 2
}} }}
className={ className={
collectionL1.categorySlug === cat.categorySlug collectionL1.categorySlug ===
cat.categorySlug
? "active" ? "active"
: "" : ""
} }
...@@ -239,7 +242,7 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -239,7 +242,7 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
</ul> </ul>
</Col> </Col>
<Col md={4}> <Col md={4}>
<h6>{collectionL1.categoryName}</h6> <h6 className="nav-head01">{collectionL1.categoryName}</h6>
<ul className="navList01"> <ul className="navList01">
{collectionL1.subCategories.map((sub) => ( {collectionL1.subCategories.map((sub) => (
...@@ -261,7 +264,7 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -261,7 +264,7 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
</ul> </ul>
</Col> </Col>
<Col md={4}> <Col md={4}>
<h6>{collectionL2.subCategoryName}</h6> <h6 className="nav-head01">{collectionL2.subCategoryName}</h6>
<ul className="navList01"> <ul className="navList01">
{collectionL2.products.map((product) => ( {collectionL2.products.map((product) => (
...@@ -279,12 +282,13 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -279,12 +282,13 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
</Col> </Col>
<Col md={4}> <Col md={4}>
<Row> <Row>
{collectionL1.subCategories?.slice(0, 2).map((sub) => ( {collectionL1.subCategories
?.slice(0, 2)
.map((sub) => (
<Col md={6} key={sub.subCategorySlug}> <Col md={6} key={sub.subCategorySlug}>
<Link <Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`} href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)} onMouseEnter={() => setCollectionL2(sub)}
> >
<Image <Image
src={sub.subCategoryImage} src={sub.subCategoryImage}
...@@ -293,7 +297,9 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -293,7 +297,9 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
alt={sub.subCategoryName} alt={sub.subCategoryName}
className="img-fluid" className="img-fluid"
/> />
<p className="img-head mt-1">{sub.subCategoryName}</p> <p className="img-head mt-1">
{sub.subCategoryName}
</p>
</Link> </Link>
</Col> </Col>
))} ))}
...@@ -304,10 +310,13 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -304,10 +310,13 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
</div> </div>
</Nav.Item> </Nav.Item>
<Nav.Item className="nav-item dropdown-custom" onMouseEnter={() => { <Nav.Item
className="nav-item dropdown-custom"
onMouseEnter={() => {
setBrandL1(brandsData[0]); setBrandL1(brandsData[0]);
}}> }}
<Link href="/brands" className="nav-link" > >
<Link href="/brands" className="nav-link">
Brands Brands
</Link> </Link>
...@@ -317,7 +326,9 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -317,7 +326,9 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
<Col md={8}> <Col md={8}>
<Row> <Row>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01">{brandL1.categoryName}</h6> <h6 className="nav-head01">
{brandL1.categoryName}
</h6>
<ul className="navList01"> <ul className="navList01">
{brandsData.map((brand) => ( {brandsData.map((brand) => (
<li key={brand.categorySlug}> <li key={brand.categorySlug}>
...@@ -325,14 +336,16 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -325,14 +336,16 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
href={`/brands/${brand.categorySlug}`} href={`/brands/${brand.categorySlug}`}
onMouseEnter={() => setBrandL1(brand)} onMouseEnter={() => setBrandL1(brand)}
className={ className={
brandL1?.categorySlug === brand.categorySlug ? "active" : "" brandL1?.categorySlug ===
brand.categorySlug
? "active"
: ""
} }
> >
{brand.categoryName} {brand.categoryName}
</Link> </Link>
</li> </li>
))} ))}
</ul> </ul>
</Col> </Col>
<Col md={4}> <Col md={4}>
...@@ -368,7 +381,9 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -368,7 +381,9 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
alt={sub.subCategoryName} alt={sub.subCategoryName}
className="img-fluid" className="img-fluid"
/> />
<p className="mt-1 img-head">{sub.subCategoryName}</p> <p className="mt-1 img-head">
{sub.subCategoryName}
</p>
</Link> </Link>
</Col> </Col>
))} ))}
...@@ -495,7 +510,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -495,7 +510,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn" className="back-btn"
onClick={() => setMobileStep("main")} 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> </button>
{collectionsData.map((cat) => ( {collectionsData.map((cat) => (
...@@ -521,7 +543,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -521,7 +543,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn" className="back-btn"
onClick={() => setMobileStep("collections")} 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> </button>
{activeCollection.subCategories.map((sub) => ( {activeCollection.subCategories.map((sub) => (
...@@ -547,7 +576,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -547,7 +576,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn" className="back-btn"
onClick={() => setMobileStep("collection-sub")} 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} */} {/* ‹ {activeCollection.categoryName} */}
</button> </button>
...@@ -571,7 +607,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -571,7 +607,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn" className="back-btn"
onClick={() => setMobileStep("main")} 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} */} {/* ‹ {backLabel} */}
</button> </button>
...@@ -598,7 +641,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -598,7 +641,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
className="back-btn" className="back-btn"
onClick={() => setMobileStep("brands")} 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 */} {/* ‹ Brands */}
</button> </button>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!