Es/feat drawer navigation

[ErikSin]

Add drawer navigation

[achou11]

Haven't read through implementation just yet, but here are some initial UI suggestions to make it closer to the intended design (see screenshots at bottom for frame of reference):

• Increase font size and weight of all text items (should match design when using default OS system settings for fonts)

• Grey box should extend over the safe area too

• Use lighter shade of grey for grey box

• horizontal spacing between the row icon and the text is a bit too large

• maybe increase the horizontal padding around the text in the grey box? seems like the design has it so that the text never flows under the drawer icon. not as adamant/sure about this one though

• Is there a drawer icon that matches the design? the one in the design has rounded ends whereas the one used in the implementation does not

  • currently

    

  • design:

    

• are the tutorial row + items at the bottom of the drawer (about and privacy policy) intentionally excluded from the implementation for now? EDIT: not relevant, since this PR just ports the existing items, which is reasonable

---

What's currently implemented:

Expected design:

[ErikSin]

• horizontal spacing between the row icon and the text is a bit too large

This is a really annoying problem to fix. I think the < list /> actually needs to be refactored. The < ListIcon /> is hardcoded with a minSize but overwriting it from the parent component is actually quite annoying, you have to overwrite each instance of it.

So this is a temp solution that doesn't break all the other implementations of it.

[ErikSin]

• Increase font size and weight of all text items (should match design when using default OS system settings for fonts)

i fixed the header size
For the other fonts, I'm just following the font size based of the notion style guide. I think if we do change it here, it needs to be changed everywhere. It is going into QA and the designers will see it, so if we need to increase the font size, it would probably be better to leave all as it (which is inherhited from the Text component), and just fix the text component accordingly.

[ErikSin]

• Grey box should extend over the safe area too

• Use lighter shade of grey for grey box

• maybe increase the horizontal padding around the text in the grey box? seems like the design has it so that the text never flows under the drawer icon. not as adamant/sure about this one though

• Is there a drawer icon that matches the design? the one in the design has rounded ends whereas the one used in the implementation does not

addressed via fb37bbf

[achou11]

couple of smaller pieces of feedback but otherwise the implementation feels good!

[achou11]

nit: should create a stylesheet for this component and extract the inline styles out into it