arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-13 20:08:56 +00:00
Code Issues Releases Wiki Activity

use svg icons for menu toggler instead of utf chars

Browse Source
This commit is contained in:
slowbackspace 2019-02-21 00:46:37 +01:00
parent f41a799eee
commit 7b1d555138
1 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Header/index.js
View File

@ -4,6 +4,9 @@ import styled from 'styled-components';
import { NavLink } from 'react-router-dom';
import colors from 'config/colors';
import { SCREEN_SIZE } from 'config/variables';
import Icon from 'components/Icon';
import icons from 'config/icons';
import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions';
const Wrapper = styled.header`
@ -12,12 +15,6 @@ const Wrapper = styled.header`
background: ${colors.HEADER};
overflow: hidden;
z-index: 200;
svg {
fill: ${colors.WHITE};
height: 28px;
width: 100px;
}
`;
const LayoutWrapper = styled.div`
@ -48,21 +45,32 @@ const MenuToggler = styled.div`
white-space: nowrap;
color: ${colors.WHITE};
align-self: center;
align-items: center;
cursor: pointer;
user-select: none;
padding: 10px 0px;
transition: all .1s ease-in;
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
display: initial;
display: flex;
}
`;
const TogglerText = styled.div`
`;
const Logo = styled.div`
flex: 1;
justify-content: flex-start;
display: flex;
svg {
fill: ${colors.WHITE};
height: 28px;
width: 100px;
}
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
flex: 1 0 33%;
justify-content: center;
@ -115,7 +123,29 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
<Wrapper data-test="Main__page__navigation">
<LayoutWrapper>
<Left>
{ sidebarEnabled && <MenuToggler onClick={toggleSidebar}>{sidebarOpened ? '✕ Close' : '☰ Menu'}</MenuToggler>}
{ sidebarEnabled && (
<MenuToggler onClick={toggleSidebar}>{sidebarOpened
? (
<>
<Icon
size={24}
color={colors.WHITE}
icon={icons.CLOSE}
/>
<TogglerText>Close</TogglerText>
</>
) : (
<>
<Icon
color={colors.WHITE}
size={24}
icon={icons.MENU}
/>
<TogglerText>Menu</TogglerText>
</>
)}
</MenuToggler>
)}
</Left>
<Logo>
<NavLink to="/">