fix(frontend): fix navbar to apply correct logo and position in defau…

…lt theme Signed-off-by: Jenny <[email protected]> use absolute path
kubeflow · Feb 18, 2025 · 5e5b140 · 5e5b140
1 parent 246f41d
commit 5e5b140
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/clients/ui/frontend/src/app/NavBar.tsx b/clients/ui/frontend/src/app/NavBar.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 import {
+  Brand,
   Dropdown,
   DropdownItem,
   DropdownList,
   Masthead,
+  MastheadBrand,
   MastheadContent,
+  MastheadLogo,
   MastheadMain,
   MastheadToggle,
   MenuToggle,
@@ -18,6 +21,8 @@ import {
 import { SimpleSelect } from '@patternfly/react-templates';
 import { BarsIcon } from '@patternfly/react-icons';
 import { NamespaceSelectorContext } from '~/shared/context/NamespaceSelectorContext';
+import { isMUITheme } from '~/shared/utilities/const';
+import logoDarkTheme from '~/images/logo-dark-theme.svg';
 
 interface NavBarProps {
   username?: string;
@@ -55,6 +60,15 @@ const NavBar: React.FC<NavBarProps> = ({ username, onLogout }) => {
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
+        {!isMUITheme() ? (
+          <MastheadBrand>
+            <MastheadLogo component="a">
+              <Brand src={logoDarkTheme} alt="Kubeflow" heights={{ default: '36px' }} />
+            </MastheadLogo>
+          </MastheadBrand>
+        ) : (
+          ''
+        )}
       </MastheadMain>
       <MastheadContent>
         <Toolbar>

diff --git a/clients/ui/frontend/src/app/NavSidebar.tsx b/clients/ui/frontend/src/app/NavSidebar.tsx
@@ -9,7 +9,7 @@ import {
   PageSidebar,
   PageSidebarBody,
 } from '@patternfly/react-core';
-import { LOGO_LIGHT } from '~/shared/utilities/const';
+import { isMUITheme, LOGO_LIGHT } from '~/shared/utilities/const';
 import { useNavData, isNavDataGroup, NavDataHref, NavDataGroup } from './AppRoutes';
 
 const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => (
@@ -48,13 +48,17 @@ const NavSidebar: React.FC = () => {
       <PageSidebarBody>
         <Nav id="nav-primary-simple">
           <NavList id="nav-list-simple">
-            <NavItem>
-              <Brand
-                className="kubeflow_brand"
-                src={`${window.location.origin}/images/${LOGO_LIGHT}`}
-                alt="Kubeflow Logo"
-              />
-            </NavItem>
+            {isMUITheme() ? (
+              <NavItem>
+                <Brand
+                  className="kubeflow_brand"
+                  src={`${window.location.origin}/images/${LOGO_LIGHT}`}
+                  alt="Kubeflow Logo"
+                />
+              </NavItem>
+            ) : (
+              ''
+            )}
             {navData.map((item) =>
               isNavDataGroup(item) ? (
                 <NavGroup key={item.label} item={item} />