From e69200333fbd4762c86f0f5a9e3faa3372875e2a Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Thu, 30 Oct 2025 18:21:18 -0300 Subject: [PATCH 1/4] fix: change breakpoint for collapsing sidebar --- apps/meteor/client/NavBarV2/NavBarPagesSection.tsx | 4 ++-- apps/meteor/client/providers/LayoutProvider.tsx | 4 ++-- apps/meteor/client/sidebarv2/SidebarRegion.tsx | 13 ++++++++----- packages/ui-contexts/src/LayoutContext.ts | 2 ++ 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/apps/meteor/client/NavBarV2/NavBarPagesSection.tsx b/apps/meteor/client/NavBarV2/NavBarPagesSection.tsx index f3f949753a903..df157817f5189 100644 --- a/apps/meteor/client/NavBarV2/NavBarPagesSection.tsx +++ b/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 ( - {isTablet && ( + {sidebar.shouldToggle && ( <> diff --git a/apps/meteor/client/providers/LayoutProvider.tsx b/apps/meteor/client/providers/LayoutProvider.tsx index fbfdbbf3cf62e..6fe49b98f5e30 100644 --- a/apps/meteor/client/providers/LayoutProvider.tsx +++ b/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), diff --git a/apps/meteor/client/sidebarv2/SidebarRegion.tsx b/apps/meteor/client/sidebarv2/SidebarRegion.tsx index 83eb4e750c6da..1541c900d7a5d 100644 --- a/apps/meteor/client/sidebarv2/SidebarRegion.tsx +++ b/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 = () => { - {isTablet && ( + {sidebar.shouldToggle && ( sidebar.toggle()} /> )} diff --git a/packages/ui-contexts/src/LayoutContext.ts b/packages/ui-contexts/src/LayoutContext.ts index 106c35488bfca..6fe5cb10b4c2c 100644 --- a/packages/ui-contexts/src/LayoutContext.ts +++ b/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({ overlayed: false, setOverlayed: () => undefined, isCollapsed: false, + shouldToggle: false, toggle: () => undefined, collapse: () => undefined, expand: () => undefined, From 59cf664058ca6abfccb169729a264c335d014b47 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Fri, 31 Oct 2025 11:15:06 -0300 Subject: [PATCH 2/4] test: adapt e2e test --- apps/meteor/tests/e2e/feature-preview.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/meteor/tests/e2e/feature-preview.spec.ts b/apps/meteor/tests/e2e/feature-preview.spec.ts index 5691a840cbcdc..cf0962e54586d 100644 --- a/apps/meteor/tests/e2e/feature-preview.spec.ts +++ b/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 () => { From 0821619ce492bcd5a72573f47010615c5a672a4a Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Mon, 3 Nov 2025 10:40:25 -0300 Subject: [PATCH 3/4] fix: conditionally display toggler in page header --- apps/meteor/client/components/Page/PageHeaderNoShadow.tsx | 8 +++----- apps/meteor/client/providers/LayoutProvider.tsx | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx b/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx index 84e4e9b07a7a2..15f6f001dec5c 100644 --- a/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx +++ b/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 > - {isMobile ? ( + {sidebar.shouldToggle ? ( ) : null} - {isTablet && isEmbedded ? ( + {sidebar.shouldToggle && isEmbedded ? ( ) : null} - {onClickBack && } {title} diff --git a/apps/meteor/client/providers/LayoutProvider.tsx b/apps/meteor/client/providers/LayoutProvider.tsx index 6fe49b98f5e30..2ef162b26c3c9 100644 --- a/apps/meteor/client/providers/LayoutProvider.tsx +++ b/apps/meteor/client/providers/LayoutProvider.tsx @@ -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%', }, From f56671b7bf5ea7b872efe6cc259b1dcdfdd4e756 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Mon, 3 Nov 2025 10:42:18 -0300 Subject: [PATCH 4/4] chore: changeset --- .changeset/hot-cups-smash.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/hot-cups-smash.md diff --git a/.changeset/hot-cups-smash.md b/.changeset/hot-cups-smash.md new file mode 100644 index 0000000000000..3fead344b5deb --- /dev/null +++ b/.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