diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx index ab068872472..65c8589c9a6 100644 --- a/packages/react-core/src/components/Page/Page.tsx +++ b/packages/react-core/src/components/Page/Page.tsx @@ -266,6 +266,7 @@ class Page extends Component { isManagedSidebar, onSidebarToggle: mobileView ? this.onSidebarToggleMobile : this.onSidebarToggleDesktop, isSidebarOpen: mobileView ? mobileIsSidebarOpen : desktopIsSidebarOpen, + isMobile: mobileView, width, height, getBreakpoint, diff --git a/packages/react-core/src/components/Page/PageContext.tsx b/packages/react-core/src/components/Page/PageContext.tsx index 4dd1a898ae6..ad2dcf5658c 100644 --- a/packages/react-core/src/components/Page/PageContext.tsx +++ b/packages/react-core/src/components/Page/PageContext.tsx @@ -6,6 +6,7 @@ export interface PageContextProps { isManagedSidebar: boolean; onSidebarToggle: () => void; isSidebarOpen: boolean; + isMobile: boolean; width: number; height: number; getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; @@ -16,6 +17,7 @@ export const pageContextDefaults: PageContextProps = { isManagedSidebar: false, isSidebarOpen: false, onSidebarToggle: () => null, + isMobile: false, width: null, height: null, getBreakpoint, diff --git a/packages/react-core/src/components/Page/PageSidebar.tsx b/packages/react-core/src/components/Page/PageSidebar.tsx index 4d98af8bf7e..17efcebeccc 100644 --- a/packages/react-core/src/components/Page/PageSidebar.tsx +++ b/packages/react-core/src/components/Page/PageSidebar.tsx @@ -35,7 +35,7 @@ export const PageSidebar: React.FunctionComponent = ({ ...props }: PageSidebarProps) => ( - {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen }: PageSidebarProps) => { + {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen, isMobile }) => { const sidebarOpen = isManagedSidebar ? managedIsNavOpen : isSidebarOpen; return ( @@ -43,7 +43,7 @@ export const PageSidebar: React.FunctionComponent = ({ id={id} className={css( styles.pageSidebar, - sidebarOpen && styles.modifiers.expanded, + sidebarOpen && isMobile && styles.modifiers.expanded, !sidebarOpen && styles.modifiers.collapsed, className )} diff --git a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap index 2e5b383ff1a..838c24de82a 100644 --- a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap @@ -4,7 +4,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap index 00b3624d974..06922646315 100644 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap @@ -12,7 +12,7 @@ exports[`Page Check dark page against snapshot 1`] = ` />
{ it('Test Page elements', () => { cy.get('#page-demo').within(() => { cy.get('#nav-toggle').then((hamburgerIcon: JQuery) => { - cy.get('.pf-v6-c-page__sidebar.pf-m-expanded').should('exist'); - cy.get('.pf-v6-c-page__sidebar.pf-m-collapsed').should('not.exist'); - cy.wrap(hamburgerIcon).click(); - cy.get('.pf-v6-c-page__sidebar.pf-m-collapsed').should('exist'); - cy.get('.pf-v6-c-page__sidebar.pf-m-expanded').should('not.exist'); + cy.get('#page-demo-sidebar').then(($sidebar) => { + const initiallyCollapsed = $sidebar.hasClass('pf-m-collapsed'); + cy.wrap(hamburgerIcon).click(); + if (initiallyCollapsed) { + cy.get('#page-demo-sidebar').should('not.have.class', 'pf-m-collapsed'); + } else { + cy.get('#page-demo-sidebar').should('have.class', 'pf-m-collapsed'); + } + cy.wrap(hamburgerIcon).click(); + if (initiallyCollapsed) { + cy.get('#page-demo-sidebar').should('have.class', 'pf-m-collapsed'); + } else { + cy.get('#page-demo-sidebar').should('not.have.class', 'pf-m-collapsed'); + } + }); }); cy.get('#page-demo-masthead').should('not.have.attr', 'role'); cy.get('#page-demo-page-id').should('not.have.attr', 'role');