61 lines
1.1 KiB
TypeScript
61 lines
1.1 KiB
TypeScript
|
import { LocaleLink } from "@i18n/routing";
|
||
|
|
import type { ContentStructureItem } from "@shared/lib/content";
|
||
|
|
|
||
|
|
function ContentMenuItem({
|
||
|
|
label,
|
||
|
|
path,
|
||
|
|
isPage,
|
||
|
|
children,
|
||
|
|
activePath,
|
||
|
|
}: ContentStructureItem & { activePath: string }) {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{isPage ? (
|
||
|
|
<LocaleLink
|
||
|
|
key={path}
|
||
|
|
className={`block rounded-full px-4 py-1 ${path === activePath ? "bg-primary/5 font-bold" : ""}`}
|
||
|
|
href={`/docs/${path}`}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</LocaleLink>
|
||
|
|
) : (
|
||
|
|
<span key={path} className="block px-4 py-1">
|
||
|
|
{label}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{children && (
|
||
|
|
<div className="-mr-4 pl-4">
|
||
|
|
{children.map((subItem) => (
|
||
|
|
<ContentMenuItem
|
||
|
|
key={subItem.path}
|
||
|
|
{...subItem}
|
||
|
|
activePath={activePath}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ContentMenu({
|
||
|
|
items,
|
||
|
|
activePath,
|
||
|
|
}: {
|
||
|
|
items: ContentStructureItem[];
|
||
|
|
activePath: string;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<ul className="-mx-4 list-none space-y-2 pr-4">
|
||
|
|
{items.map((item) => (
|
||
|
|
<ContentMenuItem
|
||
|
|
key={item.path}
|
||
|
|
{...item}
|
||
|
|
activePath={activePath}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
);
|
||
|
|
}
|