From 77c8a6ab233788be2ae09c06922aa3c6ff0d9a6f Mon Sep 17 00:00:00 2001
From: Celia Amador <camadorg@redhat.com>
Date: Wed, 1 Oct 2025 09:47:09 +0200
Subject: [PATCH] Adjust new subnav bar to UX designs

---
 .../components/AppLayout/AppNavigation.tsx    |  2 +-
 .../app/components/AppLayout/AppToolbar.css   | 16 ++++++-
 .../src/components/common/PageNavigation.tsx  | 42 ++++++++++---------
 3 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/apps/standalone/src/app/components/AppLayout/AppNavigation.tsx b/apps/standalone/src/app/components/AppLayout/AppNavigation.tsx
index 1bbcdda5e..0e5219cfe 100644
--- a/apps/standalone/src/app/components/AppLayout/AppNavigation.tsx
+++ b/apps/standalone/src/app/components/AppLayout/AppNavigation.tsx
@@ -10,7 +10,7 @@ const AppNavigation = () => {
   const { t } = useTranslation();
   return (
     <Nav id="flightclt-nav" theme="dark">
-      <NavList id="flightclt-navlist">
+      <NavList id="flightclt-navlist" style={{ padding: 0 }}>
         {getAppRoutes(t)
           .filter((route) => route.showInNav)
           .map((route) => {
diff --git a/apps/standalone/src/app/components/AppLayout/AppToolbar.css b/apps/standalone/src/app/components/AppLayout/AppToolbar.css
index e8b75be49..86ea0f369 100644
--- a/apps/standalone/src/app/components/AppLayout/AppToolbar.css
+++ b/apps/standalone/src/app/components/AppLayout/AppToolbar.css
@@ -1,3 +1,15 @@
-.fctl-app_toolbar {
-    justify-content: end;
+.fctl-app_toolbar,
+.fctl-subnav_toolbar {
+  justify-content: flex-end;
+}
+
+/* Extra navigation bar for global actions (organization switcher, copy login command, etc.) */
+/* We make it as tall as the navigation menu items on the left */
+#global-actions-masthead {
+  padding: 0;
+  --pf-v5-c-masthead--m-display-inline__content--MinHeight: 3.5rem;
+}
+
+#global-actions-masthead .fctl-subnav_toolbar {
+  --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
 }
diff --git a/libs/ui-components/src/components/common/PageNavigation.tsx b/libs/ui-components/src/components/common/PageNavigation.tsx
index b9c5644bc..42a985e2a 100644
--- a/libs/ui-components/src/components/common/PageNavigation.tsx
+++ b/libs/ui-components/src/components/common/PageNavigation.tsx
@@ -3,6 +3,8 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Masthead,
+  MastheadContent,
   MenuToggle,
   MenuToggleElement,
   PageSection,
@@ -44,6 +46,7 @@ const OrganizationDropdown = ({ organizationName, onSwitchOrganization }: Organi
           {organizationName}
         </MenuToggle>
       )}
+      popperProps={{ position: 'right' }}
     >
       <DropdownList>
         <DropdownItem onClick={onSwitchOrganization}>{t('Change Organization')}</DropdownItem>
@@ -52,14 +55,12 @@ const OrganizationDropdown = ({ organizationName, onSwitchOrganization }: Organi
   );
 };
 
-const PageNavigation = ({ children }: React.PropsWithChildren) => {
+const PageNavigation = () => {
   const { currentOrganization, availableOrganizations } = useOrganizationGuardContext();
   const [showOrganizationModal, setShowOrganizationModal] = React.useState(false);
 
   const showOrganizationSelection = availableOrganizations.length > 1;
-  const hasChildren = React.Children.count(children) > 0;
-
-  if (!showOrganizationSelection && !hasChildren) {
+  if (!showOrganizationSelection) {
     return null;
   }
 
@@ -68,21 +69,24 @@ const PageNavigation = ({ children }: React.PropsWithChildren) => {
   return (
     <>
       <PageSection variant="light" padding={{ default: 'noPadding' }}>
-        <Toolbar isFullHeight isStatic className="fctl-app_toolbar">
-          <ToolbarContent>
-            {hasChildren && <ToolbarItem>{children}</ToolbarItem>}
-            {showOrganizationSelection && (
-              <ToolbarItem>
-                <OrganizationDropdown
-                  organizationName={currentOrgDisplayName}
-                  onSwitchOrganization={() => {
-                    setShowOrganizationModal(true);
-                  }}
-                />
-              </ToolbarItem>
-            )}
-          </ToolbarContent>
-        </Toolbar>
+        <Masthead id="global-actions-masthead">
+          <MastheadContent>
+            <Toolbar isFullHeight isStatic className="fctl-subnav_toolbar">
+              <ToolbarContent>
+                {showOrganizationSelection && (
+                  <ToolbarItem>
+                    <OrganizationDropdown
+                      organizationName={currentOrgDisplayName}
+                      onSwitchOrganization={() => {
+                        setShowOrganizationModal(true);
+                      }}
+                    />
+                  </ToolbarItem>
+                )}
+              </ToolbarContent>
+            </Toolbar>
+          </MastheadContent>
+        </Masthead>
       </PageSection>
 
       {showOrganizationModal && (