fix: [Enhanced navigation] Missing burger menu in embedded layout (#36398)

Author: dougfabris

.changeset/hot-crabs-invite.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes missing burger menu in embedded layout page header when using enhanced navigation feature preview

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

@@ -16,7 +16,7 @@ type PageHeaderProps = {
 const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props }: PageHeaderProps) => {
 	const { t } = useTranslation();
 
-	const { isMobile } = useLayout();
+	const { isMobile, isTablet, isEmbedded } = useLayout();
 
 	useDocumentTitle(typeof title === 'string' ? title : undefined);
 
@@ -32,16 +32,23 @@ const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props
 				alignItems='center'
 				color='default'
 			>
-				{isMobile && (
-					<FeaturePreview feature='newNavigation'>
-						<FeaturePreviewOff>
+				<FeaturePreview feature='newNavigation'>
+					<FeaturePreviewOff>
+						{isMobile ? (
 							<HeaderToolbar>
 								<SidebarToggler />
 							</HeaderToolbar>
-						</FeaturePreviewOff>
-						<FeaturePreviewOn>{null}</FeaturePreviewOn>
-					</FeaturePreview>
-				)}
+						) : null}
+					</FeaturePreviewOff>
+					<FeaturePreviewOn>
+						{isTablet && 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/tests/e2e/feature-preview.spec.ts

@@ -215,14 +215,23 @@ test.describe.serial('feature preview', () => {
 			await expect(poHomeChannel.sidebar.getItemUnreadBadge(collapser)).toBeVisible();
 		});
 
-		test('should not show NavBar in embedded layout', async ({ page }) => {
+		test('embedded layout', async ({ page }) => {
 			await page.goto('/home');
 
-			await poHomeChannel.navbar.openChat(targetChannel);
-			await expect(page.locator('role=navigation[name="header"]')).toBeVisible();
-			const embeddedLayoutURL = `${page.url()}?layout=embedded`;
-			await page.goto(embeddedLayoutURL);
-			await expect(page.locator('role=navigation[name="header"]')).not.toBeVisible();
+			await test.step('should not show NavBar', async () => {
+				await poHomeChannel.navbar.openChat(targetChannel);
+				await expect(page.locator('role=navigation[name="header"]')).toBeVisible();
+				const embeddedLayoutURL = `${page.url()}?layout=embedded`;
+				await page.goto(embeddedLayoutURL);
+				await expect(page.locator('role=navigation[name="header"]')).not.toBeVisible();
+			});
+
+			await test.step('should show burger menu', async () => {
+				await page.goto('admin/info?layout=embedded');
+				await page.setViewportSize({ width: 767, height: 510 });
+
+				await expect(poHomeChannel.content.burgerButton).toBeVisible();
+			});
 		});
 
 		test('should display the room header properly', async ({ page }) => {

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -15,6 +15,10 @@ export class HomeContent {
 		return this.page.locator('main header');
 	}
 
+	get burgerButton(): Locator {
+		return this.channelHeader.getByRole('button', { name: 'Open sidebar' });
+	}
+
 	get channelRetentionPolicyWarning(): Locator {
 		return this.page.locator('main').getByRole('alert', { name: 'Retention policy warning banner' });
 	}