snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx

@@ -0,0 +1,57 @@
+import { Box, Icon, Tag } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+
+import SidebarGenericItem from './SidebarGenericItem';
+
+export type SidebarNavigationItemProps = {
+	permissionGranted?: (() => boolean) | boolean;
+	pathSection: string;
+	icon?: IconName;
+	label?: string;
+	tag?: string;
+	currentPath?: string;
+	externalUrl?: boolean;
+	badge?: () => ReactNode;
+};
+
+const SidebarNavigationItem = ({
+	permissionGranted,
+	pathSection,
+	icon,
+	label,
+	currentPath,
+	tag,
+	externalUrl,
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	badge: Badge,
+}: SidebarNavigationItemProps) => {
+	const path = pathSection;
+	const isActive = !!path && currentPath?.includes(path);
+
+	if (permissionGranted === false || (typeof permissionGranted === 'function' && !permissionGranted())) {
+		return null;
+	}
+
+	return (
+		<SidebarGenericItem active={isActive} href={path} externalUrl={externalUrl} aria-current={isActive ? 'page' : undefined}>
+			{icon && <Icon name={icon} size='x20' marginInline={4} />}
+			<Box
+				withTruncatedText
+				fontScale='p2'
+				marginInline={4}
+				flexGrow={1}
+				display='flex'
+				alignItems='center'
+				justifyContent='space-between'
+				width='100%'
+			>
+				{label} {tag && <Tag>{tag}</Tag>}
+			</Box>
+			{Badge ? <Badge /> : null}
+		</SidebarGenericItem>
+	);
+};
+
+export default memo(SidebarNavigationItem);