114 lines
4.5 KiB
TypeScript
114 lines
4.5 KiB
TypeScript
"use server";
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
|
|
import { Home } from "lucide-react";
|
|
import { transformMenu, LanguageTranslation } from "@/components/menu/runner";
|
|
|
|
async function LeftMenu({
|
|
searchParams,
|
|
pageUuidList,
|
|
lang,
|
|
pageSelected,
|
|
}: {
|
|
pageUuidList: string[];
|
|
lang: keyof LanguageTranslation;
|
|
searchParams: { [key: string]: string | string[] | undefined };
|
|
pageSelected: string;
|
|
}) {
|
|
const transformedMenu = transformMenu(pageUuidList) || [];
|
|
|
|
// Get the menuContext from searchParams without setting a default value
|
|
const menuContext = searchParams?.menu;
|
|
|
|
// Only parse the indices if menuContext exists
|
|
let firstLayerIndex = -1;
|
|
let secondLayerIndex = -1;
|
|
|
|
if (menuContext) {
|
|
const indices = menuContext.toString().split("*").map(Number);
|
|
firstLayerIndex = indices[0] || 0;
|
|
secondLayerIndex = indices[1] || 0;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<nav className="flex flex-col space-y-2">
|
|
<div className="text-xl font-bold mb-6 text-center">Dashboard</div>
|
|
{transformedMenu &&
|
|
transformedMenu.map((item, firstIndex) => (
|
|
<div key={item.name} className="mb-4">
|
|
<Link
|
|
href={`${pageSelected}?menu=${firstIndex}*0`}
|
|
className={`text-xl font-semibold pl-5 my-2 py-2 block ${
|
|
firstIndex === firstLayerIndex
|
|
? "text-emerald-600"
|
|
: "text-emerald-400"
|
|
} hover:text-emerald-600`}
|
|
>
|
|
{item.lg[lang]}
|
|
</Link>
|
|
|
|
{/* Only render the second layer if menuContext exists and this first layer item is selected */}
|
|
{menuContext && firstIndex === firstLayerIndex && (
|
|
<ul className="space-y-2">
|
|
{item.subList.map((subItem, secondIndex) => (
|
|
<div key={subItem.name}>
|
|
<Link
|
|
href={`${pageSelected}?menu=${firstIndex}*${secondIndex}`}
|
|
className={`ml-5 my-4 pl-4 text-xl font-semibold block ${
|
|
secondIndex === secondLayerIndex
|
|
? "text-emerald-700"
|
|
: "text-emerald-500"
|
|
} hover:text-emerald-700`}
|
|
>
|
|
{subItem.lg[lang]}
|
|
</Link>
|
|
{/* Only render the third layer if this second layer item is selected */}
|
|
{firstIndex === firstLayerIndex &&
|
|
secondIndex === secondLayerIndex && (
|
|
<div className="ml-5">
|
|
{subItem.subList.map((subSubItem) =>
|
|
`${pageSelected}` !== subSubItem.siteUrl ? (
|
|
<Link
|
|
key={subSubItem.name}
|
|
href={`${subSubItem?.siteUrl}?menu=${firstIndex}*${secondIndex}`}
|
|
className={`flex flex-row text-xl py-4 my-4 w-full space-x-2 p-2 rounded hover:bg-gray-200`}
|
|
>
|
|
<span className="text-gray-400">
|
|
<Home />
|
|
</span>
|
|
<span className="ml-5 text-gray-700">
|
|
{subSubItem.lg[lang]}
|
|
</span>
|
|
</Link>
|
|
) : (
|
|
<a
|
|
key={subSubItem.name}
|
|
href={`${subSubItem?.siteUrl}?menu=${firstIndex}*${secondIndex}`}
|
|
className={`flex flex-row text-xl py-4 my-4 w-full space-x-2 p-2 rounded bg-gray-100 cursor-not-allowed"`}
|
|
>
|
|
<span className="text-gray-400">
|
|
<Home />
|
|
</span>
|
|
<span className="ml-5 text-gray-700">
|
|
{subSubItem.lg[lang]}
|
|
</span>
|
|
</a>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LeftMenu;
|