Dock savebar even if it's disabled

src/components/AppLayout/AppActionContext.tsx

@@ -1,7 +1,15 @@
 import React from "react";
 
-const AppActionContext = React.createContext<React.RefObject<HTMLDivElement>>(
+interface AppAction {
-  undefined
+  anchor: React.RefObject<HTMLDivElement>;
-);
+  docked: boolean;
+  setDocked: (docked: boolean) => void;
+}
+const AppActionContext = React.createContext<AppAction>({
+  anchor: undefined,
+  docked: true,
+  setDocked: () => undefined
+});
+export const useAppAction = () => React.useContext(AppActionContext);
 
 export default AppActionContext;

src/components/AppLayout/AppLayout.tsx

@@ -50,6 +50,9 @@ const useStyles = makeStyles(
       position: "sticky",
       zIndex: 10
     },
+    appActionDocked: {
+      position: "static"
+    },
     appLoader: {
       height: appLoaderHeight,
       marginBottom: theme.spacing(2),
@@ -313,6 +316,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const [appState, dispatchAppState] = useAppState();
   const { location } = useRouter();
   const [isNavigatorVisible, setNavigatorVisibility] = React.useState(false);
+  const [docked, setDocked] = React.useState(true);
 
   const menuStructure = createMenuStructure(intl);
   const configurationMenu = createConfigurationMenu(intl);
@@ -365,7 +369,13 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
         setVisibility={setNavigatorVisibility}
       />
       <AppHeaderContext.Provider value={appHeaderAnchor}>
-        <AppActionContext.Provider value={appActionAnchor}>
+        <AppActionContext.Provider
+          value={{
+            anchor: appActionAnchor,
+            docked,
+            setDocked
+          }}
+        >
           <div className={classes.root}>
             <div className={classes.sideBar}>
               <ResponsiveDrawer
@@ -533,7 +543,12 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                     : children}
                 </main>
               </div>
-              <div className={classes.appAction} ref={appActionAnchor} />
+              <div
+                className={classNames(classes.appAction, {
+                  [classes.appActionDocked]: docked
+                })}
+                ref={appActionAnchor}
+              />
             </div>
           </div>
         </AppActionContext.Provider>

src/components/SaveButtonBar/SaveButtonBar.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { maybe } from "../../misc";
-import AppActionContext from "../AppLayout/AppActionContext";
+import AppActionContext, { useAppAction } from "../AppLayout/AppActionContext";
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "../ConfirmButton/ConfirmButton";
@@ -41,8 +41,12 @@ const useStyles = makeStyles(
       backgroundColor: theme.palette.error.main,
       color: theme.palette.error.contrastText
     },
+    paper: {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    },
     root: {
-      height: 120
+      height: 70
     },
     spacer: {
       flex: "1"
@@ -76,21 +80,27 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
   } = props;
   const classes = useStyles(props);
 
+  const appAction = useAppAction();
   const intl = useIntl();
   const scrollPosition = useWindowScroll();
+
+  React.useEffect(() => {
+    appAction.setDocked(disabled);
+
+    return () => appAction.setDocked(true);
+  }, [disabled]);
+
   const scrolledToBottom =
     scrollPosition.y + window.innerHeight >= document.body.scrollHeight;
-  const shouldDisplay = onDelete || !disabled;
 
-  return (
+  return appAction.anchor ? (
-    <AppActionContext.Consumer>
+    <Portal container={appAction.anchor.current}>
-      {anchor =>
-        anchor ? (
-          <Portal container={anchor.current}>
-            {shouldDisplay && (
       <div className={classes.root} {...rest}>
         <Container>
-                  <Card elevation={scrolledToBottom ? 0 : 16}>
+          <Card
+            className={classes.paper}
+            elevation={!(appAction.docked || scrolledToBottom) ? 16 : 0}
+          >
             <CardContent className={classes.content}>
               {!!onDelete && (
                 <Button
@@ -131,12 +141,8 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
           </Card>
         </Container>
       </div>
-            )}
     </Portal>
-        ) : null
+  ) : null;
-      }
-    </AppActionContext.Consumer>
-  );
 };
 SaveButtonBar.displayName = "SaveButtonBar";
 export default SaveButtonBar;