Add support for opening document sidebar (comments,history,insights) on mobile

app/components/CommandBar.tsx

@@ -1,6 +1,5 @@
 import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
 import { observer } from "mobx-react";
-import { QuestionMarkIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
@@ -12,14 +11,10 @@ import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
 import useSettingsActions from "~/hooks/useSettingsActions";
-import useStores from "~/hooks/useStores";
 import { CommandBarAction } from "~/types";
-import { metaDisplay } from "~/utils/keyboard";
-import Text from "./Text";
 
 function CommandBar() {
   const { t } = useTranslation();
-  const { ui } = useStores();
   const settingsActions = useSettingsActions();
   const commandBarActions = React.useMemo(
     () => [...rootActions, settingsActions],
@@ -50,17 +45,6 @@ function CommandBar() {
               }…`}
             />
             <CommandBarResults />
-            {ui.commandBarOpenedFromSidebar && (
-              <Hint size="small" type="tertiary">
-                <QuestionMarkIcon size={18} color="currentColor" />
-                {t(
-                  "Open search from anywhere with the {{ shortcut }} shortcut",
-                  {
-                    shortcut: `${metaDisplay} + k`,
-                  }
-                )}
-              </Hint>
-            )}
           </Animator>
         </Positioner>
       </KBarPortal>
@@ -80,16 +64,6 @@ const KBarPortal: React.FC = ({ children }) => {
   return <Portal>{children}</Portal>;
 };
 
-const Hint = styled(Text)`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border-top: 1px solid ${(props) => props.theme.background};
-  margin: 1px 0 0;
-  padding: 6px 16px;
-  width: 100%;
-`;
-
 const Positioner = styled(KBarPositioner)`
   z-index: ${depths.commandBar};
 `;

app/components/Sidebar/Right.tsx

@@ -3,8 +3,10 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { depths } from "@shared/styles";
 import Flex from "~/components/Flex";
 import ResizeBorder from "~/components/Sidebar/components/ResizeBorder";
+import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
@@ -16,6 +18,7 @@ function Right({ children, border, className }: Props) {
   const theme = useTheme();
   const { ui } = useStores();
   const [isResizing, setResizing] = React.useState(false);
+  const isMobile = useMobile();
   const maxWidth = theme.sidebarMaxWidth;
   const minWidth = theme.sidebarMinWidth + 16; // padding
 
@@ -91,11 +94,13 @@ function Right({ children, border, className }: Props) {
     >
       <Position style={style} column>
         {children}
-        <ResizeBorder
-          onMouseDown={handleMouseDown}
-          onDoubleClick={handleReset}
-          dir="right"
-        />
+        {!isMobile && (
+          <ResizeBorder
+            onMouseDown={handleMouseDown}
+            onDoubleClick={handleReset}
+            dir="right"
+          />
+        )}
       </Position>
     </Sidebar>
   );
@@ -107,19 +112,29 @@ const Position = styled(Flex)`
   bottom: 0;
 `;
 
-const Sidebar = styled(m.div)<{ $border?: boolean }>`
-  display: none;
-  position: relative;
+const Sidebar = styled(m.div)<{
+  $border?: boolean;
+}>`
+  display: flex;
   flex-shrink: 0;
   background: ${(props) => props.theme.background};
   width: ${(props) => props.theme.sidebarRightWidth}px;
+  max-width: 70%;
   border-left: 1px solid ${(props) => props.theme.divider};
   transition: border-left 100ms ease-in-out;
   z-index: 1;
 
+  ${breakpoint("mobile", "tablet")`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: ${depths.sidebar};
+  `}
+
   ${breakpoint("tablet")`
-    display: flex;
-  `};
+    position: relative;
+  `}
 `;
 
 export default observer(Right);

app/scenes/Document/components/SidebarLayout.tsx

@@ -2,11 +2,15 @@ import { observer } from "mobx-react";
 import { BackIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { Portal } from "react-portal";
 import styled from "styled-components";
+import { depths } from "@shared/styles";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import Tooltip from "~/components/Tooltip";
+import useMobile from "~/hooks/useMobile";
+import { fadeIn } from "~/styles/animations";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
   /* The title of the sidebar */
@@ -21,6 +25,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
 
 function SidebarLayout({ title, onClose, children, scrollable = true }: Props) {
   const { t } = useTranslation();
+  const isMobile = useMobile();
 
   return (
     <>
@@ -42,10 +47,28 @@ function SidebarLayout({ title, onClose, children, scrollable = true }: Props) {
       ) : (
         children
       )}
+
+      {isMobile && (
+        <Portal>
+          <Backdrop onClick={onClose} />
+        </Portal>
+      )}
     </>
   );
 }
 
+const Backdrop = styled.a`
+  animation: ${fadeIn} 250ms ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  cursor: default;
+  z-index: ${depths.sidebar - 1};
+  background: ${(props) => props.theme.backdrop};
+`;
+
 const ForwardIcon = styled(BackIcon)`
   transform: rotate(180deg);
   flex-shrink: 0;

app/stores/UiStore.ts

@@ -42,9 +42,6 @@ class UiStore {
   @observable
   observingUserId: string | undefined;
 
-  @observable
-  commandBarOpenedFromSidebar = false;
-
   @observable
   progressBarVisible = false;
 
@@ -236,16 +233,6 @@ class UiStore {
     this.mobileSidebarVisible = !this.mobileSidebarVisible;
   };
 
-  @action
-  commandBarOpened = () => {
-    this.commandBarOpenedFromSidebar = true;
-  };
-
-  @action
-  commandBarClosed = () => {
-    this.commandBarOpenedFromSidebar = false;
-  };
-
   @action
   hideMobileSidebar = () => {
     this.mobileSidebarVisible = false;

shared/i18n/locales/en_US/translation.json

@@ -106,7 +106,6 @@
   "Collapse": "Collapse",
   "Expand": "Expand",
   "Type a command or search": "Type a command or search",
-  "Open search from anywhere with the {{ shortcut }} shortcut": "Open search from anywhere with the {{ shortcut }} shortcut",
   "Are you sure you want to permanently delete this entire comment thread?": "Are you sure you want to permanently delete this entire comment thread?",
   "Are you sure you want to permanently delete this comment?": "Are you sure you want to permanently delete this comment?",
   "Server connection lost": "Server connection lost",