feat(ui): make sidebar resizable

Author: mtrezza

src/components/FlowFooter/FlowFooter.scss

@@ -10,7 +10,7 @@
 .footer {
   @include animation('footer-enter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)');
   position: fixed;
-  left: 300px;
+  left: var(--sidebar-width, 300px);
   right: 0;
   bottom: 0;
   background: #fbfbfc;

src/components/Sidebar/Sidebar.react.js

@@ -10,7 +10,7 @@ import AppsMenu from 'components/Sidebar/AppsMenu.react';
 import AppName from 'components/Sidebar/AppName.react';
 import isInsidePopover from 'lib/isInsidePopover';
 import Pin from 'components/Sidebar/Pin.react';
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState, useContext, useRef } from 'react';
 import SidebarHeader from 'components/Sidebar/SidebarHeader.react';
 import SidebarSection from 'components/Sidebar/SidebarSection.react';
 import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react';
@@ -36,6 +36,9 @@ const Sidebar = ({
   const [appsMenuOpen, setAppsMenuOpen] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
   const [fixed, setFixed] = useState(true);
+  const initialWidth = parseInt(localStorage.getItem('sidebarWidth') || '300', 10);
+  const [width, setWidth] = useState(initialWidth);
+  const widthRef = useRef(initialWidth);
   const [dashboardUser, setDashboardUser] = useState('');
   fetch(mountPath).then(response => {
     setDashboardUser(response.headers.get('username'));
@@ -66,6 +69,11 @@ const Sidebar = ({
     };
   });
 
+  useEffect(() => {
+    document.documentElement.style.setProperty('--sidebar-width', `${width}px`);
+    widthRef.current = width;
+  }, [width]);
+
   const sidebarClasses = [styles.sidebar];
   if (fixed) {
     document.body.className = document.body.className.replace(' expanded', '');
@@ -112,6 +120,24 @@ const Sidebar = ({
     }
   };
 
+  const startResize = e => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startWidth = widthRef.current;
+    const doDrag = ev => {
+      const newWidth = Math.max(200, startWidth + ev.clientX - startX);
+      widthRef.current = newWidth;
+      setWidth(newWidth);
+    };
+    const stopDrag = () => {
+      document.removeEventListener('mousemove', doDrag);
+      document.removeEventListener('mouseup', stopDrag);
+      localStorage.setItem('sidebarWidth', widthRef.current.toString());
+    };
+    document.addEventListener('mousemove', doDrag);
+    document.addEventListener('mouseup', stopDrag);
+  };
+
   let sidebarContent;
   if (appsMenuOpen) {
     const apps = []
@@ -192,6 +218,7 @@ const Sidebar = ({
           </a>
         </div>
       )}
+      <div className={styles.resizeHandle} onMouseDown={startResize} />
     </div>
   );
 };

src/components/Sidebar/Sidebar.scss

@@ -14,14 +14,24 @@ $footerHeight: 36px;
 
 .sidebar {
   position: fixed;
-  width: 300px;
+  width: var(--sidebar-width, 300px);
   top: 0;
   left: 0;
   bottom: 0;
   background: #0c5582;
   color: #fff;
   z-index: 100;
 
+  .resizeHandle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 5px;
+    cursor: col-resize;
+    user-select: none;
+  }
+
   &.collapsed {
     left: 0;
     width: 54px;
@@ -161,7 +171,7 @@ $footerHeight: 36px;
 .appsMenu {
   overflow: auto;
   background: #094162;
-  width: 300px;
+  width: var(--sidebar-width, 300px);
 
   .menuRow:hover {
     background: #0c5582;

src/components/Toolbar/Toolbar.scss

@@ -11,7 +11,7 @@
   position: fixed;
   top: 0;
   right: 0;
-  left: 300px;
+  left: var(--sidebar-width, 300px);
   background: #353446;
   height: 96px;
   color: white;

src/dashboard/Dashboard.scss

@@ -8,7 +8,7 @@
 @import 'stylesheets/globals.scss';
 
 .content {
-  margin-left: 300px;
+  margin-left: var(--sidebar-width, 300px);
   overflow: auto;
   max-height: 100vh;
 }

src/dashboard/Data/Browser/Browser.scss

@@ -10,7 +10,7 @@
 .browser {
   position: fixed;
   top: 96px;
-  left: 300px;
+  left: var(--sidebar-width, 300px);
   right: 0;
   bottom: 36px;
   overflow: auto;
@@ -24,7 +24,7 @@ body:global(.expanded) {
 
 .empty {
   position: fixed;
-  left: 300px;
+  left: var(--sidebar-width, 300px);
   top: 0;
   bottom: 0;
   right: 0;

src/dashboard/Data/Browser/BrowserFooter.scss

@@ -2,7 +2,7 @@
 
 .footer {
   position: absolute;
-  width: calc(100% - 300px);
+  width: calc(100% - var(--sidebar-width, 300px));
   bottom: 0;
   gap: 10px;
   padding: 0px 15px;

src/dashboard/TableView.scss

@@ -10,7 +10,7 @@
 .headers {
   position: fixed;
   top: 96px;
-  left: 300px;
+  left: var(--sidebar-width, 300px);
   right: 0;
   background: #66637A;
   height: 30px;

src/parse-interface-guide/PIG.scss

@@ -11,7 +11,7 @@
 .sidebar {
   position: fixed;
   background: white;
-  width: 300px;
+  width: var(--sidebar-width, 300px);
   padding: 10px;
   border-right: 1px solid #b0b8bf;
   top: 0;
@@ -53,7 +53,7 @@
 }
 
 .content {
-  margin-left: 300px;
+  margin-left: var(--sidebar-width, 300px);
   padding: 20px 10px 10px 10px;
   min-height: 100vh;
 }

src/stylesheets/base.scss

@@ -7,6 +7,10 @@
  */
 @import 'globals.scss';
 
+:root {
+  --sidebar-width: 300px;
+}
+
 html, body {
   min-height: 100vh;
 }