add resizing capabilities to the side bar

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/layout/main-layout.scss

@@ -1,6 +1,4 @@
 .MainLayout {
-  --sidebar-max-size: 200px;
-
   display: grid;
   grid-template-areas:
     "aside header"
@@ -8,7 +6,7 @@
     "aside main"
     "aside footer";
   grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
-  grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
+  grid-template-columns: [sidebar] auto [main] 1fr;
 
   height: 100%;
 
@@ -33,19 +31,15 @@
     background: $sidebarBackground;
     white-space: nowrap;
     transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
-
+    width: var(--sidebar-width);
-    &.pinned {
-      width: var(--sidebar-max-size);
-    }
 
     &:not(.pinned) {
-      position: absolute;
       width: var(--main-layout-header);
       height: 100%;
       overflow: hidden;
 
       &.accessible:hover {
-        width: var(--sidebar-max-size);
+        width: max-content;
         transition-delay: 750ms;
         box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);
         z-index: $zIndex-sidebar-hover;

src/renderer/components/layout/main-layout.tsx

@@ -3,11 +3,12 @@ import "./main-layout.scss";
 import React from "react";
 import { observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { createStorage, cssNames } from "../../utils";
+import { autobind, createStorage, cssNames } from "../../utils";
 import { Sidebar } from "./sidebar";
 import { ErrorBoundary } from "../error-boundary";
 import { Dock } from "../dock";
 import { getHostedCluster } from "../../../common/cluster-store";
+import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
 
 interface Props {
   className?: any;
@@ -18,22 +19,42 @@ interface Props {
 
 @observer
 export class MainLayout extends React.Component<Props> {
-  public storage = createStorage("main_layout", { pinnedSidebar: true });
+  public storage = createStorage("main_layout", {
+    pinnedSidebar: true,
+    sidebarWidth: 200,
+  });
 
   @observable isPinned = this.storage.get().pinnedSidebar;
   @observable isAccessible = true;
+  @observable sidebarWidth = this.storage.get().sidebarWidth
 
   @disposeOnUnmount syncPinnedStateWithStorage = reaction(
     () => this.isPinned,
     (isPinned) => this.storage.merge({ pinnedSidebar: isPinned })
   );
 
+  @disposeOnUnmount syncWidthStateWithStorage = reaction(
+    () => this.sidebarWidth,
+    (sidebarWidth) => this.storage.merge({ sidebarWidth })
+  );
+
   toggleSidebar = () => {
     this.isPinned = !this.isPinned;
     this.isAccessible = false;
     setTimeout(() => (this.isAccessible = true), 250);
   };
 
+  getSidebarSize = () => {
+    return {
+      "--sidebar-width": `${this.sidebarWidth}px`,
+    }
+  }
+
+  @autobind()
+  adjustWidth(newWidth: number): void {
+    this.sidebarWidth = newWidth
+  }
+
   render() {
     const { className, headerClass, footer, footerClass, children } = this.props;
     const cluster = getHostedCluster();
@@ -41,20 +62,31 @@ export class MainLayout extends React.Component<Props> {
       return null; // fix: skip render when removing active (visible) cluster
     }
     return (
-      <div className={cssNames("MainLayout", className)}>
+      <div className={cssNames("MainLayout", className)} style={this.getSidebarSize() as any}>
         <header className={cssNames("flex gaps align-center", headerClass)}>
           <span className="cluster">{cluster.preferences.clusterName || cluster.contextName}</span>
         </header>
 
         <aside className={cssNames("flex column", { pinned: this.isPinned, accessible: this.isAccessible })}>
           <Sidebar className="box grow" isPinned={this.isPinned} toggle={this.toggleSidebar} />
+          <ResizingAnchor
+            direction={ResizeDirection.HORIZONTAL}
+            placement={ResizeSide.TRAILING}
+            growthDirection={ResizeGrowthDirection.LEFT_TO_RIGHT}
+            getCurrentExtent={() => this.sidebarWidth}
+            onDrag={this.adjustWidth}
+            onDoubleClick={this.toggleSidebar}
+            disabled={!this.isPinned}
+            minExtent={100}
+            maxExtent={750}
+          />
         </aside>
 
         <main>
           <ErrorBoundary>{children}</ErrorBoundary>
         </main>
 
-        <footer className={footerClass}>{footer === undefined ? <Dock /> : footer}</footer>
+        <footer className={footerClass}>{footer ?? <Dock />}</footer>
       </div>
     );
   }