Related to T2376. Added menu icon that animates from hamburger to X on click, replaced the cog in the navbar with the hamburger menu. Clicking hamburger menu icon expands the nav menu.
Details
Details
- Reviewers
bytesofman emack - Group Reviewers
Restricted Project - Commits
- rABCeb90042170f6: [Cashtab] Add hamburger menu to taskbar
cd web/cashtab && npm start
observe the hamburger icon in the navbar
click the hamburger icon
observe that the icon animates to an X
observe the NavMenu transition height
hover over the settings NavItem
observe that the color turns to blue on hover
click the settings NavItem
observe that the NavMenu closes on click
observe that clicking the NavItem will redirect to Settings page.
Diff Detail
Diff Detail
- Repository
- rABC Bitcoin ABC
- Lint
Lint Not Applicable - Unit
Tests Not Applicable
Event Timeline
Comment Actions
The burger seems slightly wider and longer than the other nav icons, height and width just needs to be reduced a fraction to line up with the first 3 icons.
while in expanded mode:
Here you can see its scale on an iphone relative to a standard sized pen.
Try expanding its height and then testing on mobile. You can test this by going to d11997.netlify.app on your iOS or Android device.
The burger seems slightly wider and longer than the other nav icons, height and width just needs to be reduced a fraction to line up with the first 3 icons.
while in expanded mode:
- the X's height and width also needs to be reduced a fraction
- when I tested this in mobile mode, the Settings option was rather small to click on both iOS and Android devices. This will be especially evident when there are multiple navItems.
Here you can see its scale on an iphone relative to a standard sized pen.
Try expanding its height and then testing on mobile. You can test this by going to d11997.netlify.app on your iOS or Android device.
- when I added a few additional navItems with different char length than "Settings" the result seems to be center justified - they should all align right, with the icons all in a straight vertical line.
| web/cashtab/src/components/App.js | ||
|---|---|---|
| 174 ↗ | (On Diff #34995) | NavIcon would be a better name and for consistency |
Comment Actions
Fixed height and width of hamburger & X icons, increased height of NavItems, NavItems align right with all icons in a vertical line, Icon name changed to NavIcon.
Comment Actions
Nice one doing this without any npm packages!
- Let's put Airdrop behind the hamburger as well
- Needs a border or some kind of aesthetic/design consideration...blends in too much with the background
- Looks a bit small for picking out individual options with a thumb (i.e. the options that are revealed by the hamburger look small
- Make sure to also add this to the extension App.js
Comment Actions
Nice
- Right border of this drawer should exactly line up with right border of the app. Right now looks like there are a few pixels in between.
- Can you keep the border around the whole drawer but not in between drawer items? i.e. remove the line between 'settings' and 'airdrop' here.
- Change the transition effect. Would like to see the drawer take 1s to open and close (with it sliding up and down over that interval)
Comment Actions
Per review feedback: widened NavMenu, added border to NavMenu & removed borders from NavItems. Also, added additional transition effects to handle the new border.
Comment Actions
Cleaned up timing issue on close. When transitioning max-height, even though the element does not grow to that height, the transition still happens from that height. For this reason, the closing transitions have been shortened considerably and cubic-bezier is used to smooth the transition effect on close.
Comment Actions
The build failed due to an unexpected infrastructure outage. The administrators have been notified to investigate. Sorry for the inconvenience.
| web/cashtab/src/components/App.js | ||
|---|---|---|
| 210 ↗ | (On Diff #35186) | This is 8.5rem above in the extension version -- why the discrepancy? |