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

apps/meteor/client/components/SidebarToggler/SidebarToggler.tsx

@@ -0,0 +1,24 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEmbeddedLayout } from '@rocket.chat/ui-client';
+import { useLayout, useSession } from '@rocket.chat/ui-contexts';
+import { memo } from 'react';
+
+import SidebarTogglerButton from './SidebarTogglerButton';
+
+const SideBarToggler = () => {
+	const { sidebar } = useLayout();
+	const isLayoutEmbedded = useEmbeddedLayout();
+	const unreadMessagesBadge = useSession('unread') as number | string | undefined;
+
+	const toggleSidebar = useStableCallback(() => sidebar.toggle());
+
+	return (
+		<SidebarTogglerButton
+			pressed={!sidebar.isCollapsed}
+			onClick={toggleSidebar}
+			badge={!isLayoutEmbedded && unreadMessagesBadge && unreadMessagesBadge}
+		/>
+	);
+};
+
+export default memo(SideBarToggler);

apps/meteor/client/components/SidebarToggler/SidebarTogglerBadge.tsx

@@ -0,0 +1,22 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Badge } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+
+export type SidebarTogglerBadgeProps = {
+	children?: ReactNode;
+};
+
+const SidebarTogglerBadge = ({ children }: SidebarTogglerBadgeProps) => (
+	<Box
+		className={css`
+			position: absolute;
+			z-index: 3;
+			top: -5px;
+			right: -5px;
+		`}
+	>
+		<Badge variant='danger'>{children}</Badge>
+	</Box>
+);
+
+export default SidebarTogglerBadge;

apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import SidebarTogglerButton from './SidebarTogglerButton';
+
+export default {
+	component: SidebarTogglerButton,
+	parameters: {
+		layout: 'centered',
+		controls: { hideNoControlsWarning: true },
+		actions: { argTypesRegex: '^on.*' },
+	},
+} satisfies Meta<typeof SidebarTogglerButton>;
+
+export const Example: StoryFn<typeof SidebarTogglerButton> = () => <SidebarTogglerButton onClick={action('onClick')} />;
+export const Default = {};
+
+export const WithBadge = {
+	args: {
+		badge: 99,
+	},
+};

apps/meteor/client/components/SidebarToggler/SidebarTogglerButton.tsx

@@ -0,0 +1,24 @@
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import SidebarTogglerBadge from './SidebarTogglerBadge';
+
+export type SideBarTogglerButtonProps = {
+	pressed?: boolean;
+	badge?: ReactNode;
+	onClick: () => void;
+};
+
+const SideBarTogglerButton = ({ pressed, badge, onClick }: SideBarTogglerButtonProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Box position='relative'>
+			<IconButton title={!pressed ? t('Open_sidebar') : t('Close_sidebar')} icon='burger-menu' pressed={pressed} small onClick={onClick} />
+			{badge && <SidebarTogglerBadge>{badge}</SidebarTogglerBadge>}
+		</Box>
+	);
+};
+
+export default SideBarTogglerButton;

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

@@ -0,0 +1 @@
+export { default } from './SidebarToggler';