import { Menu, MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu';
import cx from 'classnames';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useCallback, useState } from 'react';
export interface SidebarProps {
menu: Menu;
navIsOpen?: boolean;
}
export function Sidebar({ menu, navIsOpen }: SidebarProps): JSX.Element {
return (
);
}
function SidebarSection({ section }: { section: MenuSection }): JSX.Element {
return (
<>
{section.hideSectionHeader ? null : (
{section.name}
)}
-
{section.itemList.map((item, index) => (
))}
);
}
function SidebarSectionItems({ item }: { item: MenuItem }): JSX.Element {
const router = useRouter();
const [collapsed, setCollapsed] = useState(!item.disableCollapsible);
const handleCollapseToggle = useCallback(() => {
if (!item.disableCollapsible) {
setCollapsed(!collapsed);
}
}, [collapsed, setCollapsed, item]);
function withoutAnchors(linkText: string): string {
return linkText?.includes('#')
? linkText.substring(0, linkText.indexOf('#'))
: linkText;
}
return (
<>
{item.name}
{item.disableCollapsible ? null : (
)}
{(item.itemList as MenuItem[]).map((subItem, index) => {
const isActiveLink = subItem.path === withoutAnchors(router?.asPath);
const isNxCloudDocs = withoutAnchors(router?.asPath).startsWith(
'/nx-cloud'
);
if (isActiveLink && collapsed) {
handleCollapseToggle();
}
return (
-
{isActiveLink ? (
) : null}
{subItem.name}
);
})}
);
}
function CollapsibleIcon({
isCollapsed,
}: {
isCollapsed: boolean;
}): JSX.Element {
return (
);
}