83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
import { Link, useLocation } from "react-router";
|
|
import clsx from "clsx";
|
|
import { SideBarItem } from "~/application/sidebar/SidebarItem";
|
|
import { getUiIdAttributes } from "~/application/ui/uiRegistry";
|
|
|
|
export function DocsSidebarNav({ items }: { items: SideBarItem[] }) {
|
|
return (
|
|
<div>
|
|
{items.length > 0 ? (
|
|
<div className="w-full">
|
|
{items.map((item, index) => (
|
|
<div key={index} className={clsx(item.items && item.items.length > 0 && "pb-4")} {...(!item.path ? getUiIdAttributes(item) : {})}>
|
|
{item.items && item.items.length > 0 ? (
|
|
<button type="button" aria-expanded="true" className="mb-1 rounded-md px-2 py-1 text-left font-semibold" {...getUiIdAttributes(item)}>
|
|
{item.title}
|
|
</button>
|
|
) : item.path ? (
|
|
<Link to={item.path} className="hover:underline" {...getUiIdAttributes(item)}>
|
|
<h4 className="mb-1 rounded-md px-2 py-1 font-semibold">{item.title}</h4>
|
|
</Link>
|
|
) : (
|
|
<h4 className="mb-1 rounded-md px-2 py-1 font-semibold">{item.title}</h4>
|
|
)}
|
|
{item.items && item.items.length > 0 && <DocsSidebarNavItems items={item.items} />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DocsSidebarNavItems({ items }: { items: SideBarItem[] }) {
|
|
const location = useLocation();
|
|
const pathname = location.pathname;
|
|
return items?.length ? (
|
|
<div className="grid grid-flow-row auto-rows-max">
|
|
{items.map((item, index) =>
|
|
item.path && !item.disabled ? (
|
|
<Link
|
|
key={index}
|
|
to={item.path}
|
|
className={clsx(
|
|
"group flex w-full items-center rounded-md border border-transparent px-2 py-1 text-sm hover:underline",
|
|
item.disabled && "cursor-not-allowed opacity-60",
|
|
pathname === item.path ? "text-text-neutral-primary font-medium" : "text-text-neutral-tertiary"
|
|
)}
|
|
target={item.target}
|
|
rel={item.target ? "noreferrer" : ""}
|
|
{...getUiIdAttributes(item)}
|
|
// preventScrollReset
|
|
>
|
|
{item.title}
|
|
{item.side && (
|
|
<span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
|
|
{item.side}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
) : (
|
|
<span
|
|
key={index}
|
|
aria-disabled={item.disabled ? "true" : undefined}
|
|
className={clsx(
|
|
"text-text-neutral-tertiary flex w-full items-center rounded-md p-2",
|
|
!item.disabled && "hover:underline",
|
|
item.disabled && "cursor-not-allowed opacity-60"
|
|
)}
|
|
{...getUiIdAttributes(item)}
|
|
>
|
|
{item.title}
|
|
{item.side && (
|
|
<span className="bg-surface-neutral-secondary text-text-neutral-tertiary ml-2 rounded-md px-1.5 py-0.5 text-xs leading-none no-underline group-hover:no-underline">
|
|
{item.side}
|
|
</span>
|
|
)}
|
|
</span>
|
|
)
|
|
)}
|
|
</div>
|
|
) : null;
|
|
}
|