12.0 support drag side nav (#6340)

* 01 optimize resize bar

* 02 app side panel support resize

* 03 side panel is folded do not support resize

* 04 optimise code

* 05 use localStorage

frontend/src/components/resize-bar/constants.js

@@ -0,0 +1,4 @@
+export const DRAG_HANDLER_HEIGHT = 26;
+export const INIT_SIDE_PANEL_RATE = 0.22;
+export const MAX_SIDE_PANEL_RATE = 0.40;
+export const MIN_SIDE_PANEL_RATE = 0.15;

frontend/src/components/resize-bar/index.css

@@ -0,0 +1,43 @@
+.resize-bar {
+  height: 100%;
+  width: 6px;
+  position: absolute;
+  top: 0;
+  z-index: 8;
+  opacity: 0;
+  transition-duration: .2s;
+  transition-property: opacity;
+}
+
+.resize-bar:hover {
+  opacity: 1;
+  cursor: col-resize;
+}
+
+.resize-bar .resize-bar-line {
+  background-color: #aaa;
+  height: 100%;
+  width: 2px;
+  display: none;
+  user-select: none;
+}
+
+.resize-bar:hover .resize-bar-line {
+  display: block;
+}
+
+.resize-bar .resize-bar-drag-handler {
+  background: #2d7ff9;
+  border-radius: 10px;
+  margin-left: 1px;
+  position: absolute;
+  transform: translate(-50%);
+  width: 6px;
+  display: none;
+  z-index: 1;
+  user-select: none;
+}
+
+.resize-bar:hover .resize-bar-drag-handler {
+  display: block;
+}

frontend/src/components/resize-bar/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './index.css';
+
+function ResizeBar(props) {
+  return (
+    <div
+      className="resize-bar"
+      ref={props.resizeBarRef}
+      style={props.resizeBarStyle}
+      onMouseDown={props.onResizeMouseDown}
+      onMouseOver={props.onResizeMouseOver}
+    >
+      <div className="resize-bar-line"></div>
+      <div className="resize-bar-drag-handler" ref={props.dragHandlerRef} style={props.dragHandlerStyle}></div>
+    </div>
+  );
+}
+
+ResizeBar.propTypes = {
+  resizeBarRef: PropTypes.object.isRequired,
+  resizeBarStyle: PropTypes.object.isRequired,
+  dragHandlerRef: PropTypes.object.isRequired,
+  dragHandlerStyle: PropTypes.object.isRequired,
+  onResizeMouseDown: PropTypes.func.isRequired,
+  onResizeMouseOver: PropTypes.func.isRequired,
+};
+
+export default ResizeBar;