Add "hide property" to Pane component to hide Panel contents using a prop

- Instead of doing conditional rendering, pass the condition to Panel as props

src/components/Panel.tsx

@@ -3,14 +3,19 @@ import React, { useState } from "react";
 interface PanelProps {
   title: string;
   defaultCollapsed?: boolean;
+  hide?: boolean;
 }
 
 export const Panel: React.FC<PanelProps> = ({
   title,
   children,
-  defaultCollapsed = false
+  defaultCollapsed = false,
+  hide = false
 }) => {
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
+  if (hide) return null;
+
   return (
     <div className="panel">
       <h4>{title}</h4>

src/index.tsx

@@ -381,8 +381,7 @@ class App extends React.Component<{}, AppState> {
               this.forceUpdate();
             }}
           />
-          {someElementIsSelected(elements) && (
+          <Panel title="Selection" hide={!someElementIsSelected(elements)}>
-            <Panel title="Selection">
             <PanelSelection
               onBringForward={this.moveOneRight}
               onBringToFront={this.moveAllRight}
@@ -486,7 +485,6 @@ class App extends React.Component<{}, AppState> {
               Delete selected
             </button>
           </Panel>
-          )}
           <PanelCanvas
             onClearCanvas={this.clearCanvas}
             onViewBackgroundColorChange={val =>