From eb144a7cfdf504f23bf7d3fc834a6552390af5f6 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Thu, 1 Oct 2020 17:05:25 -0400
Subject: [PATCH] set better min/max sidebar widths, add double click to pin
 while in hover mode

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/components/layout/main-layout.scss |  2 +-
 src/renderer/components/layout/main-layout.tsx  | 17 +++++++++++++++--
 src/renderer/components/layout/sidebar.tsx      | 11 +++++++++--
 .../resizing-anchor/resizing-anchor.scss        |  3 ++-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/layout/main-layout.scss b/src/renderer/components/layout/main-layout.scss
index 2c14562cb5..7d6ed41757 100755
--- a/src/renderer/components/layout/main-layout.scss
+++ b/src/renderer/components/layout/main-layout.scss
@@ -39,7 +39,7 @@
       overflow: hidden;
 
       &.accessible:hover {
-        width: max-content;
+        width: var(--sidebar-width);
         transition-delay: 750ms;
         box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);
         z-index: $zIndex-sidebar-hover;
diff --git a/src/renderer/components/layout/main-layout.tsx b/src/renderer/components/layout/main-layout.tsx
index 10c4fc7ea9..cd25010f97 100755
--- a/src/renderer/components/layout/main-layout.tsx
+++ b/src/renderer/components/layout/main-layout.tsx
@@ -55,6 +55,19 @@ export class MainLayout extends React.Component<Props> {
     this.sidebarWidth = newWidth
   }
 
+  sidebarMinWidth(): number {
+    const headerPadding = 4 * 2 // 4px * (1 for right + 1 for left)
+    const appIcon = 28
+    const appName = 40
+    const pinningIcon = 22 + 10 // 10 for hover circle
+    const goodMeasure = 10
+    return headerPadding + appIcon + appName + pinningIcon + goodMeasure
+  }
+
+  sidebarMaxWidth(): number {
+    return (window.innerWidth || 500) * 0.4
+  }
+
   render() {
     const { className, headerClass, footer, footerClass, children } = this.props;
     const cluster = getHostedCluster();
@@ -77,8 +90,8 @@ export class MainLayout extends React.Component<Props> {
             onDrag={this.adjustWidth}
             onDoubleClick={this.toggleSidebar}
             disabled={!this.isPinned}
-            minExtent={100}
-            maxExtent={750}
+            minExtent={this.sidebarMinWidth()}
+            maxExtent={this.sidebarMaxWidth()}
           />
         </aside>
 
diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index a3a3271e0d..0887dedcff 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -6,7 +6,7 @@ import { computed, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { matchPath, NavLink } from "react-router-dom";
 import { Trans } from "@lingui/macro";
-import { createStorage, cssNames } from "../../utils";
+import { autobind, createStorage, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
 import { namespacesURL } from "../+namespaces/namespaces.route";
@@ -71,12 +71,19 @@ export class Sidebar extends React.Component<Props> {
     });
   }
 
+  @autobind()
+  onDoubleClick() {
+    if (!this.props.isPinned) {
+      this.props.toggle()
+    }
+  }
+
   render() {
     const { toggle, isPinned, className } = this.props;
     const query = namespaceStore.getContextParams();
     return (
       <SidebarContext.Provider value={{ pinned: isPinned }}>
-        <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
+        <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })} onDoubleClick={this.onDoubleClick}>
           <div className="header flex align-center">
             <NavLink exact to="/" className="box grow">
               <Icon svg="logo-full" className="logo-icon" />
diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.scss b/src/renderer/components/resizing-anchor/resizing-anchor.scss
index 310727af2c..10e81c7533 100644
--- a/src/renderer/components/resizing-anchor/resizing-anchor.scss
+++ b/src/renderer/components/resizing-anchor/resizing-anchor.scss
@@ -11,7 +11,8 @@ body.resizing {
   z-index: 10;
 
   &.disabled {
-    display: none;
+    pointer-events: none;
+    cursor: unset;
   }
 
   &.vertical {