add sidebar styles

This commit is contained in:
Mikhail Mikheev 2019-09-16 18:28:08 +04:00
parent 21ccc5058b
commit 49ba6d3bd3
3 changed files with 35 additions and 3 deletions

View File

@ -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,
},

View File

@ -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

View File

@ -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