From f41a799eee63ce1babb5c194c81fa670868e6e56 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 21 Feb 2019 00:44:13 +0100 Subject: [PATCH 1/3] add hamburger icon --- src/config/icons.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/config/icons.js b/src/config/icons.js index 1190fa88..2e15dcc1 100644 --- a/src/config/icons.js +++ b/src/config/icons.js @@ -79,6 +79,9 @@ export default { QRCODE: [ 'M832 1024l-64 0l0 -128l64 0l0 128Zm-320 0l-64 0l0 -128l64 0l0 128Zm192 0l-128 0l0 -128l128 0l0 128Zm192 -192l64 0l0 64l64 0l0 128l-128 0l0 -192Zm-896 -192l384 0l0 384l-384 0l0 -384Zm320 320l0 -256l-256 0l0 256l256 0Zm-64 -64l-128 0l0 -128l128 0l0 128Zm512 0l-64 0l0 -64l64 0l0 64Zm-192 -128l0 128l-64 0l0 -64l-64 0l0 -64l128 0Zm128 64l-64 0l0 -64l64 0l0 64Zm192 0l-128 0l0 -64l128 0l0 64Zm-256 -64l-64 0l0 -64l64 0l0 64Zm320 -64l-64 0l0 -64l128 0l0 128l-64 0l0 -64Zm-384 0l-128 0l0 -128l128 0l0 128Zm64 -64l64 0l0 -64l128 0l0 128l-192 0l0 -64Zm-320 -128l64 0l0 -64l64 0l0 128l-128 0l0 -64Zm256 0l-64 0l0 -64l192 0l0 128l-128 0l0 -64Zm-576 -64l128 0l0 64l64 0l0 64l-192 0l0 -128Zm896 64l-128 0l0 -64l256 0l0 128l-128 0l0 -64Zm-576 0l-128 0l0 -64l128 0l0 64Zm192 -64l-64 0l0 -64l64 0l0 64Zm-512 -448l384 0l0 384l-384 0l0 -384Zm576 384l-64 0l0 -128l64 0l0 128Zm64 -384l384 0l0 384l-384 0l0 -384Zm-320 320l0 -256l-256 0l0 256l256 0Zm640 0l0 -256l-256 0l0 256l256 0Zm-704 -64l-128 0l0 -128l128 0l0 128Zm640 0l-128 0l0 -128l128 0l0 128Zm-384 -256l0 64l64 0l0 128l-64 0l0 64l-64 0l0 -256l64 0Z', ], + MENU: [ + 'M192,265.497l640,0l0,119.906l-640,0l0,-119.906Zm0,186.56l640,0l0,119.946l-640,0l0,-119.946Zm0,186.56l640,0l0,119.886l-640,0l0,-119.886Z', + ], }; /* From 7b1d5551383ea5331250e01d01485034ba351fac Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 21 Feb 2019 00:46:37 +0100 Subject: [PATCH 2/3] use svg icons for menu toggler instead of utf chars --- src/components/Header/index.js | 46 ++++++++++++++++++++++++++++------ 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 35bbcd2c..a0cf1fa9 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -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) => ( - { sidebarEnabled && {sidebarOpened ? '✕ Close' : '☰ Menu'}} + { sidebarEnabled && ( + {sidebarOpened + ? ( + <> + + Close + + ) : ( + <> + + Menu + + )} + + )} From 8c07d457500fbd1c6c530998b266cf31f299291c Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Thu, 21 Feb 2019 00:50:22 +0100 Subject: [PATCH 3/3] move condition to a new line --- src/components/Header/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Header/index.js b/src/components/Header/index.js index a0cf1fa9..e6a1cef2 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -124,8 +124,8 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => ( { sidebarEnabled && ( - {sidebarOpened - ? ( + + {sidebarOpened ? ( <>