arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-23 14:31:07 +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 { NavLink } from 'react-router-dom';
import colors from 'config/colors'; import colors from 'config/colors';
import { SCREEN_SIZE } from 'config/variables'; import { SCREEN_SIZE } from 'config/variables';
import Icon from 'components/Icon';
import icons from 'config/icons';
import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions'; import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions';
const Wrapper = styled.header` const Wrapper = styled.header`
@ -12,12 +15,6 @@ const Wrapper = styled.header`
background: ${colors.HEADER}; background: ${colors.HEADER};
overflow: hidden; overflow: hidden;
z-index: 200; z-index: 200;
svg {
fill: ${colors.WHITE};
height: 28px;
width: 100px;
}
`; `;
const LayoutWrapper = styled.div` const LayoutWrapper = styled.div`
@ -48,21 +45,32 @@ const MenuToggler = styled.div`
white-space: nowrap; white-space: nowrap;
color: ${colors.WHITE}; color: ${colors.WHITE};
align-self: center; align-self: center;
align-items: center;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: 10px 0px; padding: 10px 0px;
transition: all .1s ease-in; transition: all .1s ease-in;
@media screen and (max-width: ${SCREEN_SIZE.SM}) { @media screen and (max-width: ${SCREEN_SIZE.SM}) {
display: initial; display: flex;
} }
`; `;
const TogglerText = styled.div`
`;
const Logo = styled.div` const Logo = styled.div`
flex: 1; flex: 1;
justify-content: flex-start; justify-content: flex-start;
display: flex; display: flex;
svg {
fill: ${colors.WHITE};
height: 28px;
width: 100px;
}
@media screen and (max-width: ${SCREEN_SIZE.SM}) { @media screen and (max-width: ${SCREEN_SIZE.SM}) {
flex: 1 0 33%; flex: 1 0 33%;
justify-content: center; justify-content: center;
@ -115,7 +123,29 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
<Wrapper data-test="Main__page__navigation"> <Wrapper data-test="Main__page__navigation">
<LayoutWrapper> <LayoutWrapper>
<Left> <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> </Left>
<Logo> <Logo>
<NavLink to="/"> <NavLink to="/">