Skip to content
Snippets Groups Projects
Commit 2921c8e7 authored by Alexandru Munteanu's avatar Alexandru Munteanu
Browse files

refactor(AppBar): add toggle overlay and username

parent b16375e0
No related branches found
No related tags found
No related merge requests found
import React from 'react' import React from 'react'
import { Icon } from '@pubsweet/ui' import { Icon } from '@pubsweet/ui'
import { get } from 'lodash'
import styled from 'styled-components' import styled from 'styled-components'
import { withRouter } from 'react-router-dom' import { withRouter } from 'react-router-dom'
import { withState, withHandlers, compose } from 'recompose' import { withState, withHandlers, compose } from 'recompose'
...@@ -13,7 +14,9 @@ const AppBar = ({ expanded, toggleMenu, brand, user, goTo }) => ( ...@@ -13,7 +14,9 @@ const AppBar = ({ expanded, toggleMenu, brand, user, goTo }) => (
<User> <User>
<div onClick={toggleMenu}> <div onClick={toggleMenu}>
<Icon color="#667080">user</Icon> <Icon color="#667080">user</Icon>
<span>{user.username}</span> <span>
{get(user, 'firstName') || get(user, 'username') || 'User'}
</span>
<Icon color="#667080">chevron-down</Icon> <Icon color="#667080">chevron-down</Icon>
</div> </div>
{expanded && ( {expanded && (
...@@ -22,11 +25,12 @@ const AppBar = ({ expanded, toggleMenu, brand, user, goTo }) => ( ...@@ -22,11 +25,12 @@ const AppBar = ({ expanded, toggleMenu, brand, user, goTo }) => (
<DropdownOption onClick={goTo('admin')}> <DropdownOption onClick={goTo('admin')}>
Admin dashboard Admin dashboard
</DropdownOption> </DropdownOption>
<DropdownOption>Logout</DropdownOption> <DropdownOption onClick={goTo('/logout')}>Logout</DropdownOption>
</Dropdown> </Dropdown>
)} )}
</User> </User>
)} )}
{expanded && <ToggleOverlay onClick={toggleMenu} />}
</Root> </Root>
) )
...@@ -87,6 +91,15 @@ const DropdownOption = styled.div` ...@@ -87,6 +91,15 @@ const DropdownOption = styled.div`
} }
` `
const ToggleOverlay = styled.div`
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
`
export default compose( export default compose(
withRouter, withRouter,
withState('expanded', 'setExpanded', false), withState('expanded', 'setExpanded', false),
...@@ -95,8 +108,8 @@ export default compose( ...@@ -95,8 +108,8 @@ export default compose(
setExpanded(v => !v) setExpanded(v => !v)
}, },
goTo: ({ setExpanded, history }) => path => () => { goTo: ({ setExpanded, history }) => path => () => {
history.push(path)
setExpanded(v => false) setExpanded(v => false)
history.push(path)
}, },
}), }),
)(AppBar) )(AppBar)
...@@ -25,7 +25,7 @@ module.exports = { ...@@ -25,7 +25,7 @@ module.exports = {
'pubsweet-client': { 'pubsweet-client': {
API_ENDPOINT: '/api', API_ENDPOINT: '/api',
'login-redirect': '/', 'login-redirect': '/',
'redux-log': false, 'redux-log': true,
theme: process.env.PUBSWEET_THEME, theme: process.env.PUBSWEET_THEME,
}, },
'mail-transport': { 'mail-transport': {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment