add sidebar styles

src/components/Header/component/Layout.jsx

@@ -17,6 +17,8 @@ import Provider from './Provider'
 
 const logo = require('../assets/gnosis-safe-logo.svg')
 
+export const headerHeight = '53px'
+
 type Props = Open & {
   classes: Object,
   providerDetails: React.Node,
@@ -34,7 +36,7 @@ const styles = () => ({
   summary: {
     borderBottom: `solid 1px ${border}`,
     alignItems: 'center',
-    height: '53px',
+    height: headerHeight,
     backgroundColor: 'white',
     zIndex: 1301,
   },

src/components/Sidebar/index.jsx

@@ -1,16 +1,27 @@
 // @flow
 import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
 import Drawer from '@material-ui/core/Drawer'
+import useSidebarStyles from './style'
 
 const Sidebar = () => {
   const [isOpen, setIsOpen] = useState<boolean>(true)
+  const classes = useSidebarStyles()
 
   const toggleSidebar = () => {
     setIsOpen((prevIsOpen) => !prevIsOpen)
   }
 
-  return <Drawer open={isOpen} onKeyDown={toggleSidebar}>Wop</Drawer>
+  return (
+    <Drawer
+      className={classes.sidebar}
+      open={isOpen}
+      onKeyDown={toggleSidebar}
+      classes={{ paper: classes.sidebarPaper }}
+    >
+      <div className={classes.headerPlaceholder} />
+      Wop
+    </Drawer>
+  )
 }
 
 export default Sidebar

src/components/Sidebar/style.js

@@ -0,0 +1,19 @@
+// @flow
+import { makeStyles } from '@material-ui/core/styles'
+import { headerHeight } from '~/components/Header/component/Layout'
+
+const sidebarWidth = '400px'
+
+const useSidebarStyles = makeStyles({
+  sidebar: {
+    width: sidebarWidth,
+  },
+  sidebarPaper: {
+    width: sidebarWidth,
+  },
+  headerPlaceholder: {
+    height: headerHeight,
+  },
+})
+
+export default useSidebarStyles