fix: sidebar behavior in lower screen size (#35311)

Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>

.changeset/itchy-teachers-jam.md

+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes an issue where menus inside sidebar keeps opened even if the sidebar is collapsed

apps/meteor/client/sidebar/header/UserMenu.tsx

@@ -7,6 +7,7 @@ import {
 	useHandleMenuAction,
 	type GenericMenuItemProps,
 } from '@rocket.chat/ui-client';
+import { useLayout } from '@rocket.chat/ui-contexts';
 import { useState, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -17,7 +18,7 @@ import { useUserMenu } from './hooks/useUserMenu';
 const UserMenu = ({ user }: { user: IUser }) => {
 	const { t } = useTranslation();
 	const [isOpen, setIsOpen] = useState(false);
-
+	const { sidebar } = useLayout();
 	const sections = useUserMenu(user);
 	const items = sections.reduce((acc, { items }) => [...acc, ...items], [] as GenericMenuItemProps[]);
 
@@ -36,6 +37,7 @@ const UserMenu = ({ user }: { user: IUser }) => {
 					onAction={handleAction}
 					isOpen={isOpen}
 					onOpenChange={setIsOpen}
+					disabled={sidebar.isCollapsed}
 				/>
 			</FeaturePreviewOff>
 			<FeaturePreviewOn>
@@ -50,6 +52,7 @@ const UserMenu = ({ user }: { user: IUser }) => {
 					onAction={handleAction}
 					isOpen={isOpen}
 					onOpenChange={setIsOpen}
+					disabled={sidebar.isCollapsed}
 				/>
 			</FeaturePreviewOn>
 		</FeaturePreview>

apps/meteor/client/sidebar/header/actions/Administration.tsx

 import { Sidebar } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
+import { useLayout } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,10 +10,12 @@ type AdministrationProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
 const Administration = (props: AdministrationProps) => {
 	const { t } = useTranslation();
-
+	const { sidebar } = useLayout();
 	const sections = useAdministrationMenu();
 
-	return <GenericMenu sections={sections} title={t('Administration')} is={Sidebar.TopBar.Action} {...props} />;
+	return (
+		<GenericMenu sections={sections} title={t('Administration')} is={Sidebar.TopBar.Action} disabled={sidebar.isCollapsed} {...props} />
+	);
 };
 
 export default Administration;

apps/meteor/client/sidebar/header/actions/CreateRoom.tsx

 import { Sidebar } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
+import { useLayout } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,10 +10,19 @@ type CreateRoomProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
 const CreateRoom = (props: CreateRoomProps) => {
 	const { t } = useTranslation();
-
+	const { sidebar } = useLayout();
 	const sections = useCreateRoom();
 
-	return <GenericMenu icon='edit-rounded' sections={sections} title={t('Create_new')} is={Sidebar.TopBar.Action} {...props} />;
+	return (
+		<GenericMenu
+			icon='edit-rounded'
+			sections={sections}
+			title={t('Create_new')}
+			is={Sidebar.TopBar.Action}
+			disabled={sidebar.isCollapsed}
+			{...props}
+		/>
+	);
 };
 
 export default CreateRoom;

apps/meteor/client/sidebar/header/actions/Sort.tsx

 import { Sidebar } from '@rocket.chat/fuselage';
 import { GenericMenu } from '@rocket.chat/ui-client';
+import { useLayout } from '@rocket.chat/ui-contexts';
 import type { HTMLAttributes } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,11 +10,19 @@ type SortProps = Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
 const Sort = (props: SortProps) => {
 	const { t } = useTranslation();
-
+	const { sidebar } = useLayout();
 	const sections = useSortMenu();
 
 	return (
-		<GenericMenu icon='sort' sections={sections} title={t('Display')} selectionMode='multiple' is={Sidebar.TopBar.Action} {...props} />
+		<GenericMenu
+			icon='sort'
+			sections={sections}
+			title={t('Display')}
+			selectionMode='multiple'
+			is={Sidebar.TopBar.Action}
+			disabled={sidebar.isCollapsed}
+			{...props}
+		/>
 	);
 };