Skip to content

Commit 626c52a

Browse files
fzaninottofzaninotto
committed
Update Sidebar to remain fixed
Closes #4684 Supersedes #4753
1 parent 5338363 commit 626c52a

File tree

6 files changed

+81
-31
lines changed

6 files changed

+81
-31
lines changed

‎examples/demo/src/layout/Layout.tsx

+2-12
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
import * as React from 'react';
22
import { useSelector } from 'react-redux';
3-
import { Layout, LayoutProps, Sidebar } from 'react-admin';
3+
import { Layout, LayoutProps } from 'react-admin';
44
import AppBar from './AppBar';
55
import Menu from './Menu';
66
import { darkTheme, lightTheme } from './themes';
77
import { AppState } from '../types';
88

9-
const CustomSidebar = (props: any) => <Sidebar {...props} size={200} />;
10-
119
export default (props: LayoutProps) => {
1210
const theme = useSelector((state: AppState) =>
1311
state.theme === 'dark' ? darkTheme : lightTheme
1412
);
15-
return (
16-
<Layout
17-
{...props}
18-
appBar={AppBar}
19-
sidebar={CustomSidebar}
20-
menu={Menu}
21-
theme={theme}
22-
/>
23-
);
13+
return <Layout {...props} appBar={AppBar} menu={Menu} theme={theme} />;
2414
};

‎examples/demo/src/layout/Menu.tsx

+47-8
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { useState } from 'react';
33
import { useSelector } from 'react-redux';
44
import LabelIcon from '@material-ui/icons/Label';
55
import { makeStyles } from '@material-ui/core/styles';
6+
import classnames from 'classnames';
67
import {
78
useTranslate,
89
DashboardMenuItem,
910
MenuItemLink,
1011
MenuProps,
12+
ReduxState,
1113
} from 'react-admin';
1214

1315
import visitors from '../visitors';
@@ -28,6 +30,7 @@ const Menu = ({ dense = false }: MenuProps) => {
2830
menuCustomers: true,
2931
});
3032
const translate = useTranslate();
33+
const open = useSelector((state: ReduxState) => state.admin.ui.sidebarOpen);
3134
useSelector((state: AppState) => state.theme); // force rerender on theme change
3235
const classes = useStyles();
3336

@@ -36,7 +39,12 @@ const Menu = ({ dense = false }: MenuProps) => {
3639
};
3740

3841
return (
39-
<div className={classes.root}>
42+
<div
43+
className={classnames(classes.root, {
44+
[classes.open]: open,
45+
[classes.closed]: !open,
46+
})}
47+
>
4048
{' '}
4149
<DashboardMenuItem />
4250
<SubMenu
@@ -47,15 +55,21 @@ const Menu = ({ dense = false }: MenuProps) => {
4755
dense={dense}
4856
>
4957
<MenuItemLink
50-
to={`/commands`}
58+
to={{
59+
pathname: '/commands',
60+
state: { _scrollToTop: true },
61+
}}
5162
primaryText={translate(`resources.commands.name`, {
5263
smart_count: 2,
5364
})}
5465
leftIcon={<orders.icon />}
5566
dense={dense}
5667
/>
5768
<MenuItemLink
58-
to={`/invoices`}
69+
to={{
70+
pathname: '/invoices',
71+
state: { _scrollToTop: true },
72+
}}
5973
primaryText={translate(`resources.invoices.name`, {
6074
smart_count: 2,
6175
})}
@@ -71,15 +85,21 @@ const Menu = ({ dense = false }: MenuProps) => {
7185
dense={dense}
7286
>
7387
<MenuItemLink
74-
to={`/products`}
88+
to={{
89+
pathname: '/products',
90+
state: { _scrollToTop: true },
91+
}}
7592
primaryText={translate(`resources.products.name`, {
7693
smart_count: 2,
7794
})}
7895
leftIcon={<products.icon />}
7996
dense={dense}
8097
/>
8198
<MenuItemLink
82-
to={`/categories`}
99+
to={{
100+
pathname: '/categories',
101+
state: { _scrollToTop: true },
102+
}}
83103
primaryText={translate(`resources.categories.name`, {
84104
smart_count: 2,
85105
})}
@@ -95,15 +115,21 @@ const Menu = ({ dense = false }: MenuProps) => {
95115
dense={dense}
96116
>
97117
<MenuItemLink
98-
to={`/customers`}
118+
to={{
119+
pathname: '/customers',
120+
state: { _scrollToTop: true },
121+
}}
99122
primaryText={translate(`resources.customers.name`, {
100123
smart_count: 2,
101124
})}
102125
leftIcon={<visitors.icon />}
103126
dense={dense}
104127
/>
105128
<MenuItemLink
106-
to={`/segments`}
129+
to={{
130+
pathname: '/segments',
131+
state: { _scrollToTop: true },
132+
}}
107133
primaryText={translate(`resources.segments.name`, {
108134
smart_count: 2,
109135
})}
@@ -112,7 +138,10 @@ const Menu = ({ dense = false }: MenuProps) => {
112138
/>
113139
</SubMenu>
114140
<MenuItemLink
115-
to={`/reviews`}
141+
to={{
142+
pathname: '/reviews',
143+
state: { _scrollToTop: true },
144+
}}
116145
primaryText={translate(`resources.reviews.name`, {
117146
smart_count: 2,
118147
})}
@@ -126,6 +155,16 @@ const Menu = ({ dense = false }: MenuProps) => {
126155
const useStyles = makeStyles(theme => ({
127156
root: {
128157
marginTop: theme.spacing(1),
158+
transition: theme.transitions.create('width', {
159+
easing: theme.transitions.easing.sharp,
160+
duration: theme.transitions.duration.leavingScreen,
161+
}),
162+
},
163+
open: {
164+
width: 200,
165+
},
166+
closed: {
167+
width: 55,
129168
},
130169
}));
131170

‎examples/demo/src/layout/SubMenu.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ const useStyles = makeStyles(theme => ({
1717
icon: { minWidth: theme.spacing(5) },
1818
sidebarIsOpen: {
1919
'& a': {
20-
paddingLeft: theme.spacing(4),
2120
transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
21+
paddingLeft: theme.spacing(4),
2222
},
2323
},
2424
sidebarIsClosed: {
2525
'& a': {
26-
paddingLeft: theme.spacing(2),
2726
transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
27+
paddingLeft: theme.spacing(2),
2828
},
2929
},
3030
}));

‎examples/demo/src/layout/themes.ts

+6
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ export const darkTheme = {
88
},
99
type: 'dark' as 'dark', // Switching the dark mode on is a single property value change.
1010
},
11+
sidebar: {
12+
width: 200,
13+
},
1114
overrides: {
1215
MuiAppBar: {
1316
colorSecondary: {
@@ -63,6 +66,9 @@ export const lightTheme = {
6366
shape: {
6467
borderRadius: 10,
6568
},
69+
sidebar: {
70+
width: 200,
71+
},
6672
overrides: {
6773
RaMenuItemLink: {
6874
root: {

‎packages/ra-ui-materialui/src/layout/Menu.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@ const useStyles = makeStyles(
2525
[theme.breakpoints.only('xs')]: {
2626
marginTop: 0,
2727
},
28-
[theme.breakpoints.up('md')]: {
29-
marginTop: '1.5em',
30-
},
28+
transition: theme.transitions.create('width', {
29+
easing: theme.transitions.easing.sharp,
30+
duration: theme.transitions.duration.leavingScreen,
31+
}),
3132
},
3233
open: {
3334
width: lodashGet(theme, 'menu.width', MENU_WIDTH),

‎packages/ra-ui-materialui/src/layout/Sidebar.tsx

+20-6
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@ const Sidebar = (props: SidebarProps) => {
2929
);
3030
useLocale(); // force redraw on locale change
3131
const toggleSidebar = () => dispatch(setSidebarVisibility(!open));
32-
const { drawerPaper, ...classes } = useStyles({ ...props, open });
32+
const { drawerPaper, fixed, ...classes } = useStyles({
33+
...props,
34+
open,
35+
});
3336

3437
return isXSmall ? (
3538
<Drawer
@@ -55,7 +58,7 @@ const Sidebar = (props: SidebarProps) => {
5558
classes={classes}
5659
{...rest}
5760
>
58-
{children}
61+
<div className={fixed}>{children}</div>
5962
</Drawer>
6063
) : (
6164
<Drawer
@@ -68,7 +71,7 @@ const Sidebar = (props: SidebarProps) => {
6871
classes={classes}
6972
{...rest}
7073
>
71-
{children}
74+
<div className={fixed}>{children}</div>
7275
</Drawer>
7376
);
7477
};
@@ -79,7 +82,9 @@ Sidebar.propTypes = {
7982

8083
const useStyles = makeStyles(
8184
theme => ({
82-
root: {},
85+
root: {
86+
height: 'calc(100vh - 3em)',
87+
},
8388
docked: {},
8489
paper: {},
8590
paperAnchorLeft: {},
@@ -91,10 +96,19 @@ const useStyles = makeStyles(
9196
paperAnchorDockedRight: {},
9297
paperAnchorDockedBottom: {},
9398
modal: {},
99+
fixed: {
100+
position: 'fixed',
101+
height: 'calc(100vh - 3em)',
102+
overflowX: 'hidden',
103+
// hide scrollbar
104+
scrollbarWidth: 'none',
105+
msOverflowStyle: 'none',
106+
'&::-webkit-scrollbar': {
107+
display: 'none',
108+
},
109+
},
94110
drawerPaper: {
95111
position: 'relative',
96-
height: '100%',
97-
overflowX: 'hidden',
98112
width: (props: { open?: boolean }) =>
99113
props.open
100114
? lodashGet(theme, 'sidebar.width', DRAWER_WIDTH)

0 commit comments

Comments
 (0)