Sidebar: Access typed controls state within component

Instead of passing down from Main.

Also take the opportunity to convert this file to TypeScript.

src/components/main/index.js

@@ -143,11 +143,9 @@ class Main extends React.Component {
           handler={this.toggleSidebar}
         />
         <Sidebar
-          sidebarOpen={this.props.sidebarOpen}
           width={sidebarWidth}
           height={availableHeight}
           displayNarrative={this.props.displayNarrative}
-          panelsToDisplay={this.props.panelsToDisplay}
           narrativeTitle={this.props.narrativeTitle}
           navBarHandler={this.toggleSidebar}
         />

src/components/main/sidebar.js → src/components/main/sidebar.tsx

@@ -1,15 +1,20 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import {ThemeProvider} from 'styled-components';
 import Narrative from "../narrative";
 import NavBar from "../navBar";
 import Controls from "../controls/controls";
 import { SidebarContainer, sidebarTheme } from "./styles";
 import { narrativeNavBarHeight } from "../../util/globals";
+import { RootState } from "../../store";
 
 
 export const Sidebar = (
-  {sidebarOpen, width, height, displayNarrative, panelsToDisplay, narrativeTitle, navBarHandler}
+  { width, height, displayNarrative, narrativeTitle, navBarHandler}
 ) => {
+  const sidebarOpen = useSelector((state: RootState) => state.controls.sidebarOpen);
+  const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay);
+
   return (
     <ThemeProvider theme={sidebarTheme}>
       <SidebarContainer left={sidebarOpen ? 0 : -1 * width} width={width} height={height}>