Add logout button
This commit is contained in:
parent
f57388e276
commit
b3f4264b3d
|
@ -39,32 +39,32 @@ const Content = styled.div`
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const SideButtonLink = styled(NavLink)`
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-left: 2px;
|
||||||
|
display: block;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 10px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
font-size: 28px;
|
||||||
|
|
||||||
|
color: #888;
|
||||||
|
|
||||||
|
transition: transform 200ms, box-shadow 200ms;
|
||||||
|
|
||||||
|
:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
const SideButton = props => {
|
const SideButton = props => {
|
||||||
const StyledLink = styled(NavLink)`
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 8px;
|
|
||||||
padding-left: 2px;
|
|
||||||
display: block;
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin: 10px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
font-size: 28px;
|
|
||||||
|
|
||||||
color: #888;
|
|
||||||
|
|
||||||
transition: transform 200ms, box-shadow 200ms;
|
|
||||||
|
|
||||||
:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledLink {...props} activeStyle={{ color: '#4183c4' }}>
|
<SideButtonLink {...props} activeStyle={{ color: '#4183c4' }}>
|
||||||
{props.children}
|
{props.children}
|
||||||
</StyledLink>
|
</SideButtonLink>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -120,6 +120,10 @@ const Layout = ({ children, title }) => (
|
||||||
return null
|
return null
|
||||||
}}
|
}}
|
||||||
</Query>
|
</Query>
|
||||||
|
<SideButton to="/logout">
|
||||||
|
<Icon name="lock" />
|
||||||
|
<SideButtonLabel>Log out</SideButtonLabel>
|
||||||
|
</SideButton>
|
||||||
</SideMenu>
|
</SideMenu>
|
||||||
</Authorized>
|
</Authorized>
|
||||||
<Sidebar>
|
<Sidebar>
|
||||||
|
|
|
@ -31,6 +31,12 @@ class Routes extends React.Component {
|
||||||
>
|
>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/login" component={LoginPage} />
|
<Route path="/login" component={LoginPage} />
|
||||||
|
<Route path="/logout">
|
||||||
|
{() => {
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
location.href = '/'
|
||||||
|
}}
|
||||||
|
</Route>
|
||||||
<Route path="/initialSetup" component={InitialSetupPage} />
|
<Route path="/initialSetup" component={InitialSetupPage} />
|
||||||
<Route path="/share" component={SharePage} />
|
<Route path="/share" component={SharePage} />
|
||||||
<AuthorizedRoute exact path="/albums" component={AlbumsPage} />
|
<AuthorizedRoute exact path="/albums" component={AlbumsPage} />
|
||||||
|
|
Loading…
Reference in New Issue