fix(Enhanced navigation): Change breakpoint for collapsing sidebar

.changeset/hot-cups-smash.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/ui-contexts': patch
+'@rocket.chat/meteor': patch
+---
+
+Fixes the sidebar collapse breakpoint in enhanced navigation

apps/meteor/client/NavBarV2/NavBarPagesSection.tsx

@@ -5,11 +5,11 @@ import NavBarPagesGroup from './NavBarPagesGroup';
 import { SidebarTogglerV2 } from '../components/SidebarTogglerV2';
 
 const NavBarPagesSection = () => {
-	const { isTablet } = useLayout();
+	const { sidebar } = useLayout();
 
 	return (
 		<NavBarSection>
-			{isTablet && (
+			{sidebar.shouldToggle && (
 				<>
 					<NavBarGroup>
 						<SidebarTogglerV2 />

apps/meteor/client/components/Page/PageHeaderNoShadow.tsx

@@ -15,8 +15,7 @@ type PageHeaderProps = {
 
 const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props }: PageHeaderProps) => {
 	const { t } = useTranslation();
-
-	const { isMobile, isTablet, isEmbedded } = useLayout();
+	const { sidebar, isEmbedded } = useLayout();
 
 	useDocumentTitle(typeof title === 'string' ? title : undefined);
 
@@ -34,21 +33,20 @@ const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props
 			>
 				<FeaturePreview feature='newNavigation'>
 					<FeaturePreviewOff>
-						{isMobile ? (
+						{sidebar.shouldToggle ? (
 							<HeaderToolbar>
 								<SidebarToggler />
 							</HeaderToolbar>
 						) : null}
 					</FeaturePreviewOff>
 					<FeaturePreviewOn>
-						{isTablet && isEmbedded ? (
+						{sidebar.shouldToggle && isEmbedded ? (
 							<HeaderToolbar>
 								<SidebarToggler />
 							</HeaderToolbar>
 						) : null}
 					</FeaturePreviewOn>
 				</FeaturePreview>
-
 				{onClickBack && <IconButton small mie={8} icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
 				<Box is='h1' fontScale='h2' flexGrow={1} data-qa-type='PageHeader-title'>
 					{title}

apps/meteor/client/providers/LayoutProvider.tsx

@@ -23,7 +23,6 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 	const [navBarSearchExpanded, setNavBarSearchExpanded] = useState(false);
 	const breakpoints = useBreakpoints(); // ["xs", "sm", "md", "lg", "xl", xxl"]
 	const [hiddenActions, setHiddenActions] = useState(hiddenActionsDefaultValue);
-	const enhancedNavigationEnabled = useFeaturePreview('newNavigation');
 	const secondSidebarEnabled = useFeaturePreview('secondarySidebar');
 
 	const router = useRouter();
@@ -33,7 +32,7 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 	const isMobile = !breakpoints.includes('md');
 	const isTablet = !breakpoints.includes('lg');
 
-	const shouldToggle = enhancedNavigationEnabled ? isTablet || isMobile : isMobile;
+	const shouldToggle = secondSidebarEnabled ? isTablet || isMobile : isMobile;
 	const shouldDisplaySidePanel = !isTablet || displaySidePanel;
 	const defaultSidebarWidth = secondSidebarEnabled ? '220px' : '240px';
 
@@ -71,6 +70,7 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 						overlayed,
 						setOverlayed,
 						isCollapsed,
+						shouldToggle,
 						toggle: shouldToggle ? () => setIsCollapsed((isCollapsed) => !isCollapsed) : () => undefined,
 						collapse: () => setIsCollapsed(true),
 						expand: () => setIsCollapsed(false),
@@ -82,7 +82,7 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 						openSidePanel: () => setDisplaySidePanel(true),
 					},
 					size: {
-						sidebar: isTablet ? '280px' : defaultSidebarWidth,
+						sidebar: shouldToggle ? '280px' : defaultSidebarWidth,
 						// eslint-disable-next-line no-nested-ternary
 						contextualBar: breakpoints.includes('sm') ? (breakpoints.includes('xl') ? '38%' : '380px') : '100%',
 					},

apps/meteor/client/sidebarv2/SidebarRegion.tsx

@@ -7,7 +7,7 @@ import { FocusScope } from 'react-aria';
 import Sidebar from './Sidebar';
 
 const SidebarRegion = () => {
-	const { isTablet, sidebar } = useLayout();
+	const { sidebar } = useLayout();
 
 	const sidebarMobileClass = css`
 		position: absolute;
@@ -93,13 +93,16 @@ const SidebarRegion = () => {
 		<FocusScope>
 			<Box
 				id='sidebar-region'
-				className={['rcx-sidebar', !sidebar.isCollapsed && isTablet && 'opened', sideBarStyle, isTablet && sidebarMobileClass].filter(
-					Boolean,
-				)}
+				className={[
+					'rcx-sidebar',
+					!sidebar.isCollapsed && sidebar.shouldToggle && 'opened',
+					sideBarStyle,
+					sidebar.shouldToggle && sidebarMobileClass,
+				].filter(Boolean)}
 			>
 				<Sidebar />
 			</Box>
-			{isTablet && (
+			{sidebar.shouldToggle && (
 				<Box className={[sidebarWrapStyle, !sidebar.isCollapsed && 'opened'].filter(Boolean)} onClick={() => sidebar.toggle()} />
 			)}
 		</FocusScope>

apps/meteor/tests/e2e/feature-preview.spec.ts

@@ -122,15 +122,15 @@ test.describe.serial('feature preview', () => {
 				await expect(poHomeChannel.navbar.btnDirectory).toBeVisible();
 			});
 
-			await test.step('should display home and directory inside a menu and sidebar toggler in tablet view', async () => {
+			await test.step('should display home and directory inside a menu', async () => {
 				await page.setViewportSize({ width: 1023, height: 767 });
 				await expect(poHomeChannel.navbar.btnMenuPages).toBeVisible();
-				await expect(poHomeChannel.navbar.btnSidebarToggler()).toBeVisible();
 			});
 
-			await test.step('should display voice and omnichannel items inside a menu in mobile view', async () => {
+			await test.step('should display voice and omnichannel items inside a menu and sidebar toggler in mobile view', async () => {
 				await page.setViewportSize({ width: 767, height: 510 });
 				await expect(poHomeChannel.navbar.btnVoiceAndOmnichannel).toBeVisible();
+				await expect(poHomeChannel.navbar.btnSidebarToggler()).toBeVisible();
 			});
 
 			await test.step('should hide everything else when navbar search is focused in mobile view', async () => {

packages/ui-contexts/src/LayoutContext.ts

@@ -15,6 +15,7 @@ export type LayoutContextValue = {
 		overlayed: boolean;
 		setOverlayed: (value: boolean) => void;
 		isCollapsed: boolean;
+		shouldToggle: boolean;
 		toggle: () => void;
 		collapse: () => void;
 		expand: () => void;
@@ -56,6 +57,7 @@ export const LayoutContext = createContext<LayoutContextValue>({
 		overlayed: false,
 		setOverlayed: () => undefined,
 		isCollapsed: false,
+		shouldToggle: false,
 		toggle: () => undefined,
 		collapse: () => undefined,
 		expand: () => undefined,