Page MenuHomePhabricator

[Cashtab] Add hamburger menu to taskbar
AbandonedPublic

Authored by kieran709 on Apr 12 2022, 19:52.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Summary

Related to task T2376. Added hamburger and exit icons to custom icons, replaced the cog icon in the navbar with the hamburger menu and moved the cog icon into the expanded menu.

Test Plan

cd web/cashtab && npm start
observe the hamburger menu in the navbar
click the hamburger menu
observe the X icon which closes the menu
observe the styled div that holds each navmenu item
click the Settings navbutton
observe the settings page
expand the navmenu again
observe that the Settings navbutton's color is blue
click the X icon to ensure the menu closes when it is clicked

Diff Detail

Repository
rABC Bitcoin ABC
Branch
add-hamburger-menu-to-taskbar
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 18842
Build 37474: Build Diffcashtab-tests
Build 37473: arc lint + arc unit

Event Timeline

The rendered menu should

  • expand upward from bottom right
  • line up with right side of the app
  • not be transparent background

image.png (146×191 px, 6 KB)

Also: apply same change to the extension version of App.js

web/cashtab/src/components/App.js
290 ↗(On Diff #33177)

This function can be simplified.

return setNavMenuOpen(!navMenuOpen)

297 ↗(On Diff #33177)

Not sure why this var is returned

This revision now requires changes to proceed.Apr 14 2022, 09:43

Responding to review feedback.

OK looks functionally good.

Aesthetic improvements needed before landing:

  • Hamburger should animate from lines to the X, not just toggle
  • Menu should animate, rise from bottom and expand up
  • Hover effect for mouse over menu item
This revision now requires changes to proceed.Apr 20 2022, 17:12