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

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

@@ -0,0 +1,17 @@
+import { Box } from '@rocket.chat/fuselage';
+import { CustomScrollbars } from '@rocket.chat/ui-client';
+import type { ComponentPropsWithoutRef } from 'react';
+
+export type ContentProps = ComponentPropsWithoutRef<typeof CustomScrollbars>;
+
+const Content = ({ children, ...props }: ContentProps) => (
+	<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} overflow='hidden'>
+		<CustomScrollbars {...props}>
+			<Box display='flex' flexDirection='column' width='full' minHeight='full'>
+				{children}
+			</Box>
+		</CustomScrollbars>
+	</Box>
+);
+
+export default Content;

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

@@ -0,0 +1,31 @@
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type HeaderProps = {
+	children?: ReactNode;
+	title?: ReactNode;
+	onClose?: () => void;
+};
+
+const Header = ({ title, onClose, children, ...props }: HeaderProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Box display='flex' flexDirection='column' paddingBlock={16} {...props}>
+			{(title || onClose) && (
+				<Box display='flex' flexDirection='row' alignItems='center' paddingInline={24} justifyContent='space-between' flexGrow={1}>
+					{title && (
+						<Box color='default' fontScale='p2b' flexShrink={1} withTruncatedText>
+							{title}
+						</Box>
+					)}
+					{onClose && <IconButton small aria-label={t('Close')} icon='cross' onClick={onClose} />}
+				</Box>
+			)}
+			{children}
+		</Box>
+	);
+};
+
+export default Header;

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

@@ -0,0 +1,33 @@
+import { Option, OptionColumn, OptionContent, OptionIcon, OptionInput } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactNode } from 'react';
+
+type ListItemCommonProps = {
+	text: ReactNode;
+	input?: ReactNode;
+	loading?: boolean;
+	children?: ReactNode;
+} & ComponentProps<typeof Option>;
+
+type ListItemConditionalProps =
+	| {
+			icon?: ComponentProps<typeof OptionIcon>['name'];
+			gap?: never;
+	  }
+	| {
+			icon?: never;
+			gap?: boolean;
+	  };
+
+export type ListItemProps = ListItemCommonProps & ListItemConditionalProps;
+
+const ListItem = ({ icon, text, input, children, gap, ...props }: ListItemProps) => (
+	<Option {...props}>
+		{icon && <OptionIcon name={icon} />}
+		{gap && <OptionColumn />}
+		<OptionContent>{text}</OptionContent>
+		{input && <OptionInput>{input}</OptionInput>}
+		{children && <OptionColumn>{children}</OptionColumn>}
+	</Option>
+);
+
+export default ListItem;

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

@@ -0,0 +1,8 @@
+import { Sidebar as FuselageSidebar } from '@rocket.chat/fuselage';
+import type { ComponentPropsWithoutRef } from 'react';
+
+export type SidebarProps = ComponentPropsWithoutRef<typeof FuselageSidebar>;
+
+const Sidebar = (props: SidebarProps) => <FuselageSidebar {...props} />;
+
+export default Sidebar;

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

@@ -0,0 +1,20 @@
+import { Box, SidebarItem } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+
+export type SidebarGenericItemProps = {
+	href?: string;
+	active?: boolean;
+	children: ReactNode;
+	externalUrl?: boolean;
+};
+
+const SidebarGenericItem = ({ href, active, externalUrl, children, ...props }: SidebarGenericItemProps) => (
+	<SidebarItem selected={active} is='a' href={href} {...(externalUrl && { target: '_blank', rel: 'noopener noreferrer' })} {...props}>
+		<Box display='flex' flexDirection='row' alignItems='center' paddingBlock={8} width='100%'>
+			{children}
+		</Box>
+	</SidebarItem>
+);
+
+export default memo(SidebarGenericItem);

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

@@ -0,0 +1,41 @@
+import { Divider } from '@rocket.chat/fuselage';
+import { Fragment, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SidebarNavigationItem from './SidebarNavigationItem';
+import type { SidebarItem } from '../../lib/createSidebarItems';
+import { isSidebarItem } from '../../lib/createSidebarItems';
+
+export type SidebarItemsAssemblerProps = {
+	items: SidebarItem[];
+	currentPath?: string;
+};
+
+const SidebarItemsAssembler = ({ items, currentPath }: SidebarItemsAssemblerProps) => {
+	const { t, i18n } = useTranslation();
+
+	return (
+		<>
+			{items.map((props) => (
+				<Fragment key={props.i18nLabel}>
+					{isSidebarItem(props) ? (
+						<SidebarNavigationItem
+							permissionGranted={props.permissionGranted}
+							pathSection={props.href ?? props.pathSection ?? ''}
+							icon={props.icon}
+							label={t((props.i18nLabel || props.name) as Parameters<typeof t>[0])}
+							currentPath={currentPath}
+							tag={props.tag && i18n.exists(props.tag) ? t(props.tag) : props.tag}
+							externalUrl={props.externalUrl}
+							badge={props.badge}
+						/>
+					) : (
+						<Divider />
+					)}
+				</Fragment>
+			))}
+		</>
+	);
+};
+
+export default memo(SidebarItemsAssembler);

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);

apps/meteor/client/components/Sidebar/index.ts

@@ -0,0 +1,16 @@
+import Content from './Content';
+import Header from './Header';
+import ListItem from './ListItem';
+import Sidebar from './Sidebar';
+import GenericItem from './SidebarGenericItem';
+import SidebarItemsAssembler from './SidebarItemsAssembler';
+import NavigationItem from './SidebarNavigationItem';
+
+export default Object.assign(Sidebar, {
+	Content,
+	Header,
+	GenericItem,
+	NavigationItem,
+	ItemsAssembler: SidebarItemsAssembler,
+	ListItem,
+});