add sidebar styles
This commit is contained in:
parent
21ccc5058b
commit
49ba6d3bd3
|
@ -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,
|
||||
},
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
Loading…
Reference in New Issue