feat: Collapsible sidebar (#1721)

* wip

* styling, add keyboard shortcut

* tweak styling

app/components/Layout.js

@@ -65,6 +65,11 @@ class Layout extends React.Component<Props> {
     window.document.body.style.background = props.theme.background;
   }
 
+  @keydown("meta+.")
+  handleToggleSidebar() {
+    this.props.ui.toggleCollapsedSidebar();
+  }
+
   @keydown("shift+/")
   handleOpenKeyboardShortcuts() {
     if (this.props.ui.editMode) return;
@@ -119,7 +124,11 @@ class Layout extends React.Component<Props> {
             </Switch>
           )}
 
-          <Content auto justify="center" editMode={ui.editMode}>
+          <Content
+            auto
+            justify="center"
+            sidebarCollapsed={ui.editMode || ui.sidebarCollapsed}
+          >
             {this.props.children}
           </Content>
 
@@ -159,7 +168,10 @@ const Content = styled(Flex)`
   }
 
   ${breakpoint("tablet")`
-    margin-left: ${(props) => (props.editMode ? 0 : props.theme.sidebarWidth)};
+    margin-left: ${(props) =>
+      props.sidebarCollapsed
+        ? props.theme.sidebarCollapsedWidth
+        : props.theme.sidebarWidth};
   `};
 `;
 

app/components/Sidebar/Sidebar.js

@@ -8,6 +8,7 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
+import CollapseToggle, { Button } from "./components/CollapseToggle";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
 
@@ -30,10 +31,14 @@ function Sidebar({ location, children }: Props) {
 
   const content = (
     <Container
-      editMode={ui.editMode}
       mobileSidebarVisible={ui.mobileSidebarVisible}
+      collapsed={ui.editMode || ui.sidebarCollapsed}
       column
     >
+      <CollapseToggle
+        collapsed={ui.sidebarCollapsed}
+        onClick={ui.toggleCollapsedSidebar}
+      />
       <Toggle
         onClick={ui.toggleMobileSidebar}
         mobileSidebarVisible={ui.mobileSidebarVisible}
@@ -63,7 +68,7 @@ const Container = styled(Flex)`
   bottom: 0;
   width: 100%;
   background: ${(props) => props.theme.sidebarBackground};
-  transition: left 100ms ease-out,
+  transition: box-shadow, 100ms, ease-in-out, left 100ms ease-out,
     ${(props) => props.theme.backgroundTransition};
   margin-left: ${(props) => (props.mobileSidebarVisible ? 0 : "-100%")};
   z-index: ${(props) => props.theme.depths.sidebar};
@@ -90,10 +95,33 @@ const Container = styled(Flex)`
   }
 
   ${breakpoint("tablet")`
-    left: ${(props) => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
+    left: ${(props) =>
+      props.collapsed
+        ? `calc(-${props.theme.sidebarWidth} + ${props.theme.sidebarCollapsedWidth})`
+        : 0};
     width: ${(props) => props.theme.sidebarWidth};
     margin: 0;
     z-index: 3;
+
+    &:hover,
+    &:focus-within {
+      left: 0;
+      box-shadow: ${(props) =>
+        props.collapsed ? "rgba(0, 0, 0, 0.2) 1px 0 4px" : "none"};
+
+      & ${Button} {
+        opacity: .75;
+      }
+
+      & ${Button}:hover {
+        opacity: 1;
+      }
+    }
+
+    &:not(:hover):not(:focus-within) > div {
+      opacity: ${(props) => (props.collapsed ? "0" : "1")};
+      transition: opacity 100ms ease-in-out;
+    }
   `};
 `;
 

app/components/Sidebar/components/CollapseToggle.js

@@ -0,0 +1,59 @@
+// @flow
+import { NextIcon, BackIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Tooltip from "components/Tooltip";
+import { meta } from "utils/keyboard";
+
+type Props = {|
+  collapsed: boolean,
+  onClick?: () => void,
+|};
+
+function CollapseToggle({ collapsed, ...rest }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      tooltip={collapsed ? t("Expand") : t("Collapse")}
+      shortcut={`${meta}+.`}
+      delay={500}
+      placement="bottom"
+    >
+      <Button {...rest} aria-hidden>
+        {collapsed ? (
+          <NextIcon color="currentColor" />
+        ) : (
+          <BackIcon color="currentColor" />
+        )}
+      </Button>
+    </Tooltip>
+  );
+}
+
+export const Button = styled.button`
+  display: block;
+  position: absolute;
+  top: 28px;
+  right: 8px;
+  border: 0;
+  width: 24px;
+  height: 24px;
+  z-index: 1;
+  font-weight: 600;
+  color: ${(props) => props.theme.sidebarText};
+  background: ${(props) => props.theme.sidebarItemBackground};
+  transition: opacity 100ms ease-in-out;
+  border-radius: 4px;
+  opacity: 0;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    color: ${(props) => props.theme.white};
+    background: ${(props) => props.theme.primary};
+  }
+`;
+
+export default CollapseToggle;

app/components/Sidebar/components/HeaderBlock.js

@@ -61,7 +61,7 @@ const Header = styled.button`
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  padding: 16px 24px;
+  padding: 20px 24px;
   position: relative;
   background: none;
   line-height: inherit;