File size: 2,622 Bytes
f332108 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import React, { Component } from "react";
import AboutMenuItem from "./AboutMenuItem";
import AboutSubheading from "./AboutSubheading";
import Popup from "./Popup"; // Import the Popup component
import subheadingsData from "./subheadingsData";
import personalIcon from "../assets/moebius-triangle.png";
import educationIcon from "../assets/upgrade.png";
import careerIcon from "../assets/triple-corn.png";
import chatIcon from "../assets/chat-icon.png"; // Import your chat icon or use an appropriate path
import axios from 'axios';
export default class AboutMenu extends Component {
constructor(props) {
super(props);
this.state = {
activeMenuItem: 1,
activeSubheading: 1,
};
}
handleMenuItemClick = (menuItem) => {
this.setState({
activeMenuItem: menuItem,
activeSubheading: menuItem === 4 ? this.state.activeSubheading : 1
});
};
handleSubheadingClick = (subheading) => {
this.setState({
activeSubheading: subheading,
});
};
render() {
const { activeMenuItem, activeSubheading } = this.state;
const menuItems = ["PERSONAL", "EDUCATION", "CAREER", "CHAT"];
const activeMenuTitle = menuItems[activeMenuItem - 1];
const activeMenuIcon =
activeMenuTitle === "PERSONAL"
? personalIcon
: activeMenuTitle === "EDUCATION"
? educationIcon
: activeMenuTitle === "CAREER"
? careerIcon
: chatIcon;
const isChatActive = activeMenuItem === 4;
const subheadings = subheadingsData[activeMenuItem];
return (
<>
<div className="menu">
{menuItems.map((item, index) => (
<AboutMenuItem
key={index}
title={item}
active={activeMenuItem === index + 1}
onClick={() => this.handleMenuItemClick(index + 1)}
/>
))}
</div>
<div className="sub-container">
<div className="icon-title-container">
<img src={activeMenuIcon} alt={activeMenuTitle} className="icon" />
<h3>{activeMenuTitle}</h3>
</div>
{isChatActive ? (
<Popup />
) : (
subheadings.map((subheading, index) => (
<AboutSubheading
key={index}
title={subheading.title}
content={subheading.content}
active={activeSubheading === index + 1}
onClick={() => this.handleSubheadingClick(index + 1)}
menuItem={activeMenuItem}
/>
))
)}
</div>
</>
);
}
}
|