34 lines
1.5 KiB
TypeScript
34 lines
1.5 KiB
TypeScript
'use client';
|
|
import Link from "next/link";
|
|
|
|
import { FC } from "react";
|
|
import { MenuSingleProps, SingleLayerItemProps } from "@/validations/mutual/dashboard/props";
|
|
import { langGetKey } from "@/lib/langGet";
|
|
|
|
const SingleLayerItem: FC<SingleLayerItemProps> = ({ isActive, innerText, url }) => {
|
|
let className = "py-3 px-4 text-sm rounded-xl cursor-pointer transition-colors duration-200 flex justify-between items-center w-full";
|
|
if (isActive) { className += " bg-black text-white font-medium" }
|
|
else { className += " bg-emerald-800 text-white hover:bg-emerald-700" }
|
|
if (isActive) { return <div className={className}><span>{innerText}</span></div> }
|
|
else { return <Link href={url} replace className={className}><span>{innerText}</span></Link> }
|
|
};
|
|
|
|
const MenuComponent: FC<MenuSingleProps> = ({ lang, activePageUrl, translations, menuItems, prefix }) => {
|
|
|
|
const renderMenuItems = () => {
|
|
return Object.keys(menuItems).map((key) => {
|
|
const url = `${prefix}/${lang}${menuItems[key]}`;
|
|
const isActive = `${activePageUrl}` === `${key}`;
|
|
return <div key={`${key}-item`} className="mb-2"><SingleLayerItem isActive={isActive} innerText={langGetKey(translations, key)} url={url} /></div>
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="fixed top-24 p-5 left-0 right-0 w-80 border-emerald-150 border-r-2 overflow-y-auto h-[calc(100vh-6rem)]">
|
|
<div className="flex flex-col">{renderMenuItems()}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MenuComponent;
|