Sprint 76 Technical document (New app navigation)

New App navigation

https://www.figma.com/file/eMffC0h3JPlWtzNttxJpil/Litefarm-Updated?type=design&node-id=970-22925&mode=design&t=yjXmcSxNI1AEmYBV-0

Quick note on Dec 13, 2023 finalized list of menu and sub-menu items can be found on Navigation 2.0. Several of the below images are now out of date. - Kevin

 

Context

Task

Notes

Blocks

 

Context

Task

Notes

Blocks

1

make the side menu responsive

 

Fix side menu on the left for desktop and tablet views (415px-).

https://lite-farm.atlassian.net/browse/LF-3910

No need to make any visual changes to the menu or the nav bar.

2, 4

2

side menu (desktop)

(mobile)

Create side menu for desktop view and mobile view

https://lite-farm.atlassian.net/browse/LF-3911

Ideally one component is used for the both views.

  • reference: MUI’s list components

  • There’s a sample code for nested list in MUI’s documentation. Another option for the collapsed menu is to use ExpandableItem and useExpandable hook (the file name is useExpandableItem for some reason, sorry…)

3

3

side menu (tablet)

Create side menu for tablet view (415 - 1024px)

https://lite-farm.atlassian.net/browse/LF-3912

 

 

4

dropdown (desktop)

(mobile)

Update navigation bar and dropdown menu (drawer for the mobile view)

https://lite-farm.atlassian.net/browse/LF-3913