Make left menu sidebar a Modal

GitOrigin-RevId: 63630c2a98c3abb5c5ebbde0afe25c0aa981282b

services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx

@@ -2,26 +2,40 @@ import DownloadMenu from './download-menu'
 import ActionsMenu from './actions-menu'
 import HelpMenu from './help-menu'
 import { useLayoutContext } from '../../../shared/context/layout-context'
-import classNames from 'classnames'
 import SyncMenu from './sync-menu'
 import SettingsMenu from './settings-menu'
 import LeftMenuMask from './left-menu-mask'
+import AccessibleModal from '../../../shared/components/accessible-modal'
+import { Modal } from 'react-bootstrap'
+import classNames from 'classnames'
 
 export default function EditorLeftMenu() {
-  const { leftMenuShown } = useLayoutContext()
+  const { leftMenuShown, setLeftMenuShown } = useLayoutContext()
+
+  const closeModal = () => {
+    setLeftMenuShown(false)
+  }
 
   return (
     <>
-      <aside
-        id="left-menu"
+      <AccessibleModal
+        backdropClassName="left-menu-modal-backdrop"
+        keyboard
+        onHide={closeModal}
+        id="left-menu-modal"
+        show={leftMenuShown}
+      >
+        <Modal.Body
           className={classNames('full-size', { shown: leftMenuShown })}
+          id="left-menu"
         >
           <DownloadMenu />
           <ActionsMenu />
           <SyncMenu />
           <SettingsMenu />
           <HelpMenu />
-      </aside>
+        </Modal.Body>
+      </AccessibleModal>
       {leftMenuShown && <LeftMenuMask />}
     </>
   )

services/web/frontend/stylesheets/app/editor/left-menu.less

@@ -11,8 +11,8 @@
   -webkit-transition: left ease-in-out @left-menu-animation-duration;
   transition: left ease-in-out @left-menu-animation-duration;
   font-size: 14px;
-
   left: -280px;
+
   &.shown {
     left: 0;
   }
@@ -190,3 +190,32 @@
   z-index: 99;
   transition: opacity 0.5s;
 }
+
+// Make the Bootstrap Modal behavior as a left sidebar
+#left-menu-modal {
+  opacity: 1;
+  .modal-dialog {
+    height: 100%;
+    margin: 0;
+    width: @left-menu-width;
+  }
+
+  .modal-content {
+    position: initial;
+  }
+  &.modal.fade .modal-dialog {
+    left: -280px;
+    transition: left ease-in-out @left-menu-animation-duration;
+    -webkit-transition: left ease-in-out @left-menu-animation-duration;
+    transform: translate(0, 0);
+  }
+  &.modal.in .modal-dialog {
+    left: 0;
+    transform: translate(0, 0);
+  }
+}
+// Don't disable backdrop that allows closing the Modal when clicking outside of it,
+// But match its background color with the original mask background color.
+.left-menu-modal-backdrop {
+  background-color: transparent;
+}