feat: Resizable sidebar (#1827)

* wip: First round on sidebar resizing

* feat: Saving setting, animation

* all requirements, refactoring needed

* lint

* refactor useResize

* some mobile improvements

* fix

* refactor

app/components/Sidebar/components/CollapseToggle.js

@@ -8,7 +8,7 @@ import { meta } from "utils/keyboard";
 
 type Props = {|
   collapsed: boolean,
-  onClick?: () => void,
+  onClick?: (event: SyntheticEvent<>) => void,
 |};
 
 function CollapseToggle({ collapsed, ...rest }: Props) {
@@ -43,7 +43,7 @@ export const Button = styled.button`
   z-index: 1;
   font-weight: 600;
   color: ${(props) => props.theme.sidebarText};
-  background: ${(props) => props.theme.sidebarItemBackground};
+  background: transparent;
   transition: opacity 100ms ease-in-out;
   border-radius: 4px;
   opacity: 0;

app/components/Sidebar/components/HeaderBlock.js

@@ -13,8 +13,8 @@ type Props = {
 };
 
 const HeaderBlock = React.forwardRef<Props, any>(
-  ({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => {
-    return (
+  ({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => (
+    <Wrapper>
       <Header justify="flex-start" align="center" ref={ref} {...rest}>
         <TeamLogo
           alt={`${teamName} logo`}
@@ -30,8 +30,8 @@ const HeaderBlock = React.forwardRef<Props, any>(
           <Subheading>{subheading}</Subheading>
         </Flex>
       </Header>
-    );
-  }
+    </Wrapper>
+  )
 );
 
 const StyledExpandedIcon = styled(ExpandedIcon)`
@@ -45,6 +45,7 @@ const Subheading = styled.div`
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
+  white-space: nowrap;
   color: ${(props) => props.theme.sidebarText};
 `;
 
@@ -54,16 +55,20 @@ const TeamName = styled.div`
   padding-right: 24px;
   font-weight: 600;
   color: ${(props) => props.theme.text};
+  white-space: nowrap;
   text-decoration: none;
   font-size: 16px;
 `;
 
+const Wrapper = styled.div`
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+
 const Header = styled.button`
   display: flex;
   align-items: center;
-  flex-shrink: 0;
   padding: 20px 24px;
-  position: relative;
   background: none;
   line-height: inherit;
   border: 0;

app/components/Sidebar/components/ResizeBorder.js

@@ -0,0 +1,28 @@
+// @flow
+import styled from "styled-components";
+import ResizeHandle from "./ResizeHandle";
+
+const ResizeBorder = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -6px;
+  width: 12px;
+  cursor: ew-resize;
+
+  ${(props) =>
+    props.$isResizing &&
+    `
+  ${ResizeHandle} {
+    opacity: 1;
+  }
+  `}
+
+  &:hover {
+    ${ResizeHandle} {
+      opacity: 1;
+    }
+  }
+`;
+
+export default ResizeBorder;

app/components/Sidebar/components/ResizeHandle.js

@@ -0,0 +1,39 @@
+// @flow
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+
+const ResizeHandle = styled.button`
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+  transform: translateY(-50%);
+  position: absolute;
+  top: 50%;
+  height: 40px;
+  right: -10px;
+  width: 8px;
+  padding: 0;
+  border: 0;
+  background: ${(props) => props.theme.sidebarBackground};
+  border-radius: 8px;
+  pointer-events: none;
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: -24px;
+    bottom: -24px;
+    left: -12px;
+    right: -12px;
+  }
+
+  &:active {
+    background: ${(props) => props.theme.sidebarText};
+  }
+
+  ${breakpoint("tablet")`
+    pointer-events: all;
+    cursor: ew-resize;
+  `}
+`;
+
+export default ResizeHandle;

app/components/Sidebar/components/Section.js

@@ -6,6 +6,7 @@ const Section = styled(Flex)`
   position: relative;
   flex-direction: column;
   margin: 24px 8px;
+  min-width: ${(props) => props.theme.sidebarMinWidth}px;
 `;
 
 export default Section;

app/components/Sidebar/components/SidebarLink.js

@@ -7,6 +7,7 @@ import {
   type Match,
 } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "components/EventBoundary";
 import { type Theme } from "types";
 
@@ -96,6 +97,7 @@ const IconWrapper = styled.span`
   margin-right: 4px;
   height: 24px;
   overflow: hidden;
+  flex-shrink: 0;
 `;
 
 const Actions = styled(EventBoundary)`
@@ -123,7 +125,7 @@ const StyledNavLink = styled(NavLink)`
   display: flex;
   position: relative;
   text-overflow: ellipsis;
-  padding: 4px 16px;
+  padding: 6px 16px;
   border-radius: 4px;
   transition: background 50ms, color 50ms;
   background: ${(props) =>
@@ -159,6 +161,10 @@ const StyledNavLink = styled(NavLink)`
       }
     }
   }
+
+  ${breakpoint("tablet")`
+    padding: 4px 16px;
+  `}
 `;
 
 const Label = styled.div`