refactor: Update SidePanel.js to use a functional component (#2179)

platform/viewer/src/components/SidePanel.js

@@ -1,27 +1,16 @@
 import './SidePanel.css';
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-class SidePanel extends Component {
+const SidePanel = ({ from, isOpen, children, width }) => {
-  static propTypes = {
+  const fromSideClass = from === 'right' ? 'from-right' : 'from-left';
-    from: PropTypes.string.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    children: PropTypes.node,
-    width: PropTypes.string,
-  };
 
-  render() {
+  const styles = width
-    const fromSideClass =
-      this.props.from === 'right' ? 'from-right' : 'from-left';
-
-    const styles = this.props.width
     ? {
-          maxWidth: this.props.width,
+        maxWidth: width,
-          marginRight: this.props.isOpen
+        marginRight: isOpen ? '0' : Number.parseInt(width) * -1,
-            ? '0'
-            : Number.parseInt(this.props.width) * -1,
       }
     : {};
 
@@ -29,13 +18,19 @@ class SidePanel extends Component {
     <section
       style={styles}
       className={classNames('sidepanel', fromSideClass, {
-          'is-open': this.props.isOpen,
+        'is-open': isOpen,
       })}
     >
-        {this.props.children}
+      {children}
     </section>
   );
-  }
+};
-}
+
+SidePanel.propTypes = {
+  from: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  width: PropTypes.string,
+};
 
 export default SidePanel;