Skip to content

sujata / Akruti-Frontend

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

updated menu

1 parent b18a0350
Inline Side-by-side
Showing 3 changed files with 71 additions and 70 deletions
components/Layout/Header.js
...@@ -133,8 +133,15 @@ export default function Navigation() { ...@@ -133,8 +133,15 @@ 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);
const [level1, setLevel1] = useState(collectionsData[0]); // COLLECTION
const [level2, setLevel2] = useState(collectionsData[0].subCategories[0]); 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"); const [mobileStep, setMobileStep] = useState("main");
...@@ -186,7 +193,10 @@ export default function Navigation() { ...@@ -186,7 +193,10 @@ export default function Navigation() {
/> />
</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"> <Nav.Item className="nav-item dropdown-custom" onMouseEnter={() => {
setCollectionL1(collectionsData[0]);
setCollectionL2(collectionsData[0].subCategories[0]);
}}>
<Link <Link
href={ href={
collectionsData?.length collectionsData?.length
...@@ -213,11 +223,11 @@ export default function Navigation() { ...@@ -213,11 +223,11 @@ export default function Navigation() {
<Link <Link
href={`/collections/${cat.categorySlug}`} href={`/collections/${cat.categorySlug}`}
onMouseEnter={() => { onMouseEnter={() => {
setLevel1(cat); setCollectionL1(cat);
setLevel2(cat.subCategories[0]); setCollectionL2(cat.subCategories[0]); // reset level 2
}} }}
className={ className={
level1.categorySlug === cat.categorySlug collectionL1.categorySlug === cat.categorySlug
? "active" ? "active"
: "" : ""
} }
...@@ -229,18 +239,16 @@ export default function Navigation() { ...@@ -229,18 +239,16 @@ export default function Navigation() {
</ul> </ul>
</Col> </Col>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01"> <h6>{collectionL1.categoryName}</h6>
{level1.categoryName}
</h6>
<ul className="navList01"> <ul className="navList01">
{level1.subCategories.map((sub) => ( {collectionL1.subCategories.map((sub) => (
<li key={sub.subCategorySlug}> <li key={sub.subCategorySlug}>
<Link <Link
href={`/collections/${level1.categorySlug}/${sub.subCategorySlug}`} href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setLevel2(sub)} onMouseEnter={() => setCollectionL2(sub)}
className={ className={
level2.subCategorySlug === collectionL2.subCategorySlug ===
sub.subCategorySlug sub.subCategorySlug
? "active" ? "active"
: "" : ""
...@@ -253,15 +261,13 @@ export default function Navigation() { ...@@ -253,15 +261,13 @@ export default function Navigation() {
</ul> </ul>
</Col> </Col>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01"> <h6>{collectionL2.subCategoryName}</h6>
{level2.subCategoryName}
</h6>
<ul className="navList01"> <ul className="navList01">
{level2.products.map((product) => ( {collectionL2.products.map((product) => (
<li key={product.productSlug}> <li key={product.productSlug}>
<Link <Link
href={`/collections/${level1.categorySlug}/${level2.subCategorySlug}/${product.productSlug}`} href={`/collections/${collectionL1.categorySlug}/${collectionL2.subCategorySlug}/${product.productSlug}`}
> >
{product.title} {product.title}
</Link> </Link>
...@@ -273,11 +279,12 @@ export default function Navigation() { ...@@ -273,11 +279,12 @@ export default function Navigation() {
</Col> </Col>
<Col md={4}> <Col md={4}>
<Row> <Row>
{level1.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/${level1.categorySlug}/${sub.subCategorySlug}`} href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setLevel2(sub)} onMouseEnter={() => setCollectionL2(sub)}
> >
<Image <Image
src={sub.subCategoryImage} src={sub.subCategoryImage}
...@@ -286,7 +293,7 @@ export default function Navigation() { ...@@ -286,7 +293,7 @@ export default function Navigation() {
alt={sub.subCategoryName} alt={sub.subCategoryName}
className="img-fluid" className="img-fluid"
/> />
<p className="mt-1">{sub.subCategoryName}</p> <p className="img-head mt-1">{sub.subCategoryName}</p>
</Link> </Link>
</Col> </Col>
))} ))}
...@@ -297,18 +304,12 @@ export default function Navigation() { ...@@ -297,18 +304,12 @@ export default function Navigation() {
</div> </div>
</Nav.Item> </Nav.Item>
<Nav.Item className="nav-item dropdown-custom"> <Nav.Item className="nav-item dropdown-custom" onMouseEnter={() => {
<Link setBrandL1(brandsData[0]);
href={ }}>
collectionsData?.length <Link href="/brands" className="nav-link" >
? `/collections/${brandsData[0].categorySlug}` Brands
: "#" </Link>
}
className="nav-link"
onClick={() => setShow(false)}
>
Brands
</Link>
<div className="dropdown-menu"> <div className="dropdown-menu">
<div className="dropdown-menu-inner custom_container"> <div className="dropdown-menu-inner custom_container">
...@@ -316,37 +317,34 @@ export default function Navigation() { ...@@ -316,37 +317,34 @@ export default function Navigation() {
<Col md={8}> <Col md={8}>
<Row> <Row>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01">Brands</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={() => setLevel1(brand)} onMouseEnter={() => setBrandL1(brand)}
className={ className={
level1?.categorySlug === brandL1?.categorySlug === brand.categorySlug ? "active" : ""
brand.categorySlug }
? "active" >
: "" {brand.categoryName}
} </Link>
> </li>
{brand.categoryName} ))}
</Link>
</li>
))}
</ul> </ul>
</Col> </Col>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01"> <h6 className="nav-head01">
{level1?.categoryName} {brandL1?.categoryName}
</h6> </h6>
<ul className="navList01"> <ul className="navList01">
{level1?.subCategories?.map((sub) => ( {brandL1?.subCategories?.map((sub) => (
<li key={sub.subCategorySlug}> <li key={sub.subCategorySlug}>
<Link <Link
href={`/brands/${level1.categorySlug}/${sub.subCategorySlug}`} href={`/brands/${brandL1.categorySlug}/${sub.subCategorySlug}`}
> >
{sub.subCategoryName} {sub.subCategoryName}
</Link> </Link>
...@@ -358,10 +356,10 @@ export default function Navigation() { ...@@ -358,10 +356,10 @@ export default function Navigation() {
</Col> </Col>
<Col md={4}> <Col md={4}>
<Row> <Row>
{level1?.subCategories?.slice(0, 2).map((sub) => ( {brandL1?.subCategories?.slice(0, 2).map((sub) => (
<Col md={6} key={sub.subCategorySlug}> <Col md={6} key={sub.subCategorySlug}>
<Link <Link
href={`/brands/${level1.categorySlug}/${sub.subCategorySlug}`} href={`/brands/${brandL1.categorySlug}/${sub.subCategorySlug}`}
> >
<Image <Image
src={sub.subCategoryImage} src={sub.subCategoryImage}
...@@ -370,7 +368,7 @@ export default function Navigation() { ...@@ -370,7 +368,7 @@ export default function Navigation() {
alt={sub.subCategoryName} alt={sub.subCategoryName}
className="img-fluid" className="img-fluid"
/> />
<p className="mt-1">{sub.subCategoryName}</p> <p className="mt-1 img-head">{sub.subCategoryName}</p>
</Link> </Link>
</Col> </Col>
))} ))}
......
components/data/collectionsData.js
...@@ -90,8 +90,8 @@ export const collectionsData = [ ...@@ -90,8 +90,8 @@ export const collectionsData = [
categoryName: "Wardrobes", categoryName: "Wardrobes",
subCategories: [ subCategories: [
{ {
subCategorySlug: "indoor-kitchens", subCategorySlug: "cabinet-free-wardrobes",
subCategoryName: "Indoor Kitchens", subCategoryName: "Cabinet Free Wardrobes",
subCategoryImage: "/image/collection-page/indoor-kitchens.png", subCategoryImage: "/image/collection-page/indoor-kitchens.png",
products: [ products: [
{ {
...@@ -122,8 +122,8 @@ export const collectionsData = [ ...@@ -122,8 +122,8 @@ export const collectionsData = [
], ],
}, },
{ {
subCategorySlug: "outdoor-kitchens", subCategorySlug: "glass-wardrobes ",
subCategoryName: "Outdoor Kitchens", subCategoryName: "Glass Wardrobes ",
subCategoryImage: "/image/collection-page/outdoor-kitchens.png", subCategoryImage: "/image/collection-page/outdoor-kitchens.png",
products: [ products: [
{ {
...@@ -134,8 +134,8 @@ export const collectionsData = [ ...@@ -134,8 +134,8 @@ export const collectionsData = [
], ],
}, },
{ {
subCategorySlug: "pantry-and-coffee-bar", subCategorySlug: "open-wardrobes",
subCategoryName: "Pantry and coffee bar", subCategoryName: "Open Wardrobes",
subCategoryImage: "/image/collection-page/pantry.png", subCategoryImage: "/image/collection-page/pantry.png",
products: [ products: [
{ {
...@@ -146,8 +146,8 @@ export const collectionsData = [ ...@@ -146,8 +146,8 @@ export const collectionsData = [
], ],
}, },
{ {
subCategorySlug: "sepecial-elements", subCategorySlug: "walk-in-wardrobes",
subCategoryName: "Sepecial Elements", subCategoryName: "Walk-in Wardrobes",
subCategoryImage: "/image/collection-page/special-elements.png", subCategoryImage: "/image/collection-page/special-elements.png",
products: [ products: [
{ {
...@@ -158,8 +158,8 @@ export const collectionsData = [ ...@@ -158,8 +158,8 @@ export const collectionsData = [
], ],
}, },
{ {
subCategorySlug: "kitchen-accessories", subCategorySlug: "islands",
subCategoryName: "Kitchen Accessories", subCategoryName: "Islands",
subCategoryImage: "/image/collection-page/kitchchen-Accessories.png", subCategoryImage: "/image/collection-page/kitchchen-Accessories.png",
products: [ products: [
{ {
......
styles/globals.css
...@@ -560,7 +560,7 @@ input:focus-visible { ...@@ -560,7 +560,7 @@ input:focus-visible {
padding: 0; padding: 0;
} }
.navList01 li{ .navList01 li{
padding: 0.4rem 0; padding: 0.3rem 0;
} }
.navList01 a { .navList01 a {
color: #000; color: #000;
...@@ -677,7 +677,10 @@ input:focus-visible { ...@@ -677,7 +677,10 @@ input:focus-visible {
.copyright{ .copyright{
font-size: 14px; font-size: 14px;
} }
.custom-navbar .dropdown-menu-inner .img-head{
color: #000;
text-transform: uppercase;
}
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
} }
/* ===== Mobile ===== */ /* ===== Mobile ===== */
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!