fixed panels behaviour

src/components/panels/UserPanel.tsx

@@ -166,6 +166,20 @@ export class UserPanelUnconnected extends PureComponent<Props, State> {
             </button>
           </div>
 
+          <React.Fragment>
+            <div className="control-sep" />
+
+            <div className="control-bar">
+              <button
+                className={classnames({ active: false, inactive: is_empty })}
+                onClick={this.props.editorGetGPXTrack}
+              >
+                <Tooltip>Экспорт GPX</Tooltip>
+                <Icon icon="icon-gpx-1" />
+              </button>
+            </div>
+          </React.Fragment>
+
           <div className="control-sep" />
 
           <div className="control-bar">
@@ -174,22 +188,6 @@ export class UserPanelUnconnected extends PureComponent<Props, State> {
               <Icon icon="icon-shot-4" />
             </button>
           </div>
-
-          {!is_empty && (
-            <React.Fragment>
-              <div className="control-sep" />
-
-              <div className="control-bar">
-                <button
-                  className={classnames({ active: false })}
-                  onClick={this.props.editorGetGPXTrack}
-                >
-                  <Tooltip>Экспорт GPX</Tooltip>
-                  <Icon icon="icon-gpx-1" />
-                </button>
-              </div>
-            </React.Fragment>
-          )}
         </div>
       </div>
     );

src/styles/panel.less

@@ -42,6 +42,19 @@
   }
 
   &__undo {
+    opacity: 0;
+    transform: translate(50px, 0);
+    pointer-events: none;
+    touch-action: none;
+    transition: transform 0.25s, opacity 0.25s;
+    z-index: -1;
+    
+    &.active {
+      opacity: 1;
+      transform: translate(0, 0);
+      pointer-events: all;
+      touch-action: initial;
+    }
   }
 }