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() { ...@@ -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,11 +192,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -193,11 +192,14 @@ 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
setCollectionL1(collectionsData[0]); className="nav-item dropdown-custom"
setCollectionL2(collectionsData[0].subCategories[0]); onMouseEnter={() => {
}}> setCollectionL1(collectionsData[0]);
<Link setCollectionL2(collectionsData[0].subCategories[0]);
}}
>
<Link
href={ href={
collectionsData?.length collectionsData?.length
? `/collections/${collectionsData[0].categorySlug}` ? `/collections/${collectionsData[0].categorySlug}`
...@@ -223,11 +225,12 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -223,11 +225,12 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
<Link <Link
href={`/collections/${cat.categorySlug}`} href={`/collections/${cat.categorySlug}`}
onMouseEnter={() => { onMouseEnter={() => {
setCollectionL1(cat); setCollectionL1(cat);
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,24 +282,27 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -279,24 +282,27 @@ 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
<Col md={6} key={sub.subCategorySlug}> ?.slice(0, 2)
<Link .map((sub) => (
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`} <Col md={6} key={sub.subCategorySlug}>
onMouseEnter={() => setCollectionL2(sub)} <Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
> onMouseEnter={() => setCollectionL2(sub)}
<Image >
src={sub.subCategoryImage} <Image
width={260} src={sub.subCategoryImage}
height={280} width={260}
alt={sub.subCategoryName} height={280}
className="img-fluid" alt={sub.subCategoryName}
/> className="img-fluid"
<p className="img-head mt-1">{sub.subCategoryName}</p> />
</Link> <p className="img-head mt-1">
</Col> {sub.subCategoryName}
))} </p>
</Link>
</Col>
))}
</Row> </Row>
</Col> </Col>
</Row> </Row>
...@@ -304,12 +310,15 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -304,12 +310,15 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
</div> </div>
</Nav.Item> </Nav.Item>
<Nav.Item className="nav-item dropdown-custom" onMouseEnter={() => { <Nav.Item
setBrandL1(brandsData[0]); className="nav-item dropdown-custom"
}}> onMouseEnter={() => {
<Link href="/brands" className="nav-link" > setBrandL1(brandsData[0]);
Brands }}
</Link> >
<Link href="/brands" className="nav-link">
Brands
</Link>
<div className="dropdown-menu"> <div className="dropdown-menu">
<div className="dropdown-menu-inner custom_container"> <div className="dropdown-menu-inner custom_container">
...@@ -317,22 +326,26 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -317,22 +326,26 @@ 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}>
<Link <Link
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} : ""
</Link> }
</li> >
))} {brand.categoryName}
</Link>
</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>
))} ))}
...@@ -471,14 +486,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]); ...@@ -471,14 +486,14 @@ const [brandL1, setBrandL1] = useState(brandsData[0]);
> >
About About
</Link> </Link>
<Link <Link
href="/about" href="/about"
className="menu-item" className="menu-item"
onClick={() => setShow(false)} onClick={() => setShow(false)}
> >
Catalogue Catalogue
</Link> </Link>
<Link <Link
href="/contacts" href="/contacts"
className="menu-item" className="menu-item"
onClick={() => setShow(false)} onClick={() => setShow(false)}
...@@ -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!