Update Sidebar to remain fixed

Closes #4684 Supersedes #4753
marmelab · Aug 26, 2021 · 626c52a · 626c52a
1 parent 5338363
commit 626c52a
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 31 deletions.
diff --git a/examples/demo/src/layout/Layout.tsx b/examples/demo/src/layout/Layout.tsx
@@ -1,24 +1,14 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { Layout, LayoutProps, Sidebar } from 'react-admin';
+import { Layout, LayoutProps } from 'react-admin';
 import AppBar from './AppBar';
 import Menu from './Menu';
 import { darkTheme, lightTheme } from './themes';
 import { AppState } from '../types';
 
-const CustomSidebar = (props: any) => <Sidebar {...props} size={200} />;
-
 export default (props: LayoutProps) => {
     const theme = useSelector((state: AppState) =>
         state.theme === 'dark' ? darkTheme : lightTheme
     );
-    return (
-        <Layout
-            {...props}
-            appBar={AppBar}
-            sidebar={CustomSidebar}
-            menu={Menu}
-            theme={theme}
-        />
-    );
+    return <Layout {...props} appBar={AppBar} menu={Menu} theme={theme} />;
 };
diff --git a/examples/demo/src/layout/Menu.tsx b/examples/demo/src/layout/Menu.tsx
@@ -3,11 +3,13 @@ import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import LabelIcon from '@material-ui/icons/Label';
 import { makeStyles } from '@material-ui/core/styles';
+import classnames from 'classnames';
 import {
     useTranslate,
     DashboardMenuItem,
     MenuItemLink,
     MenuProps,
+    ReduxState,
 } from 'react-admin';
 
 import visitors from '../visitors';
@@ -28,6 +30,7 @@ const Menu = ({ dense = false }: MenuProps) => {
         menuCustomers: true,
     });
     const translate = useTranslate();
+    const open = useSelector((state: ReduxState) => state.admin.ui.sidebarOpen);
     useSelector((state: AppState) => state.theme); // force rerender on theme change
     const classes = useStyles();
 
@@ -36,7 +39,12 @@ const Menu = ({ dense = false }: MenuProps) => {
     };
 
     return (
-        <div className={classes.root}>
+        <div
+            className={classnames(classes.root, {
+                [classes.open]: open,
+                [classes.closed]: !open,
+            })}
+        >
             {' '}
             <DashboardMenuItem />
             <SubMenu
@@ -47,15 +55,21 @@ const Menu = ({ dense = false }: MenuProps) => {
                 dense={dense}
             >
                 <MenuItemLink
-                    to={`/commands`}
+                    to={{
+                        pathname: '/commands',
+                        state: { _scrollToTop: true },
+                    }}
                     primaryText={translate(`resources.commands.name`, {
                         smart_count: 2,
                     })}
                     leftIcon={<orders.icon />}
                     dense={dense}
                 />
                 <MenuItemLink
-                    to={`/invoices`}
+                    to={{
+                        pathname: '/invoices',
+                        state: { _scrollToTop: true },
+                    }}
                     primaryText={translate(`resources.invoices.name`, {
                         smart_count: 2,
                     })}
@@ -71,15 +85,21 @@ const Menu = ({ dense = false }: MenuProps) => {
                 dense={dense}
             >
                 <MenuItemLink
-                    to={`/products`}
+                    to={{
+                        pathname: '/products',
+                        state: { _scrollToTop: true },
+                    }}
                     primaryText={translate(`resources.products.name`, {
                         smart_count: 2,
                     })}
                     leftIcon={<products.icon />}
                     dense={dense}
                 />
                 <MenuItemLink
-                    to={`/categories`}
+                    to={{
+                        pathname: '/categories',
+                        state: { _scrollToTop: true },
+                    }}
                     primaryText={translate(`resources.categories.name`, {
                         smart_count: 2,
                     })}
@@ -95,15 +115,21 @@ const Menu = ({ dense = false }: MenuProps) => {
                 dense={dense}
             >
                 <MenuItemLink
-                    to={`/customers`}
+                    to={{
+                        pathname: '/customers',
+                        state: { _scrollToTop: true },
+                    }}
                     primaryText={translate(`resources.customers.name`, {
                         smart_count: 2,
                     })}
                     leftIcon={<visitors.icon />}
                     dense={dense}
                 />
                 <MenuItemLink
-                    to={`/segments`}
+                    to={{
+                        pathname: '/segments',
+                        state: { _scrollToTop: true },
+                    }}
                     primaryText={translate(`resources.segments.name`, {
                         smart_count: 2,
                     })}
@@ -112,7 +138,10 @@ const Menu = ({ dense = false }: MenuProps) => {
                 />
             </SubMenu>
             <MenuItemLink
-                to={`/reviews`}
+                to={{
+                    pathname: '/reviews',
+                    state: { _scrollToTop: true },
+                }}
                 primaryText={translate(`resources.reviews.name`, {
                     smart_count: 2,
                 })}
@@ -126,6 +155,16 @@ const Menu = ({ dense = false }: MenuProps) => {
 const useStyles = makeStyles(theme => ({
     root: {
         marginTop: theme.spacing(1),
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    },
+    open: {
+        width: 200,
+    },
+    closed: {
+        width: 55,
     },
 }));
 

diff --git a/examples/demo/src/layout/SubMenu.tsx b/examples/demo/src/layout/SubMenu.tsx
@@ -17,14 +17,14 @@ const useStyles = makeStyles(theme => ({
     icon: { minWidth: theme.spacing(5) },
     sidebarIsOpen: {
         '& a': {
-            paddingLeft: theme.spacing(4),
             transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+            paddingLeft: theme.spacing(4),
         },
     },
     sidebarIsClosed: {
         '& a': {
-            paddingLeft: theme.spacing(2),
             transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+            paddingLeft: theme.spacing(2),
         },
     },
 }));

diff --git a/examples/demo/src/layout/themes.ts b/examples/demo/src/layout/themes.ts
@@ -8,6 +8,9 @@ export const darkTheme = {
         },
         type: 'dark' as 'dark', // Switching the dark mode on is a single property value change.
     },
+    sidebar: {
+        width: 200,
+    },
     overrides: {
         MuiAppBar: {
             colorSecondary: {
@@ -63,6 +66,9 @@ export const lightTheme = {
     shape: {
         borderRadius: 10,
     },
+    sidebar: {
+        width: 200,
+    },
     overrides: {
         RaMenuItemLink: {
             root: {

diff --git a/packages/ra-ui-materialui/src/layout/Menu.tsx b/packages/ra-ui-materialui/src/layout/Menu.tsx
@@ -25,9 +25,10 @@ const useStyles = makeStyles(
             [theme.breakpoints.only('xs')]: {
                 marginTop: 0,
             },
-            [theme.breakpoints.up('md')]: {
-                marginTop: '1.5em',
-            },
+            transition: theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.leavingScreen,
+            }),
         },
         open: {
             width: lodashGet(theme, 'menu.width', MENU_WIDTH),

diff --git a/packages/ra-ui-materialui/src/layout/Sidebar.tsx b/packages/ra-ui-materialui/src/layout/Sidebar.tsx
@@ -29,7 +29,10 @@ const Sidebar = (props: SidebarProps) => {
     );
     useLocale(); // force redraw on locale change
     const toggleSidebar = () => dispatch(setSidebarVisibility(!open));
-    const { drawerPaper, ...classes } = useStyles({ ...props, open });
+    const { drawerPaper, fixed, ...classes } = useStyles({
+        ...props,
+        open,
+    });
 
     return isXSmall ? (
         <Drawer
@@ -55,7 +58,7 @@ const Sidebar = (props: SidebarProps) => {
             classes={classes}
             {...rest}
         >
-            {children}
+            <div className={fixed}>{children}</div>
         </Drawer>
     ) : (
         <Drawer
@@ -68,7 +71,7 @@ const Sidebar = (props: SidebarProps) => {
             classes={classes}
             {...rest}
         >
-            {children}
+            <div className={fixed}>{children}</div>
         </Drawer>
     );
 };
@@ -79,7 +82,9 @@ Sidebar.propTypes = {
 
 const useStyles = makeStyles(
     theme => ({
-        root: {},
+        root: {
+            height: 'calc(100vh - 3em)',
+        },
         docked: {},
         paper: {},
         paperAnchorLeft: {},
@@ -91,10 +96,19 @@ const useStyles = makeStyles(
         paperAnchorDockedRight: {},
         paperAnchorDockedBottom: {},
         modal: {},
+        fixed: {
+            position: 'fixed',
+            height: 'calc(100vh - 3em)',
+            overflowX: 'hidden',
+            // hide scrollbar
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
+        },
         drawerPaper: {
             position: 'relative',
-            height: '100%',
-            overflowX: 'hidden',
             width: (props: { open?: boolean }) =>
                 props.open
                     ? lodashGet(theme, 'sidebar.width', DRAWER_WIDTH)