diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 9a2bdbf..fb25860 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -1,12 +1,5 @@ import { useEffect, useState } from 'react' -import { - Nav, - NavList, - PageSidebar, - PageSidebarBody, -} from '@patternfly/react-core' -import { useStore } from '@nanostores/react' -import { isNavOpen } from '../stores/navStore' +import { Nav, NavList, PageSidebarBody } from '@patternfly/react-core' import { NavSection } from './NavSection' import { type TextContentEntry } from './NavEntry' @@ -17,7 +10,6 @@ interface NavigationProps { export const Navigation: React.FunctionComponent = ({ navEntries, }: NavigationProps) => { - const $isNavOpen = useStore(isNavOpen) const [activeItem, setActiveItem] = useState('') useEffect(() => { @@ -47,12 +39,11 @@ export const Navigation: React.FunctionComponent = ({ }) return ( - - - - - + // Can possibly add back PageSidebar wrapper when https://github.com/patternfly/patternfly/issues/7377 goes in + + + ) } diff --git a/src/components/PageToggle.tsx b/src/components/PageToggle.tsx index e62f7d2..9bae411 100644 --- a/src/components/PageToggle.tsx +++ b/src/components/PageToggle.tsx @@ -1,4 +1,5 @@ import type React from 'react' +import styles from '@patternfly/react-styles/css/components/Page/page' import { PageToggleButton } from '@patternfly/react-core' import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon' import { useStore } from '@nanostores/react' @@ -8,38 +9,40 @@ import { useEffect } from 'react' export const PageToggle: React.FunctionComponent = () => { const $isNavOpen = useStore(isNavOpen) - /** Applies sidebar styles to the island element astro creates as a wrapper for the sidebar. - * Without it the page content will not expand to fill the space left by the sidebar when it is collapsed. - */ - function applySidebarStylesToIsland() { + function onToggle() { + isNavOpen.set(!$isNavOpen) + } + + useEffect(() => { + /** Applies sidebar styles to the island element astro creates as a wrapper for the sidebar. + * Without it the page content will not expand to fill the space left by the sidebar when it is collapsed. + */ + // Possibly can refactor to remove applying classes when https://github.com/patternfly/patternfly/issues/7377 goes in const isClientSide = typeof window !== 'undefined' - const sideBarIsland = document.getElementById('page-sidebar')?.parentElement + const sideBarIsland = + document.getElementById('page-sidebar-body')?.parentElement if (!isClientSide || !sideBarIsland) { return } - if (!sideBarIsland.classList.contains('pf-v6-c-page__sidebar')) { - sideBarIsland.classList.add('pf-v6-c-page__sidebar', 'pf-m-expanded') + if (!sideBarIsland.classList.contains(styles.pageSidebar)) { + sideBarIsland.classList.add( + styles.pageSidebar, + $isNavOpen ? styles.modifiers.expanded : styles.modifiers.collapsed, + ) } else { - sideBarIsland.classList.toggle('pf-m-expanded') - sideBarIsland.classList.toggle('pf-m-collapsed') + sideBarIsland.classList.toggle(styles.modifiers.expanded) + sideBarIsland.classList.toggle(styles.modifiers.collapsed) } - } - - function onToggle() { - isNavOpen.set(!$isNavOpen) - } - - useEffect(() => { - applySidebarStylesToIsland() + sideBarIsland.setAttribute('aria-hidden', `${!$isNavOpen}`) }, [$isNavOpen]) return ( diff --git a/src/components/__tests__/__snapshots__/Navigation.test.tsx.snap b/src/components/__tests__/__snapshots__/Navigation.test.tsx.snap index c24ba39..fbf910f 100644 --- a/src/components/__tests__/__snapshots__/Navigation.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Navigation.test.tsx.snap @@ -3,173 +3,168 @@ exports[`matches snapshot 1`] = `
-
- -
+ Entry3 + + + + + + + +
`;