Add types for sidebar context

src/components/Header/component/Layout.jsx

@@ -62,6 +62,7 @@ const Layout = openHoc(({
       <SafeListHeader />
       <Divider />
       <Spacer />
+      <Divider />
       <Provider open={open} toggle={toggle} info={providerInfo}>
         {(providerRef) => (
           <Popper open={open} anchorEl={providerRef.current} placement="bottom-end">

src/components/Header/component/SafeListHeader/index.jsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import { makeStyles } from '@material-ui/core/styles'
 import IconButton from '@material-ui/core/IconButton'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import ExpandLessIcon from '@material-ui/icons/ExpandLess'
 import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
 import {
@@ -37,7 +38,7 @@ const { useContext } = React
 
 const SafeListHeader = ({ safesCount }: Props) => {
   const classes = useStyles()
-  const { toggleSidebar } = useContext(SidebarContext)
+  const { toggleSidebar, isOpen } = useContext(SidebarContext)
 
   return (
     <Col start="xs" middle="xs" className={classes.container}>
@@ -47,7 +48,7 @@ const SafeListHeader = ({ safesCount }: Props) => {
         {safesCount}
       </Paragraph>
       <IconButton onClick={toggleSidebar} className={classes.icon} aria-label="Expand Safe List">
-        <ExpandMoreIcon color="secondary" />
+        {isOpen ? <ExpandMoreIcon color="secondary" /> : <ExpandLessIcon />}
       </IconButton>
     </Col>
   )

src/components/Sidebar/index.jsx

@@ -1,15 +1,26 @@
 // @flow
-import React, { useState } from 'react'
+import * as React from 'react'
 import Drawer from '@material-ui/core/Drawer'
 import useSidebarStyles from './style'
 
-export const SidebarContext = React.createContext({
+const { useState } = React
+
+type TSidebarContext = {
+  isOpen: boolean,
+  toggleSidebar: Function,
+}
+
+export const SidebarContext = React.createContext<TSidebarContext>({
   isOpen: false,
   toggleSidebar: () => {},
 })
 
-const Sidebar = ({ children }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true)
+type SidebarProps = {
+  children: React.Node,
+}
+
+const Sidebar = ({ children }: SidebarProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
   const classes = useSidebarStyles()
 
   const toggleSidebar = () => {