From dff8249093e76144b8197b73cc6462216805f9a7 Mon Sep 17 00:00:00 2001
From: Julien Pinsonneau <jpinsonn@redhat.com>
Date: Thu, 3 Jul 2025 17:58:37 +0200
Subject: [PATCH] fix pf6 expand / collapse

---
 web/src/app.tsx                        |  2 +-
 web/src/components/netflow-traffic.tsx | 21 ++++++++++++++++++++-
 web/src/utils/theme-hook.ts            |  8 ++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/web/src/app.tsx b/web/src/app.tsx
index 5b9010663..001e8f9b2 100755
--- a/web/src/app.tsx
+++ b/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>
diff --git a/web/src/components/netflow-traffic.tsx b/web/src/components/netflow-traffic.tsx
index 7184b5ec7..04aa9def7 100644
--- a/web/src/components/netflow-traffic.tsx
+++ b/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 {
diff --git a/web/src/utils/theme-hook.ts b/web/src/utils/theme-hook.ts
index 4785c260b..6d314cd1b 100644
--- a/web/src/utils/theme-hook.ts
+++ b/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')
+        );
       }
     });
   });