90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
import React from "react";
|
|
import "../css/Navigation.css";
|
|
import { useState } from "react";
|
|
import AddressCardIcon from "../assets/icons/navIcons/address-card.svg?react";
|
|
import CodeIcon from "../assets/icons/navIcons/code.svg?react";
|
|
import EnvelopeIcon from "../assets/icons/navIcons/envelope.svg?react";
|
|
import HouseIcon from "../assets/icons/navIcons/house.svg?react";
|
|
import SuitcaseIcon from "../assets/icons/navIcons/suitcase.svg?react";
|
|
import DownloadIcon from "../assets/icons/navIcons/download.svg?react";
|
|
import { NavLink } from "react-router-dom";
|
|
import clsx from "clsx";
|
|
import { useTheme } from "../Context/ThemeContext";
|
|
import { useLang } from "../Context/LangContext";
|
|
|
|
const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
|
|
const [animation, setAnimation] = useState(initialAnimation);
|
|
|
|
const { colormode } = useTheme();
|
|
|
|
const navItems = [
|
|
{ name: { enGB: "Home", deDE: "Start" }, to: "/", icon: HouseIcon, id: 1 },
|
|
{
|
|
name: { enGB: "About", deDE: "Über Mich" },
|
|
to: "/about",
|
|
icon: AddressCardIcon,
|
|
id: 2,
|
|
},
|
|
{
|
|
name: { enGB: "Experience", deDE: "Erfahrung" },
|
|
to: "/workExp",
|
|
icon: SuitcaseIcon,
|
|
id: 3,
|
|
},
|
|
{
|
|
name: { enGB: "Projects", deDE: "Projekte" },
|
|
to: "/projects",
|
|
icon: CodeIcon,
|
|
id: 4,
|
|
},
|
|
{
|
|
name: { enGB: "Contact", deDE: "Kontakt" },
|
|
to: "/contact",
|
|
icon: EnvelopeIcon,
|
|
id: 5,
|
|
},
|
|
{
|
|
name: { enGB: "CV", deDE: "Lebenslauf" },
|
|
to: "",
|
|
icon: DownloadIcon,
|
|
id: 6,
|
|
},
|
|
];
|
|
|
|
const { language } = useLang();
|
|
return (
|
|
<div
|
|
className={`navigation container animate__animated ${animation} ${colormode}`}
|
|
/* onMouseEnter={() => onMouseEnter(setAnimation)} */
|
|
onAnimationEnd={() => onAnimationEnd(setAnimation)}
|
|
>
|
|
<ul className="navList">
|
|
{navItems.map((item) => {
|
|
const IconComponent = item.icon;
|
|
return (
|
|
<li className="navItem" key={item.id}>
|
|
<NavLink
|
|
to={item.to}
|
|
className={({ isActive }) =>
|
|
clsx(
|
|
"navLink",
|
|
{ active: isActive },
|
|
item.name.enGB === "CV" && "cv" // Add "cv" class if item.name is "CV"
|
|
)
|
|
}
|
|
>
|
|
<span>
|
|
{language === "en-GB" ? item.name.enGB : item.name.deDE}
|
|
</span>{" "}
|
|
<IconComponent className="navIcon" />
|
|
</NavLink>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|