client frontend added

y-trash/management_frontend copy/src/components/custom/menu/single/component.tsx

@@ -0,0 +1,33 @@
+'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;