diff --git a/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx b/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx index 2d9aefb14ccef..58188d1346508 100644 --- a/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx +++ b/apps/meteor/client/components/Page/PageHeaderNoShadow.tsx @@ -5,7 +5,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { HeaderToolbar } from '../Header'; -import { SidebarTogglerV2 } from '../SidebarTogglerV2'; +import SidebarToggler from '../SidebarToggler'; type PageHeaderProps = { title: ReactNode; @@ -36,7 +36,7 @@ const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props - + {null} diff --git a/apps/meteor/client/providers/LayoutProvider.tsx b/apps/meteor/client/providers/LayoutProvider.tsx index 391c9228dcb25..92b5b5d7871ff 100644 --- a/apps/meteor/client/providers/LayoutProvider.tsx +++ b/apps/meteor/client/providers/LayoutProvider.tsx @@ -1,4 +1,5 @@ import { useBreakpoints } from '@rocket.chat/fuselage-hooks'; +import { useFeaturePreview } from '@rocket.chat/ui-client'; import { LayoutContext, useRouter, useSetting } from '@rocket.chat/ui-contexts'; import type { ReactNode } from 'react'; import { useMemo, useState, useEffect } from 'react'; @@ -20,6 +21,7 @@ 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 router = useRouter(); // Once the layout is embedded, it can't be changed @@ -28,7 +30,7 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => { const isMobile = !breakpoints.includes('md'); const isTablet = !breakpoints.includes('lg'); - const shouldToggle = isTablet || isMobile; + const shouldToggle = enhancedNavigationEnabled ? isTablet || isMobile : isMobile; useEffect(() => { setIsCollapsed(shouldToggle); diff --git a/apps/meteor/client/providers/MeteorProvider.tsx b/apps/meteor/client/providers/MeteorProvider.tsx index 704a4dce2eece..b3bed574fd046 100644 --- a/apps/meteor/client/providers/MeteorProvider.tsx +++ b/apps/meteor/client/providers/MeteorProvider.tsx @@ -38,9 +38,9 @@ const MeteorProvider = ({ children }: MeteorProviderProps) => ( - - - + + + @@ -66,9 +66,9 @@ const MeteorProvider = ({ children }: MeteorProviderProps) => ( - - - + + + diff --git a/apps/meteor/client/views/room/NotSubscribedRoom.tsx b/apps/meteor/client/views/room/NotSubscribedRoom.tsx index f055ead54d0e3..f2ece26605932 100644 --- a/apps/meteor/client/views/room/NotSubscribedRoom.tsx +++ b/apps/meteor/client/views/room/NotSubscribedRoom.tsx @@ -6,7 +6,7 @@ import type { ReactElement } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import RoomLayout from './layout/RoomLayout'; -import { SidebarTogglerV2 } from '../../components/SidebarTogglerV2'; +import SidebarToggler from '../../components/SidebarToggler'; import { useJoinRoom } from '../../hooks/useJoinRoom'; type NotSubscribedRoomProps = { @@ -30,7 +30,7 @@ const NotSubscribedRoom = ({ rid, reference, type }: NotSubscribedRoomProps): Re
- +
diff --git a/apps/meteor/client/views/room/RoomNotFound.tsx b/apps/meteor/client/views/room/RoomNotFound.tsx index 3d13b1a5e930f..ca4945ba96d58 100644 --- a/apps/meteor/client/views/room/RoomNotFound.tsx +++ b/apps/meteor/client/views/room/RoomNotFound.tsx @@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'; import RoomLayout from './layout/RoomLayout'; import NotFoundState from '../../components/NotFoundState'; -import { SidebarTogglerV2 } from '../../components/SidebarTogglerV2'; +import SidebarToggler from '../../components/SidebarToggler'; const RoomNotFound = (): ReactElement => { const { t } = useTranslation(); @@ -20,7 +20,7 @@ const RoomNotFound = (): ReactElement => {
- +
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts index bf2eefeb11a37..872c6b46b7d92 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts @@ -61,6 +61,18 @@ export class HomeSidenav { return this.sidebarToolbar.getByRole('button', { name: 'Home' }); } + get btnDisplay(): Locator { + return this.sidebarToolbar.getByRole('button', { name: 'Display' }); + } + + get btnCreateNew(): Locator { + return this.sidebarToolbar.getByRole('button', { name: 'Create new' }); + } + + get btnAdministration(): Locator { + return this.sidebarToolbar.getByRole('button', { name: 'Administration' }); + } + async setDisplayMode(mode: 'Extended' | 'Medium' | 'Condensed'): Promise { await this.sidebarToolbar.getByRole('button', { name: 'Display', exact: true }).click(); await this.sidebarToolbar.getByRole('menuitemcheckbox', { name: mode }).click(); diff --git a/apps/meteor/tests/e2e/sidebar.spec.ts b/apps/meteor/tests/e2e/sidebar.spec.ts index 29fd1a1bc0f59..b45f2caa7f89b 100644 --- a/apps/meteor/tests/e2e/sidebar.spec.ts +++ b/apps/meteor/tests/e2e/sidebar.spec.ts @@ -14,6 +14,14 @@ test.describe.serial('sidebar', () => { await page.waitForSelector('main'); }); + test('should sidebar`s toolbar buttons not be disabled in tablet view', async ({ page }) => { + await page.setViewportSize({ width: 1023, height: 767 }); + + await expect(poHomeChannel.sidenav.btnDisplay).not.toBeDisabled(); + await expect(poHomeChannel.sidenav.btnCreateNew).not.toBeDisabled(); + await expect(poHomeChannel.sidenav.btnAdministration).not.toBeDisabled(); + }); + test('should navigate on sidebar toolbar using arrow keys', async ({ page }) => { await poHomeChannel.sidenav.userProfileMenu.focus(); await page.keyboard.press('Tab');