@firecms/core 3.0.0-canary.99 → 3.0.0-rc.2

package/src/app/Scaffold.tsx

@@ -23,6 +23,11 @@ export interface ScaffoldProps {
      */
     logo?: string;
 
+    /**
+     * If true, the main content will be padded in large layouts. Defaults to true.
+     */
+    padding?: boolean;
+
     className?: string;
 
     style?: React.CSSProperties;
@@ -47,7 +52,8 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             autoOpenDrawer,
             logo,
             className,
-            style
+            style,
+            padding = true
         } = props;
 
         const drawerChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "Drawer");
@@ -79,6 +85,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
 
+        const hasAppBar = Boolean(appBarChildren.length > 0);
         return (
             <AppContext.Provider value={{
                 logo,
@@ -90,7 +97,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                 autoOpenDrawer
             }}>
                 <div
-                    className={cls("flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden", className)}
+                    className={cls("flex h-screen w-screen bg-surface-50 dark:bg-surface-900 text-surface-900 dark:text-white overflow-hidden", className)}
                     style={{
                         paddingTop: "env(safe-area-inset-top)",
                         paddingLeft: "env(safe-area-inset-left)",
@@ -115,9 +122,15 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
                     <main
                         className="flex flex-col flex-grow overflow-auto">
-                        <DrawerHeader/>
+
+                        {hasAppBar && <DrawerHeader/>}
+
                         <div
-                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto m-0 ", {
+                                "lg:mt-4": !hasAppBar,
+                                "mt-1 lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid": padding,
+                                "border-t": hasAppBar && !padding,
+                            })}>
 
                             <ErrorBoundary>
                                 {otherChildren}
@@ -134,7 +147,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
 const DrawerHeader = () => {
     return (
-        <div className="flex flex-col min-h-[68px]"></div>
+        <div className="flex flex-col min-h-16"></div>
     );
 };
 
@@ -163,17 +176,18 @@ function DrawerWrapper(props: {
             <Tooltip title="Open menu"
                      side="right"
                      sideOffset={12}
-                     className="fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20"
-            >
-                <IconButton
-                    color="inherit"
-                    aria-label="Open menu"
-                    className="sticky top-2 left-3 "
-                    onClick={() => props.setDrawerOpen(true)}
-                    size="large"
-                >
-                    <MenuIcon/>
-                </IconButton>
+                     asChild={true}>
+                <div
+                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
+                    <IconButton
+                        color="inherit"
+                        aria-label="Open menu"
+                        onClick={() => props.setDrawerOpen(true)}
+                        size="large"
+                    >
+                        <MenuIcon/>
+                    </IconButton>
+                </div>
             </Tooltip>
         )}
 
@@ -205,7 +219,7 @@ function DrawerWrapper(props: {
                 aria-label="Open drawer"
                 onClick={() => props.setDrawerOpen(true)}
                 size="large"
-                className="absolute top-2 left-6"
+                className="absolute sm:top-2 sm:left-4 top-1 left-2"
             >
                 <MenuIcon/>
             </IconButton>
@@ -213,6 +227,8 @@ function DrawerWrapper(props: {
                    transparent={true}
                    open={props.open}
                    onOpenChange={props.setDrawerOpen}
+                   title={"Navigation drawer"}
+                   overlayClassName={"bg-white bg-opacity-80"}
             >
                 {innerDrawer}
             </Sheet>
@@ -232,18 +248,6 @@ function DrawerWrapper(props: {
 
             {innerDrawer}
 
-            {/*<div*/}
-            {/*    className={`z-20 absolute right-0 top-4 ${*/}
-            {/*        props.open ? "opacity-100" : "opacity-0 invisible"*/}
-            {/*    } transition-opacity duration-1000 ease-in-out`}>*/}
-            {/*    <IconButton*/}
-            {/*        aria-label="Close drawer"*/}
-            {/*        onClick={() => props.setDrawerOpen(false)}*/}
-            {/*    >*/}
-            {/*        <ChevronLeftIcon/>*/}
-            {/*    </IconButton>*/}
-            {/*</div>*/}
-
         </div>
     );
 }