Skip to content

Commit 8f25d29

Browse files
jenny-s51jenny-s51
authored
Theme Sidebar and Nav Items for Consistency with Central Dashboard UI (kubeflow#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
1 parent ea1afd2 commit 8f25d29

File tree

4 files changed

+87
-30
lines changed

4 files changed

+87
-30
lines changed

‎clients/ui/frontend/src/app/App.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,17 @@ import '@patternfly/react-core/dist/styles/base.css';
33
import './app.css';
44
import {
55
Alert,
6-
Brand,
76
Bullseye,
87
Button,
98
Masthead,
10-
MastheadBrand,
119
MastheadContent,
1210
MastheadMain,
13-
MastheadToggle,
1411
Page,
1512
PageSection,
16-
PageToggleButton,
1713
Spinner,
1814
Stack,
1915
StackItem,
2016
} from '@patternfly/react-core';
21-
import { BarsIcon } from '@patternfly/react-icons';
2217
import ToastNotifications from '~/shared/components/ToastNotifications';
2318
import { useSettings } from '~/shared/hooks/useSettings';
2419
import { isMUITheme, Theme } from '~/shared/utilities/const';
@@ -89,21 +84,7 @@ const App: React.FC = () => {
8984

9085
const masthead = (
9186
<Masthead>
92-
<MastheadMain>
93-
<MastheadToggle>
94-
<PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
95-
<BarsIcon />
96-
</PageToggleButton>
97-
</MastheadToggle>
98-
<MastheadBrand>
99-
<Brand
100-
className="kubeflow_brand"
101-
src={`${window.location.origin}/images/logo.svg`}
102-
alt="Kubeflow Logo"
103-
/>
104-
</MastheadBrand>
105-
</MastheadMain>
106-
87+
<MastheadMain />
10788
<MastheadContent>
10889
{/* TODO: [Auth-enablement] Add logout and user status once we enable itNavigates to register page from table toolbar */}
10990
</MastheadContent>

‎clients/ui/frontend/src/app/NavSidebar.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { NavLink } from 'react-router-dom';
33
import {
4+
Brand,
45
Nav,
56
NavExpandable,
67
NavItem,
@@ -46,6 +47,13 @@ const NavSidebar: React.FC = () => {
4647
<PageSidebarBody>
4748
<Nav id="nav-primary-simple">
4849
<NavList id="nav-list-simple">
50+
<NavItem>
51+
<Brand
52+
className="kubeflow_brand"
53+
src={`${window.location.origin}/images/logo.svg`}
54+
alt="Kubeflow Logo"
55+
/>
56+
</NavItem>
4957
{navData.map((item) =>
5058
isNavDataGroup(item) ? (
5159
<NavGroup key={item.label} item={item} />

‎clients/ui/frontend/src/images/logo.svg‎

Lines changed: 9 additions & 9 deletions
Loading

‎clients/ui/frontend/src/shared/style/MUI-theme.scss‎

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@
5555
--mui-radio__input--Width: 10px;
5656
--mui-radio__input--Height: 10px;
5757

58+
// Sidebar from https://github.com/kubeflow/kubeflow/blob/4275d99754ac91f6cf5654b03824a73825e9fe55/components/centraldashboard/public/components/main-page.css#L7C1-L13C51
59+
--kf-central-primary-background-color: #0a3b71;
60+
--kf-central-sidebar-default-color: #ffffff90;
61+
--kf-central-app-drawer-width: 240px;
62+
--kf-central-app-bar-height: 64px;
63+
5864
// Table
5965
--mui-table__button--BackgroundColor: none;
6066
--mui-table__button--hover--BackgroundColor: none;
@@ -133,6 +139,10 @@
133139
--pf-v6-c-alert__icon--MarginBlockEnd: var(--mui-alert__icon--MarginBlockEnd);
134140
}
135141

142+
.mui-theme .pf-v6-c-brand.kubeflow_brand {
143+
padding: var(--pf-t--global--spacer--md);
144+
}
145+
136146
.mui-theme .pf-v6-c-button {
137147
--pf-v6-c-button--FontWeight: var(--mui-button-font-weight);
138148
--pf-v6-c-button--PaddingBlockStart: var(--mui-button--PaddingBlockStart);
@@ -490,6 +500,36 @@
490500
display: block;
491501
}
492502

503+
.mui-theme .pf-v6-c-nav {
504+
padding-block-start: 0;
505+
}
506+
507+
.mui-theme .pf-v6-c-nav__link {
508+
--pf-v6-c-nav__link--BorderRadius: 0px;
509+
--pf-v6-c-nav__link--hover--BackgroundColor: #ffffff1b;
510+
--pf-v6-c-nav__link--Color: var(--kf-central-sidebar-default-color);
511+
--pf-v6-c-nav__link--hover--Color: var(--kf-central-sidebar-default-color);
512+
--pf-v6-c-nav__link--FontSize: var(--pf-t--global--font--size--md);
513+
514+
&.active {
515+
border-left: 3px solid var(--mui-palette-common-white);
516+
--pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
517+
--pf-v6-c-nav__link--hover--Color: var(--mui-palette-common-white);
518+
}
519+
520+
&.pf-v6-c-brand {
521+
--pf-v6-c-nav__link--hover--BackgroundColor: none;
522+
}
523+
}
524+
525+
.mui-theme .pf-v6-c-nav__link:focus {
526+
--pf-v6-c-nav__link--Color: var(--mui-palette-common-white);
527+
}
528+
529+
.mui-theme .pf-v6-c-nav__list {
530+
row-gap: none;
531+
}
532+
493533
.mui-theme .pf-v6-radio {
494534
--pf-v6-c-radio--AccentColor: var(--mui-palette-primary-main);
495535
}
@@ -533,6 +573,16 @@
533573
border-color: var(--mui-palette-primary-main);
534574
}
535575

576+
.mui-theme .pf-v6-c-page__sidebar {
577+
--pf-v6-c-page__sidebar--BackgroundColor: var(--kf-central-primary-background-color);
578+
}
579+
580+
.mui-theme .pf-v6-c-page__sidebar-body {
581+
--pf-v6-c-page__sidebar-body--PaddingInlineStart: 0px;
582+
--pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0px;
583+
584+
}
585+
536586
/* Inner dot for checked state */
537587
.mui-theme .pf-v6-c-radio__input:checked+.pf-v6-c-radio__label::after {
538588
content: '';
@@ -693,6 +743,11 @@
693743
--pf-v6-c-label--BackgroundColor: var(--mui-palette-grey-200);
694744
padding: 4px;
695745
}
746+
.mui-theme .pf-v6-c-masthead {
747+
--pf-v6-c-masthead--BackgroundColor: var(--mui-palette-common-white);
748+
box-shadow: var(--mui-shadows-1);
749+
min-height: var(--kf-central-app-bar-height);
750+
}
696751

697752
.mui-theme .pf-v6-c-modal-box {
698753
--pf-v6-c-modal-box--BorderRadius: 0;
@@ -730,4 +785,17 @@
730785

731786
.mui-theme .pf-v6-c-pagination__page-menu::before {
732787
content: 'Rows per page:';
733-
}
788+
}
789+
790+
.mui-theme .pf-v6-c-page__sidebar {
791+
position: absolute;
792+
--pf-v6-c-page__sidebar--Width: var(--kf-central-app-drawer-width); /* Sidebar width */
793+
height: 100vh; /* Take full height of viewport */
794+
z-index: 300; /* Position sidebar above the masthead */
795+
}
796+
797+
.mui-theme .pf-v6-c-page__main-container {
798+
margin-left: var(--kf-central-app-drawer-width); /* Move content area to right of the sidebar */
799+
margin-top: var(--kf-central-app-bar-height); /* Move content area below the app bar */
800+
}
801+

0 commit comments

Comments
 (0)