89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
// NavBar.tsx
|
|
import React, { useState } from 'react';
|
|
import { RoutesEnums } from '../../enums/RoutesEnums';
|
|
import { MdLanguage } from 'react-icons/md';
|
|
import { FaEllipsis } from 'react-icons/fa6';
|
|
import { Popover } from 'antd';
|
|
import { navBar as navBarData, Setting } from '../../../data.json';
|
|
// Define an enum for the routes
|
|
|
|
// Define a type for the link objects
|
|
interface NavLink {
|
|
path: RoutesEnums;
|
|
label: string;
|
|
}
|
|
|
|
const NavBar: React.FC = () => {
|
|
// Define an array of link objects using the RoutesEnums
|
|
const links: NavLink[] = [
|
|
{ path: RoutesEnums.HOME, label: navBarData.link1 },
|
|
{ path: RoutesEnums.FEATURES, label: navBarData.link2 },
|
|
{ path: RoutesEnums.HOW_IT_WORK, label: navBarData.link3 },
|
|
{ path: RoutesEnums.SCREEN_SHOOT, label: navBarData.link4 },
|
|
{ path: RoutesEnums.NOTE, label: navBarData.link5 },
|
|
{ path: RoutesEnums.CONTACT, label: navBarData.link6 },
|
|
{ path: RoutesEnums.PRIVACY, label: navBarData.link7 },
|
|
{ path: RoutesEnums.DOWNLOAD, label: navBarData.link8 },
|
|
];
|
|
const [Open, setOpen] = useState(false);
|
|
const handleToggle = () => {
|
|
setOpen(!Open);
|
|
};
|
|
|
|
const NavBarContent = (
|
|
<div className="NavBarContent">
|
|
<ul className="NavBarLinks">
|
|
{links.map((link) => {
|
|
return (
|
|
<li
|
|
onClick={handleToggle}
|
|
key={link.path}
|
|
className={`${'activeLink'}`}
|
|
>
|
|
<a href={link.path}>{link.label}</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
|
|
const [Active, setActive] = useState(location.hash);
|
|
|
|
return (
|
|
<nav className="NavBar">
|
|
<img loading="lazy" src={Setting.Logo} className="scale" alt="" />
|
|
<ul className="NavBarLinks">
|
|
{links.map((link) => {
|
|
const handleClick = () => {
|
|
setActive(link.path);
|
|
};
|
|
|
|
const isActive =
|
|
Active === '' && link.path === '/#' ? true : Active === link.path;
|
|
return (
|
|
<li
|
|
key={link.path}
|
|
onClick={handleClick}
|
|
className={`${isActive ? 'activeLink' : ''}`}
|
|
>
|
|
<a href={link.path}>{link.label}</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
<div>
|
|
<MdLanguage />
|
|
<article>
|
|
<Popover open={Open} content={NavBarContent}>
|
|
<FaEllipsis onClick={handleToggle} />
|
|
</Popover>
|
|
</article>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default NavBar;
|