wip: introduce Layout appBarAlwaysOn prop

Author: slax57

packages/ra-ui-materialui/src/layout/Layout.stories.tsx

@@ -0,0 +1,109 @@
+import {
+    Box,
+    ListItemIcon,
+    ListItemText,
+    MenuItem,
+    MenuList,
+    Skeleton,
+    ThemeProvider,
+    createTheme,
+} from '@mui/material';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import PeopleIcon from '@mui/icons-material/People';
+import {
+    AuthContext,
+    PreferencesEditorContextProvider,
+    StoreContextProvider,
+    memoryStore,
+} from 'ra-core';
+import * as React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router';
+
+import { defaultTheme } from '../defaultTheme';
+import { AppBar } from './AppBar';
+import { Layout } from './Layout';
+import { Title } from './Title';
+
+export default {
+    title: 'ra-ui-materialui/layout/Layout',
+};
+
+const Content = () => (
+    <Box>
+        <Skeleton
+            variant="text"
+            width="auto"
+            sx={{ fontSize: '2rem', mx: 2 }}
+            animation={false}
+        />
+        <Skeleton
+            variant="rectangular"
+            width="auto"
+            height={1500}
+            sx={{ mx: 2 }}
+            animation={false}
+        />
+    </Box>
+);
+
+const Wrapper = ({
+    children = <Content />,
+    theme = createTheme(defaultTheme),
+    layout: LayoutProp = Layout,
+}) => (
+    <MemoryRouter>
+        <QueryClientProvider client={new QueryClient()}>
+            <ThemeProvider theme={theme}>
+                <StoreContextProvider value={memoryStore()}>
+                    <PreferencesEditorContextProvider>
+                        <AuthContext.Provider value={undefined as any}>
+                            <LayoutProp>
+                                {children}
+                                <Title title="React Admin" />
+                            </LayoutProp>
+                        </AuthContext.Provider>
+                    </PreferencesEditorContextProvider>
+                </StoreContextProvider>
+            </ThemeProvider>
+        </QueryClientProvider>
+    </MemoryRouter>
+);
+
+const Menu = () => (
+    <MenuList>
+        <MenuItem>
+            <ListItemIcon>
+                <DashboardIcon />
+            </ListItemIcon>
+            <ListItemText>Dashboard</ListItemText>
+        </MenuItem>
+        <MenuItem>
+            <ListItemIcon>
+                <ShoppingCartIcon />
+            </ListItemIcon>
+            <ListItemText>Orders</ListItemText>
+        </MenuItem>
+        <MenuItem>
+            <ListItemIcon>
+                <PeopleIcon />
+            </ListItemIcon>
+            <ListItemText>Customers</ListItemText>
+        </MenuItem>
+    </MenuList>
+);
+const BasicLayout = props => <Layout menu={Menu} {...props} />;
+
+export const Basic = () => <Wrapper layout={BasicLayout} />;
+
+const AlwaysOnAppBar = () => <AppBar alwaysOn />;
+const AlwaysOnLayout = props => (
+    <BasicLayout appBar={AlwaysOnAppBar} {...props} />
+);
+
+export const AlwaysOn = () => <Wrapper layout={AlwaysOnLayout} />;
+
+const AlwaysOnLayout2 = props => <BasicLayout appBarAlwaysOn {...props} />;
+
+export const AlwaysOn2 = () => <Wrapper layout={AlwaysOnLayout2} />;

packages/ra-ui-materialui/src/layout/Layout.tsx

@@ -21,6 +21,7 @@ import { Inspector } from '../preferences';
 export const Layout = (props: LayoutProps) => {
     const {
         appBar: AppBar = DefaultAppBar,
+        appBarAlwaysOn,
         children,
         className,
         dashboard,
@@ -42,9 +43,9 @@ export const Layout = (props: LayoutProps) => {
         <StyledLayout className={clsx('layout', className)} {...rest}>
             <SkipNavigationButton />
             <div className={LayoutClasses.appFrame}>
-                <AppBar open={open} title={title} />
+                <AppBar open={open} title={title} alwaysOn={appBarAlwaysOn} />
                 <main className={LayoutClasses.contentWithSidebar}>
-                    <Sidebar>
+                    <Sidebar appBarAlwaysOn={appBarAlwaysOn}>
                         <Menu hasDashboard={!!dashboard} />
                     </Sidebar>
                     <div id="main-content" className={LayoutClasses.content}>
@@ -74,6 +75,7 @@ export interface LayoutProps
     extends CoreLayoutProps,
         Omit<HtmlHTMLAttributes<HTMLDivElement>, 'title'> {
     appBar?: ComponentType<AppBarProps>;
+    appBarAlwaysOn?: boolean;
     className?: string;
     error?: ComponentType<ErrorProps>;
     menu?: ComponentType<MenuProps>;

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

@@ -15,7 +15,7 @@ import { useLocale } from 'ra-core';
 import { useSidebarState } from './useSidebarState';
 
 export const Sidebar = (props: SidebarProps) => {
-    const { children, closedSize, size, ...rest } = props;
+    const { appBarAlwaysOn, children, closedSize, size, ...rest } = props;
     const isXSmall = useMediaQuery<Theme>(theme =>
         theme.breakpoints.down('sm')
     );
@@ -41,7 +41,9 @@ export const Sidebar = (props: SidebarProps) => {
             open={open}
             onClose={toggleSidebar}
             classes={SidebarClasses}
-            className={trigger ? SidebarClasses.appBarCollapsed : ''}
+            className={
+                trigger && !appBarAlwaysOn ? SidebarClasses.appBarCollapsed : ''
+            }
             {...rest}
         >
             <div className={SidebarClasses.fixed}>{children}</div>
@@ -54,9 +56,9 @@ Sidebar.propTypes = {
 };
 
 export interface SidebarProps extends DrawerProps {
+    appBarAlwaysOn?: boolean;
     children: ReactElement;
     closedSize?: number;
-
     size?: number;
 }