Restore sidebar toggle in settings

Cleanup some unused props

app/components/Sidebar/App.tsx

@@ -65,15 +65,6 @@ function AppSidebar() {
     [dndArea]
   );
 
-  const handleToggleSidebar = React.useCallback(
-    (ev) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      ui.toggleCollapsedSidebar();
-    },
-    [ui]
-  );
-
   return (
     <Sidebar ref={handleSidebarRef}>
       <HistoryNavigation />
@@ -103,7 +94,7 @@ function AppSidebar() {
                   <ToggleButton
                     position="bottom"
                     image={<SidebarIcon />}
-                    onClick={handleToggleSidebar}
+                    onClick={ui.toggleCollapsedSidebar}
                   />
                 </Tooltip>
               </SidebarButton>

app/components/Sidebar/Settings.tsx

@@ -1,6 +1,6 @@
 import groupBy from "lodash/groupBy";
 import { observer } from "mobx-react";
-import { BackIcon } from "outline-icons";
+import { BackIcon, SidebarIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -8,17 +8,21 @@ import styled from "styled-components";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import useSettingsConfig from "~/hooks/useSettingsConfig";
-import Desktop from "~/utils/Desktop";
+import useStores from "~/hooks/useStores";
 import isCloudHosted from "~/utils/isCloudHosted";
+import { metaDisplay } from "~/utils/keyboard";
+import Tooltip from "../Tooltip";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
 import HistoryNavigation from "./components/HistoryNavigation";
 import Section from "./components/Section";
 import SidebarButton from "./components/SidebarButton";
 import SidebarLink from "./components/SidebarLink";
+import ToggleButton from "./components/ToggleButton";
 import Version from "./components/Version";
 
 function SettingsSidebar() {
+  const { ui } = useStores();
   const { t } = useTranslation();
   const history = useHistory();
   const configs = useSettingsConfig();
@@ -35,8 +39,19 @@ function SettingsSidebar() {
         title={t("Return to App")}
         image={<StyledBackIcon />}
         onClick={returnToApp}
-        minHeight={Desktop.hasInsetTitlebar() ? undefined : 48}
+      >
+        <Tooltip
+          tooltip={t("Toggle sidebar")}
+          shortcut={`${metaDisplay}+.`}
+          delay={500}
+        >
+          <ToggleButton
+            position="bottom"
+            image={<SidebarIcon />}
+            onClick={ui.toggleCollapsedSidebar}
           />
+        </Tooltip>
+      </SidebarButton>
 
       <Flex auto column>
         <Scrollable shadow>

app/components/Sidebar/components/SidebarButton.tsx

@@ -11,8 +11,6 @@ export type SidebarButtonProps = React.ComponentProps<typeof Button> & {
   position: "top" | "bottom";
   title: React.ReactNode;
   image: React.ReactNode;
-  minHeight?: number;
-  rounded?: boolean;
   showMoreMenu?: boolean;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   children?: React.ReactNode;
@@ -25,7 +23,6 @@ const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
       showMoreMenu,
       image,
       title,
-      minHeight = 0,
       children,
       ...rest
     }: SidebarButtonProps,
@@ -40,7 +37,6 @@ const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
       >
         <Button
           {...rest}
-          $minHeight={minHeight}
           $position={position}
           as="button"
           ref={ref}
@@ -73,7 +69,6 @@ const Title = styled(Flex)`
 `;
 
 const Button = styled(Flex)<{
-  $minHeight: number;
   $position: "top" | "bottom";
 }>`
   flex: 1;
@@ -87,7 +82,6 @@ const Button = styled(Flex)<{
   margin: ${(props) => (props.$position === "top" ? 16 : 8)}px 0;
   background: none;
   flex-shrink: 0;
-  min-height: ${(props) => props.$minHeight}px;
 
   -webkit-appearance: none;
   text-decoration: none;