57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { useMemo } from "react";
|
|
|
|
export type MenuProps = {
|
|
items: MenuItem[];
|
|
basename?: string;
|
|
};
|
|
export type MenuItem = {
|
|
id: string;
|
|
data: {
|
|
title: string;
|
|
tags: string[];
|
|
hideInMenu?: boolean;
|
|
}
|
|
}
|
|
export const Menu = (props: MenuProps) => {
|
|
const { items, basename = '' } = props;
|
|
const list = useMemo(() => {
|
|
return items.filter(item => !item.data?.hideInMenu);
|
|
}, [items]);
|
|
if (list.length === 0) {
|
|
return null;
|
|
}
|
|
return (
|
|
<nav className='flex-1 overflow-y-auto scrollbar bg-sidebar border border-sidebar-border rounded-lg p-4 shadow-sm'>
|
|
<h2 className="text-sm font-semibold text-sidebar-foreground">列表</h2>
|
|
<div className="space-y-1">
|
|
{list.map(item => (
|
|
<a
|
|
key={item.id}
|
|
href={`${basename}/docs/${item.id}/`}
|
|
className="group block rounded-md hover:bg-sidebar-accent transition-all duration-200 ease-in-out"
|
|
>
|
|
<div className="px-3 py-2.5">
|
|
<h3 className="text-sm font-semibold text-sidebar-foreground group-hover:text-sidebar-accent-foreground transition-colors">
|
|
{item.data?.title}
|
|
</h3>
|
|
{item.data?.tags && item.data.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 mt-2">
|
|
{item.data.tags.map(tag => (
|
|
<span
|
|
key={tag}
|
|
className="text-xs px-2 py-0.5 rounded-full bg-muted/60 text-muted-foreground font-medium hover:bg-muted transition-colors"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|