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
2021-01-20 23:00:14 -08:00
parent 774c3534d8
commit 111212b038
14 changed files with 342 additions and 90 deletions
--- a/app/components/Sidebar/components/ResizeBorder.js
+++ b/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;