make sidebar toggleable

src/components/EtherscanLink/index.jsx

@@ -26,6 +26,6 @@ const EtherscanLink = ({ type, value, currentNetwork }: EtherscanLinkProps) => (
 )
 
 export default connect<Object, Object, ?Function, ?Object>(
-  state => ({ currentNetwork: networkSelector(state) }),
+  (state) => ({ currentNetwork: networkSelector(state) }),
   null,
 )(EtherscanLink)

src/components/Header/component/Layout.jsx

@@ -14,6 +14,7 @@ import Row from '~/components/layout/Row'
 import Spacer from '~/components/Spacer'
 import { border, sm, md } from '~/theme/variables'
 import Provider from './Provider'
+import SafeListHeader from './SafeListHeader'
 
 const logo = require('../assets/gnosis-safe-logo.svg')
 
@@ -58,8 +59,9 @@ const Layout = openHoc(({
         </Link>
       </Col>
       <Divider />
-      <Spacer />
+      <SafeListHeader />
       <Divider />
+      <Spacer />
       <Provider open={open} toggle={toggle} info={providerInfo}>
         {(providerRef) => (
           <Popper open={open} anchorEl={providerRef.current} placement="bottom-end">

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

@@ -0,0 +1,60 @@
+// @flow
+import * as React from 'react'
+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 Paragraph from '~/components/layout/Paragraph'
+import Col from '~/components/layout/Col'
+import {
+  xs, sm, md, border,
+} from '~/theme/variables'
+import { safesCountSelector } from '~/routes/safeList/store/selectors'
+import { SidebarContext } from '~/components/Sidebar'
+
+const useStyles = makeStyles({
+  container: {
+    flexGrow: 0,
+    padding: `0 ${md}`,
+  },
+  counter: {
+    background: border,
+    padding: xs,
+    borderRadius: '3px',
+    marginLeft: sm,
+    lineHeight: 'normal',
+  },
+  icon: {
+    marginLeft: sm,
+  },
+})
+
+type Props = {
+  safesCount: number,
+}
+
+const { useContext } = React
+
+const SafeListHeader = ({ safesCount }: Props) => {
+  const classes = useStyles()
+  const { toggleSidebar } = useContext(SidebarContext)
+
+  return (
+    <Col start="xs" middle="xs" className={classes.container}>
+      Safes
+      {' '}
+      <Paragraph size="xs" className={classes.counter}>
+        {safesCount}
+      </Paragraph>
+      <IconButton onClick={toggleSidebar} className={classes.icon} aria-label="Expand Safe List">
+        <ExpandMoreIcon color="secondary" />
+      </IconButton>
+    </Col>
+  )
+}
+
+export default connect<Object, Object, ?Function, ?Object>(
+  // $FlowFixMe
+  (state) => ({ safesCount: safesCountSelector(state) }),
+  null,
+)(SafeListHeader)

src/components/Root/index.js

@@ -6,7 +6,6 @@ import React, { Suspense } from 'react'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
 import { hot } from 'react-hot-loader/root'
-import Sidebar from '~/components/Sidebar'
 import PageFrame from '../layout/PageFrame'
 import Loader from '../Loader'
 import { history, store } from '~/store'
@@ -22,7 +21,6 @@ const Root = () => (
         <PageFrame>
           <Suspense fallback={<Loader />}>
             <AppRoutes />
-            <Sidebar />
           </Suspense>
         </PageFrame>
       </ConnectedRouter>

src/components/Sidebar/index.jsx

@@ -3,7 +3,12 @@ import React, { useState } from 'react'
 import Drawer from '@material-ui/core/Drawer'
 import useSidebarStyles from './style'
 
-const Sidebar = () => {
+export const SidebarContext = React.createContext({
+  isOpen: false,
+  toggleSidebar: () => {},
+})
+
+const Sidebar = ({ children }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true)
   const classes = useSidebarStyles()
 
@@ -12,6 +17,7 @@ const Sidebar = () => {
   }
 
   return (
+    <SidebarContext.Provider value={{ isOpen, toggleSidebar }}>
       <Drawer
         className={classes.sidebar}
         open={isOpen}
@@ -21,6 +27,8 @@ const Sidebar = () => {
         <div className={classes.headerPlaceholder} />
         Wop
       </Drawer>
+      {children}
+    </SidebarContext.Provider>
   )
 }
 

src/components/layout/Divider/index.js

@@ -4,7 +4,7 @@ import { border } from '~/theme/variables'
 
 const style = {
   height: '100%',
-  borderRight: `solid 1px ${border}`,
+  borderRight: `solid 2px ${border}`,
 }
 
 const Divider = () => <div style={style} />

src/components/layout/PageFrame/index.jsx

@@ -1,7 +1,8 @@
 // @flow
-import React from 'react'
+import * as React from 'react'
 import Footer from '~/components/Footer'
 import Header from '~/components/Header'
+import SidebarProvider from '~/components/Sidebar'
 import { SharedSnackbarProvider } from '~/components/SharedSnackBar'
 import styles from './index.scss'
 
@@ -12,9 +13,11 @@ type Props = {
 const PageFrame = ({ children }: Props) => (
   <SharedSnackbarProvider>
     <div className={styles.frame}>
+      <SidebarProvider>
         <Header />
         {children}
         <Footer />
+      </SidebarProvider>
     </div>
   </SharedSnackbarProvider>
 )

src/routes/safeList/store/selectors/index.js

@@ -11,3 +11,8 @@ export const safesListSelector: Selector<GlobalState, {}, List<Safe>> = createSe
   safesMapSelector,
   (safes: Map<string, Safe>): List<Safe> => safes.toList(),
 )
+
+export const safesCountSelector: Selector<GlobalState, {}, number> = createSelector(
+  safesMapSelector,
+  (safes: Map<string, Safe>): number => safes.size,
+)

src/theme/mui.js

@@ -206,6 +206,11 @@ export default createMuiTheme({
         color: primary,
       },
     },
+    MuiSvgIcon: {
+      colorSecondary: {
+        color: secondaryText,
+      }
+    },
     MuiTab: {
       root: {
         fontFamily: 'Averta, monospace',