Update

web/apps/photos/src/components/Sidebar/Preferences.tsx

@@ -1,6 +1,7 @@
 import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
 import {
     NestedSidebarDrawer,
+    SidebarDrawer,
     type NestedSidebarDrawerVisibilityProps,
 } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
@@ -17,7 +18,7 @@ import { syncSettings } from "@/new/photos/services/settings";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import ChevronRight from "@mui/icons-material/ChevronRight";
 import ScienceIcon from "@mui/icons-material/Science";
-import { Box, Stack } from "@mui/material";
+import { Box, DialogProps, Stack } from "@mui/material";
 import DropdownInput from "components/DropdownInput";
 import { t } from "i18next";
 import React, { useEffect } from "react";
@@ -47,10 +48,24 @@ export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
         onRootClose();
     };
 
+    const handleDrawerClose: DialogProps["onClose"] = (_, reason) => {
+        console.log(reason);
+        if (reason === "backdropClick") {
+            handleRootClose();
+        } else {
+            onClose();
+        }
+    };
+
     return (
-        <NestedSidebarDrawer
-            {...{ open, onClose }}
-            onRootClose={handleRootClose}
+        <SidebarDrawer
+            transitionDuration={0}
+            open={open}
+            onClose={handleDrawerClose}
+            // hideBackdrop
+            // BackdropProps={{
+            //     sx: { "&&&": { backgroundColor: "transparent" } },
+            // }}
         >
             <Stack spacing={"4px"} py={"12px"}>
                 <Titlebar
@@ -101,7 +116,7 @@ export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                 {...mlSettingsVisibilityProps}
                 onRootClose={handleRootClose}
             />
-        </NestedSidebarDrawer>
+        </SidebarDrawer>
     );
 };
 

web/packages/base/components/mui/SidebarDrawer.tsx

@@ -39,16 +39,38 @@ export type NestedSidebarDrawerVisibilityProps = ModalVisibilityProps & {
  */
 export const NestedSidebarDrawer: React.FC<
     NestedSidebarDrawerVisibilityProps & DrawerProps
-> = (props) => (
+> = ({ onClose, onRootClose, ...rest }) => {
+    // Intercept backdrop taps and repurpose them to close the entire stack.
+    const handleClose: DrawerProps["onClose"] = (_, reason) => {
+        if (reason == "backdropClick") {
+            onClose();
+            onRootClose();
+        } else {
+            onClose();
+        }
+    };
+
     // MUI doesn't (currently, AFAIK) have support for nested drawers, so we
     // emulate that by showing a drawer atop another. To make it fit, we need to
-    // modify a few knobs:
-    //
-    // 1. Disable the transition (otherwise our nested drawer visibly slides in
-    //    from the wrong direction).
-    //
-    // 2. Disable the backdrop (otherwise we'd end up with two of them - one
-    //    from the original drawer, and one from this nested one).
-    //
-    <SidebarDrawer transitionDuration={0} hideBackdrop {...props} />
-);
+    // modify a few knobs.
+
+    return (
+        <SidebarDrawer
+            // Disable the transition (otherwise our nested drawer visibly
+            // slides in from the wrong direction).
+            transitionDuration={0}
+            // Make the backdrop transparent (otherwise we end up with two of
+            // them - one from the original drawer, and one from this nested
+            // one).
+            //
+            // Note that there is an easy way to hide the backdrop (using the
+            // `hideBackdrop` attribute), but that takes away our ability to
+            // intercept backdrop clicks to close it.
+            slotProps={{
+                backdrop: { sx: { "&&&": { backgroundColor: "transparent" } } },
+            }}
+            onClose={handleClose}
+            {...rest}
+        />
+    );
+};