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

@@ -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;

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>
 

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" />

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 {