Skip to content

Commit 9496b1c

Browse files
ciiayciiay
authored
fix(global-header): set above-sidebar as default header position in dev (#827)
* fix(global-header): set above-sidebar as default header position in dev Signed-off-by: Yi Cai <yicai@redhat.com> * fixed failed ci checks Signed-off-by: Yi Cai <yicai@redhat.com> * removed hardcoded amount Signed-off-by: Yi Cai <yicai@redhat.com> * updated var name Signed-off-by: Yi Cai <yicai@redhat.com> * yarn dedupe Signed-off-by: Yi Cai <yicai@redhat.com> --------- Signed-off-by: Yi Cai <yicai@redhat.com>
1 parent ab6a532 commit 9496b1c

4 files changed

Lines changed: 93 additions & 66 deletions

File tree

‎workspaces/global-header/packages/app/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,10 @@
4848
"@material-ui/core": "^4.12.2",
4949
"@material-ui/icons": "^4.9.1",
5050
"@mui/icons-material": "5.16.14",
51+
"@mui/material": "5.16.14",
5152
"@red-hat-developer-hub/backstage-plugin-global-header": "workspace:^",
5253
"@red-hat-developer-hub/backstage-plugin-global-header-test": "workspace:^",
53-
"@red-hat-developer-hub/backstage-plugin-theme": "^0.8.1",
54+
"@red-hat-developer-hub/backstage-plugin-theme": "^0.8.2",
5455
"react": "^18.0.2",
5556
"react-dom": "^18.0.2",
5657
"react-router": "^6.3.0",

‎workspaces/global-header/packages/app/src/App.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
*/
1616

1717
import React from 'react';
18+
// eslint-disable-next-line no-restricted-imports
19+
import { GlobalStyles } from '@mui/material';
1820
import { Navigate, Route } from 'react-router-dom';
1921
import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
2022
import {
@@ -137,6 +139,15 @@ const routes = (
137139

138140
export default app.createRoot(
139141
<>
142+
<GlobalStyles
143+
styles={{
144+
html: { overflowY: 'hidden' },
145+
':root': {
146+
'--rhdh-v1-page-inset': '1.5rem',
147+
'--global-header-default-height': '64px',
148+
},
149+
}}
150+
/>
140151
<AlertDisplay />
141152
<OAuthRequestDialog />
142153
<SignalsDisplay />

‎workspaces/global-header/packages/app/src/components/Root/Root.tsx‎

Lines changed: 74 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,14 @@ import { makeStyles } from '@material-ui/core';
1919
import HomeIcon from '@material-ui/icons/Home';
2020
import ExtensionIcon from '@material-ui/icons/Extension';
2121
import LibraryBooks from '@material-ui/icons/LibraryBooks';
22-
import LogoFull from './LogoFull';
23-
import LogoIcon from './LogoIcon';
2422
import {
2523
Sidebar,
26-
sidebarConfig,
2724
SidebarDivider,
2825
SidebarGroup,
2926
SidebarItem,
3027
SidebarPage,
3128
SidebarScrollWrapper,
3229
SidebarSpace,
33-
useSidebarOpenState,
34-
Link,
3530
} from '@backstage/core-components';
3631
import MenuIcon from '@material-ui/icons/Menu';
3732
import { MyGroupsSidebarItem } from '@backstage/plugin-org';
@@ -42,66 +37,85 @@ import {
4237
} from '@red-hat-developer-hub/backstage-plugin-global-header';
4338
import { NotificationsSidebarItem } from '@backstage/plugin-notifications';
4439

45-
const useSidebarLogoStyles = makeStyles({
46-
root: {
47-
width: sidebarConfig.drawerWidthClosed,
48-
height: 3 * sidebarConfig.logoHeight,
49-
display: 'flex',
50-
flexFlow: 'row nowrap',
51-
alignItems: 'center',
52-
marginBottom: -14,
40+
const useStyles = makeStyles(() => ({
41+
pageWithoutFixHeight: {
42+
'> div[class*="-sidebarLayout"]': {
43+
height: '100vh',
44+
display: 'flex',
45+
flexDirection: 'column',
46+
},
47+
'> div > main': {
48+
height: 'unset',
49+
flexGrow: 1,
50+
},
51+
'.techdocs-reader-page > main': {
52+
height: 'unset',
53+
},
5354
},
54-
link: {
55-
width: sidebarConfig.drawerWidthClosed,
56-
marginLeft: 24,
55+
sidebarItem: {
56+
textDecorationLine: 'none',
5757
},
58-
});
58+
sidebarLayout: {
59+
'& div[class*="BackstageSidebar-drawer"]': {
60+
top: 'var(--global-header-default-height, 64px)',
61+
height: 'calc(100vh - var(--global-header-default-height, 64px))',
62+
},
63+
'& main[class*="BackstagePage-root"]': {
64+
height: `calc(100vh - (var(--global-header-default-height, 64px) - var(--rhdh-v1-page-inset, 1.5rem)))`,
65+
marginTop: 'calc(-1 * var(--rhdh-v1-page-inset, 1.5rem))',
66+
marginBottom: 'calc(-1 * var(--rhdh-v1-page-inset, 1.5rem))',
67+
overflow: 'hidden',
68+
display: 'flex',
69+
flexDirection: 'column',
70+
'& article': {
71+
flex: 1,
72+
overflow: 'auto',
73+
},
74+
},
75+
},
76+
}));
5977

60-
const SidebarLogo = () => {
61-
const classes = useSidebarLogoStyles();
62-
const { isOpen } = useSidebarOpenState();
78+
export const Root = ({ children = null }: PropsWithChildren<{}>) => {
79+
const { pageWithoutFixHeight, sidebarLayout } = useStyles();
6380

6481
return (
65-
<div className={classes.root}>
66-
<Link to="/" underline="none" className={classes.link} aria-label="Home">
67-
{isOpen ? <LogoFull /> : <LogoIcon />}
68-
</Link>
82+
<div className={pageWithoutFixHeight}>
83+
<div>
84+
{/* update globalHeaderMountPoints config to test Global header */}
85+
<GlobalHeaderComponent
86+
globalHeaderMountPoints={defaultGlobalHeaderComponentsMountPoints}
87+
/>
88+
</div>
89+
<div className={sidebarLayout}>
90+
<SidebarPage>
91+
<Sidebar>
92+
<SidebarGroup label="Menu" icon={<MenuIcon />}>
93+
{/* Global nav, not org-specific */}
94+
<SidebarItem icon={HomeIcon} to="catalog" text="Home" />
95+
<MyGroupsSidebarItem
96+
singularTitle="My Group"
97+
pluralTitle="My Groups"
98+
icon={GroupIcon}
99+
/>
100+
<SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
101+
<SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
102+
<NotificationsSidebarItem
103+
webNotificationsEnabled
104+
titleCounterEnabled
105+
snackbarEnabled
106+
/>
107+
{/* End global nav */}
108+
<SidebarDivider />
109+
<SidebarScrollWrapper>
110+
{/* Items in this group will be scrollable if they run out of space */}
111+
</SidebarScrollWrapper>
112+
</SidebarGroup>
113+
<SidebarSpace />
114+
<SidebarDivider />
115+
</Sidebar>
116+
{children}
117+
</SidebarPage>
118+
</div>
69119
</div>
70120
);
71121
};
72-
73-
export const Root = ({ children = null }: PropsWithChildren<{}>) => (
74-
<SidebarPage>
75-
{/* update globalHeaderMountPoints config to test Global header */}
76-
<GlobalHeaderComponent
77-
globalHeaderMountPoints={defaultGlobalHeaderComponentsMountPoints}
78-
/>
79-
<Sidebar>
80-
<SidebarLogo />
81-
<SidebarGroup label="Menu" icon={<MenuIcon />}>
82-
{/* Global nav, not org-specific */}
83-
<SidebarItem icon={HomeIcon} to="catalog" text="Home" />
84-
<MyGroupsSidebarItem
85-
singularTitle="My Group"
86-
pluralTitle="My Groups"
87-
icon={GroupIcon}
88-
/>
89-
<SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
90-
<SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
91-
<NotificationsSidebarItem
92-
webNotificationsEnabled
93-
titleCounterEnabled
94-
snackbarEnabled
95-
/>
96-
{/* End global nav */}
97-
<SidebarDivider />
98-
<SidebarScrollWrapper>
99-
{/* Items in this group will be scrollable if they run out of space */}
100-
</SidebarScrollWrapper>
101-
</SidebarGroup>
102-
<SidebarSpace />
103-
<SidebarDivider />
104-
</Sidebar>
105-
{children}
106-
</SidebarPage>
107-
);

‎workspaces/global-header/yarn.lock‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11420,9 +11420,9 @@ __metadata:
1142011420
languageName: unknown
1142111421
linkType: soft
1142211422

11423-
"@red-hat-developer-hub/backstage-plugin-theme@npm:^0.8.1":
11424-
version: 0.8.1
11425-
resolution: "@red-hat-developer-hub/backstage-plugin-theme@npm:0.8.1"
11423+
"@red-hat-developer-hub/backstage-plugin-theme@npm:^0.8.1, @red-hat-developer-hub/backstage-plugin-theme@npm:^0.8.2":
11424+
version: 0.8.2
11425+
resolution: "@red-hat-developer-hub/backstage-plugin-theme@npm:0.8.2"
1142611426
dependencies:
1142711427
"@mui/icons-material": ^5.17.1
1142811428
peerDependencies:
@@ -11432,7 +11432,7 @@ __metadata:
1143211432
"@mui/icons-material": ^5.17.1
1143311433
"@mui/material": ^5.0.0
1143411434
react: ^16.13.1 || ^17.0.0 || ^18.0.0
11435-
checksum: 0d492e2bc4deb69525687219fd30965bffff84a8a9521323c5b0000302957c1c9f58aa1096ca760a71de282fc36aba1029a8fdd1ce6d1eae33db74e199631a9f
11435+
checksum: 76488ae3fbb9fabdd936d7a1353fda0b1d11fa9439cb33333678eccfcd71fdd1c9cf60418828d94ee26f3b1874a873767996eebbedb01b3fbf57200dee5c562d
1143611436
languageName: node
1143711437
linkType: hard
1143811438

@@ -16368,10 +16368,11 @@ __metadata:
1636816368
"@material-ui/core": ^4.12.2
1636916369
"@material-ui/icons": ^4.9.1
1637016370
"@mui/icons-material": 5.16.14
16371+
"@mui/material": 5.16.14
1637116372
"@playwright/test": 1.50.1
1637216373
"@red-hat-developer-hub/backstage-plugin-global-header": "workspace:^"
1637316374
"@red-hat-developer-hub/backstage-plugin-global-header-test": "workspace:^"
16374-
"@red-hat-developer-hub/backstage-plugin-theme": ^0.8.1
16375+
"@red-hat-developer-hub/backstage-plugin-theme": ^0.8.2
1637516376
"@testing-library/dom": ^9.0.0
1637616377
"@testing-library/jest-dom": ^6.0.0
1637716378
"@testing-library/react": ^14.0.0

0 commit comments

Comments
 (0)