Theme Sidebar and Nav Items for Consistency with Central Dashboard UI (…

…#596) Signed-off-by: Jenny <[email protected]> remove unused components apply font color and border to selected nav items remove unused vars Signed-off-by: Jenny <[email protected]> format and remove unused imports Signed-off-by: Jenny <[email protected]> fix a11y issues Signed-off-by: Jenny <[email protected]> add navbar Signed-off-by: Jenny <[email protected]> temporarily revert fix to force a11y error in GH actions Signed-off-by: Jenny <[email protected]> revert color back to fix a11y error Signed-off-by: Jenny <[email protected]> remove hover color on brand image
kubeflow · Dec 4, 2024 · 8f25d29 · 8f25d29
1 parent ea1afd2
commit 8f25d29
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 30 deletions.
diff --git a/clients/ui/frontend/src/app/App.tsx b/clients/ui/frontend/src/app/App.tsx
@@ -3,22 +3,17 @@ import '@patternfly/react-core/dist/styles/base.css';
 import './app.css';
 import {
   Alert,
-  Brand,
   Bullseye,
   Button,
   Masthead,
-  MastheadBrand,
   MastheadContent,
   MastheadMain,
-  MastheadToggle,
   Page,
   PageSection,
-  PageToggleButton,
   Spinner,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { BarsIcon } from '@patternfly/react-icons';
 import ToastNotifications from '~/shared/components/ToastNotifications';
 import { useSettings } from '~/shared/hooks/useSettings';
 import { isMUITheme, Theme } from '~/shared/utilities/const';
@@ -89,21 +84,7 @@ const App: React.FC = () => {
 
   const masthead = (
     <Masthead>
-      <MastheadMain>
-        <MastheadToggle>
-          <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
-        <MastheadBrand>
-          <Brand
-            className="kubeflow_brand"
-            src={`${window.location.origin}/images/logo.svg`}
-            alt="Kubeflow Logo"
-          />
-        </MastheadBrand>
-      </MastheadMain>
-
+      <MastheadMain />
       <MastheadContent>
         {/* TODO: [Auth-enablement] Add logout and user status once we enable itNavigates to register page from table toolbar */}
       </MastheadContent>

diff --git a/clients/ui/frontend/src/app/NavSidebar.tsx b/clients/ui/frontend/src/app/NavSidebar.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import {
+  Brand,
   Nav,
   NavExpandable,
   NavItem,
@@ -46,6 +47,13 @@ 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.svg`}
+                alt="Kubeflow Logo"
+              />
+            </NavItem>
             {navData.map((item) =>
               isNavDataGroup(item) ? (
                 <NavGroup key={item.label} item={item} />

diff --git a/clients/ui/frontend/src/images/logo.svg b/clients/ui/frontend/src/images/logo.svg
diff --git a/clients/ui/frontend/src/shared/style/MUI-theme.scss b/clients/ui/frontend/src/shared/style/MUI-theme.scss
@@ -55,6 +55,12 @@
   --mui-radio__input--Width: 10px;
   --mui-radio__input--Height: 10px;
 
+  // Sidebar from https://github.com/kubeflow/kubeflow/blob/4275d99754ac91f6cf5654b03824a73825e9fe55/components/centraldashboard/public/components/main-page.css#L7C1-L13C51 
+  --kf-central-primary-background-color: #0a3b71;
+  --kf-central-sidebar-default-color: #ffffff90;
+  --kf-central-app-drawer-width: 240px;
+  --kf-central-app-bar-height: 64px;
+
   // Table
   --mui-table__button--BackgroundColor: none;
   --mui-table__button--hover--BackgroundColor: none;
@@ -133,6 +139,10 @@
   --pf-v6-c-alert__icon--MarginBlockEnd: var(--mui-alert__icon--MarginBlockEnd);
 }
 
+.mui-theme .pf-v6-c-brand.kubeflow_brand {
+  padding: var(--pf-t--global--spacer--md);
+}
+
 .mui-theme .pf-v6-c-button {
   --pf-v6-c-button--FontWeight: var(--mui-button-font-weight);
   --pf-v6-c-button--PaddingBlockStart: var(--mui-button--PaddingBlockStart);
@@ -490,6 +500,36 @@
   display: block;
 }
 
+.mui-theme .pf-v6-c-nav {
+  padding-block-start: 0;
+}
+
+.mui-theme .pf-v6-c-nav__link {
+  --pf-v6-c-nav__link--BorderRadius: 0px;
+  --pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
+  --pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
+  --pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
+  --pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
+
+  &.active {
+    border-left: 3px solid var(--mui-palette-common-white);
+    --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
+    --pf-v6-c-nav__link--hover--Color: var(--mui-palette-common-white);
+  }
+
+  &.pf-v6-c-brand {
+    --pf-v6-c-nav__link--hover--BackgroundColor: none;
+  }
+}
+
+.mui-theme .pf-v6-c-nav__link:focus {
+  --pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
+}
+
+.mui-theme .pf-v6-c-nav__list {
+  row-gap: none;
+}
+
 .mui-theme .pf-v6-radio {
   --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-main);
 }
@@ -533,6 +573,16 @@
   border-color: var(--mui-palette-primary-main);
 }
 
+.mui-theme .pf-v6-c-page__sidebar {
+  --pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
+}
+
+.mui-theme .pf-v6-c-page__sidebar-body {
+  --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0px;
+  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0px;
+
+}
+
 /* Inner dot for checked state */
 .mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::after {
   content: '';
@@ -693,6 +743,11 @@
   --pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
   padding: 4px;
 }
+.mui-theme .pf-v6-c-masthead {
+  --pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
+  box-shadow: var(--mui-shadows-1);
+  min-height: var(--kf-central-app-bar-height);
+}
 
 .mui-theme .pf-v6-c-modal-box {
   --pf-v6-c-modal-box--BorderRadius: 0;
@@ -730,4 +785,17 @@
 
 .mui-theme .pf-v6-c-pagination__page-menu::before {
   content: 'Rows per page:';
-}
+}
+
+.mui-theme .pf-v6-c-page__sidebar {
+  position: absolute; 
+  --pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width); /* Sidebar width */
+  height: 100vh; /* Take full height of viewport */
+  z-index: 300; /* Position sidebar above the masthead */
+}
+
+.mui-theme .pf-v6-c-page__main-container {
+  margin-left: var(--kf-central-app-drawer-width); /* Move content area to right of the sidebar */
+  margin-top: var(--kf-central-app-bar-height); /* Move content area below the app bar */
+}
+