fix pf6 expand / collapse

Author: jpinsonneau

web/src/app.tsx

@@ -108,7 +108,7 @@ export const App: React.FunctionComponent = () => {
           aria-label="Global navigation"
           isSidebarOpen={isSidebarOpen}
           onSidebarToggle={onSidebarToggle}
-          id="vertical-nav-toggle"
+          id="nav-toggle"
         >
           <BarsIcon />
         </PageToggleButton>

web/src/components/netflow-traffic.tsx

@@ -735,10 +735,29 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({
 
   //update page on full screen change
   React.useEffect(() => {
+    // collapse pf6 navigation for compatibility
+    if (model.isFullScreen && document.getElementsByClassName('pf-v6-c-page__sidebar pf-m-expanded').length) {
+      document.getElementById('nav-toggle')?.click();
+    }
+
     const header = document.getElementById('page-main-header');
+    const headersV5Compat = document.getElementsByClassName('pf-v5-c-masthead');
+    const headersV6Compat = document.getElementsByClassName('pf-v6-c-masthead');
+
     const sideBar = document.getElementById('page-sidebar');
+    const sideBarsV5Compat = document.getElementsByClassName('pf-v5-c-page__sidebar');
+    const sideBarsV6Compat = document.getElementsByClassName('pf-v6-c-page__sidebar');
+
     const notification = document.getElementsByClassName('co-global-notifications');
-    [header, sideBar, ...notification].forEach(e => {
+    [
+      header,
+      ...headersV5Compat,
+      ...headersV6Compat,
+      sideBar,
+      ...sideBarsV5Compat,
+      ...sideBarsV6Compat,
+      ...notification
+    ].forEach(e => {
       if (model.isFullScreen) {
         e?.classList.add('hidden');
       } else {

web/src/utils/theme-hook.ts

@@ -2,12 +2,16 @@ import * as React from 'react';
 
 export function useTheme(): boolean {
   const [isDarkTheme, setDarkTheme] = React.useState<boolean>(
-    document.documentElement.classList.contains('pf-v5-theme-dark')
+    document.documentElement.classList.contains('pf-v5-theme-dark') ||
+      document.documentElement.classList.contains('pf-v6-theme-dark')
   );
   const observer = new MutationObserver((mutations: MutationRecord[]) => {
     mutations.forEach((mutation: MutationRecord) => {
       if (mutation.attributeName === 'class') {
-        setDarkTheme((mutation.target as HTMLElement).classList.contains('pf-v5-theme-dark'));
+        setDarkTheme(
+          (mutation.target as HTMLElement).classList.contains('pf-v5-theme-dark') ||
+            (mutation.target as HTMLElement).classList.contains('pf-v6-theme-dark')
+        );
       }
     });
   });