[wip] Add ability to show/hide options when panel is on

src/components/controls/panelSection.tsx

@@ -1,10 +1,25 @@
 import React from "react";
 import { useSelector } from "react-redux";
+import { FaChevronRight, FaChevronDown } from "react-icons/fa";
 import { AnnotatedHeader } from "./annotatedHeader";
 import { PanelSectionContainer } from "./styles";
 import PanelToggle from "./panel-toggle";
 import { RootState } from "../../store";
 
+
+type ChevronProps = {
+  show: boolean
+  onClick: any
+}
+
+const Chevron = ({ show, onClick }: ChevronProps) => {
+  const icon = show ? <FaChevronDown /> : <FaChevronRight />
+
+  return <span onClick={onClick} style={{color: "white"}}>
+    {icon}
+  </span>
+}
+
 type Props = {
   panel: string
   title: string
@@ -19,15 +34,24 @@ export const PanelSection = ({ panel, title, tooltip, options, mobile }: Props)
 
   const panelOn = panelsToDisplay.includes(panel)
 
+  // Initially, the toggle state determines whether options are shown.
+  const [showOptions, setShowOptions] = React.useState(panelOn);
+
+  // Subsequent toggle updates also determine whether options are shown.
+  React.useEffect(() => {
+    setShowOptions(panelOn)
+  }, [panelOn])
+
   return (
     <PanelSectionContainer>
+      <Chevron show={showOptions} onClick={() => setShowOptions(!showOptions)} />
       <AnnotatedHeader
         toggle={<PanelToggle panel={panel} on={panelOn} />}
         title={title}
         tooltip={tooltip}
         mobile={mobile}
       />
-      {panelOn && options}
+      {showOptions && options}
     </PanelSectionContainer>
   );
 };