docs: hide sections with no members (#8380)

packages/website/src/components/ListSidebar.tsx

@@ -85,30 +85,32 @@ export function ListSidebar({ members, selectedMember }: ListSidebarSectionProps
 
 	return (
 		<>
-			{(Object.keys(groupItems) as (keyof GroupedMembers)[]).map((group, i) => (
+			{(Object.keys(groupItems) as (keyof GroupedMembers)[])
-				<Section iconElement={resolveIcon(group)} key={i} title={group} showSeparator={false}>
+				.filter((group) => groupItems[group].length)
-					<div className="space-y-2">
+				.map((group, i) => (
-						{groupItems[group].map((member, i) => (
+					<Section iconElement={resolveIcon(group)} key={i} title={group} showSeparator={false}>
-							<div
+						<div className="space-y-2">
-								key={i}
+							{groupItems[group].map((member, i) => (
-								className="flex gap-2 whitespace-pre-wrap no-underline break-all text-blue-500 dark:text-blue-300"
+								<div
-							>
+									key={i}
-								<Link href={member.path}>
+									className="flex gap-2 whitespace-pre-wrap no-underline break-all text-blue-500 dark:text-blue-300"
-									<a
+								>
-										className={`no-underline m-0 text-sm font-semibold ${
+									<Link href={member.path}>
-											selectedMember === member.name
+										<a
-												? 'text-blue-500 dark:text-blue-300'
+											className={`no-underline m-0 text-sm font-semibold ${
-												: 'text-gray-500 dark:text-gray-300 hover:text-dark-100 dark:hover:text-white'
+												selectedMember === member.name
-										}`}
+													? 'text-blue-500 dark:text-blue-300'
-									>
+													: 'text-gray-500 dark:text-gray-300 hover:text-dark-100 dark:hover:text-white'
-										{member.name}
+											}`}
-									</a>
+										>
-								</Link>
+											{member.name}
-							</div>
+										</a>
-						))}
+									</Link>
-					</div>
+								</div>
-				</Section>
+							))}
-			))}
+						</div>
+					</Section>
+				))}
 		</>
 	);
 }