improve resize behavior

packages/app/src/components/Sidebar.tsx

@@ -107,7 +107,7 @@ const Sidebar: FC<Props> = (props: Props) => {
   const [isDragging, setDrag] = useState(false);
   const [isMounted, setMounted] = useState(false);
 
-  const isResizableByDrag = !isDrawerMode && (!isCollapsed || isHover);
+  const isResizableByDrag = !isResizeDisabled && !isDrawerMode && (!isCollapsed || isHover);
   /**
    * hack and override UIController.storeState
    *
@@ -302,12 +302,14 @@ const Sidebar: FC<Props> = (props: Props) => {
               </div>
             </div>
             <div className="grw-navigation-draggable">
-              <div
-                className={`${isResizableByDrag ? 'resizable' : ''} grw-navigation-draggable-hitarea`}
-                onMouseDown={dragableAreaMouseDownHandler}
-              >
-                <div className="grw-navigation-draggable-hitarea-child"></div>
-              </div>
+              { isResizableByDrag && (
+                <div
+                  className="grw-navigation-draggable-hitarea"
+                  onMouseDown={dragableAreaMouseDownHandler}
+                >
+                  <div className="grw-navigation-draggable-hitarea-child"></div>
+                </div>
+              ) }
               <button
                 className={`grw-navigation-resize-button ${!isDrawerMode ? 'resizable' : ''} ${isCollapsed ? 'collapsed' : ''} `}
                 type="button"

packages/app/src/styles/_sidebar.scss

@@ -154,7 +154,7 @@
         transition-duration: 0.22s;
         transition-property: left, opacity, width;
       }
-      .resizable.grw-navigation-draggable-hitarea {
+      .grw-navigation-draggable-hitarea {
         position: relative;
         left: -4px;
         width: 24px;
@@ -177,7 +177,6 @@
   }
 
   .grw-sidebar-nav {
-    min-width: 62px;
     height: 100vh;
 
     .btn {