Sidebar component wip

src/components/Root/index.js

@@ -6,6 +6,7 @@ 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'
@@ -21,6 +22,7 @@ const Root = () => (
         <PageFrame>
           <Suspense fallback={<Loader />}>
             <AppRoutes />
+            <Sidebar />
           </Suspense>
         </PageFrame>
       </ConnectedRouter>

src/components/Sidebar/index.jsx

@@ -0,0 +1,16 @@
+// @flow
+import React, { useState } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Drawer from '@material-ui/core/Drawer'
+
+const Sidebar = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(true)
+
+  const toggleSidebar = () => {
+    setIsOpen((prevIsOpen) => !prevIsOpen)
+  }
+
+  return <Drawer open={isOpen} onKeyDown={toggleSidebar}>Wop</Drawer>
+}
+
+export default Sidebar