Merge pull request #28 from thatblindgeye/sidebarBug

fix(PageToggle): resolved sidebar not collapsing correctly

Author: wise-king-sullyman

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<NavigationProps> = ({
   navEntries,
 }: NavigationProps) => {
-  const $isNavOpen = useStore(isNavOpen)
   const [activeItem, setActiveItem] = useState('')
 
   useEffect(() => {
@@ -47,12 +39,11 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
   })
 
   return (
-    <PageSidebar isSidebarOpen={$isNavOpen}>
-      <PageSidebarBody>
-        <Nav onSelect={onNavSelect}>
-          <NavList>{navSections}</NavList>
-        </Nav>
-      </PageSidebarBody>
-    </PageSidebar>
+    // Can possibly add back PageSidebar wrapper when https://github.com/patternfly/patternfly/issues/7377 goes in
+    <PageSidebarBody id="page-sidebar-body">
+      <Nav onSelect={onNavSelect}>
+        <NavList>{navSections}</NavList>
+      </Nav>
+    </PageSidebarBody>
   )
 }

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 (
     <PageToggleButton
-      variant="plain"
       aria-label="Global navigation"
       onSidebarToggle={onToggle}
+      isSidebarOpen={$isNavOpen}
     >
       <BarsIcon />
     </PageToggleButton>