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