[UI Update] Sidemenu with Header
Budget: $49 – $50 USD
# Project
## Deadline
Deadline need to push the code.
2022/11/11 06:00 (GMT+8)
---
## Description
A clear and concise description of what the problem is.
- The sidebar is combined with the Header, and the scale and rendering are corrected.
---
## Goal
- [ ] Page/Flow/Action
- SideMenu
- Storybook UI
- 
- New - UI Integrate with header and logo
- 
- Header
- Exist UI
- 
- New UI
- Just need to put two icon
- Bell Icon
- The menu can temporarily not appear.
- Name Icon
- Temporary show the logout button after clicked like exist system.
- 
- 
- PC
- 
---
# Resources
## Figma
- Play the animation by Fimga prototype will know action on this page clearly
- 
- [UI of this issue follow figma design](https://www.figma.com/file/GH4M32mMjRucCuI8Ty66rd/Infocenter-Mockup?node-id=1399%3A48211)
---
# Acceptance
## Function Review
- Fulfilling requirements.
- [ ] UI of this issue adjusted to be consistent with figma
- [ ] Delivering complete code and functionality.
- [ ] Add and update the UI used by this Issue.
- [ ] Delivering complete code and functionality.
## Fool-proof design
- API
- [ ] API don't repeats unnecessary triggers.
- [ ] No data be updated (e.g. input/selected……etc) not call the process’s api.
- UI
- Before call the api
- [ ] No data be updated (input/selected) that the process’s button need be disabled and can’t be click.
- [ ] If the process have “Next step” button need “Pre step” button in the next steps.
- Call the api
- [ ] Need to show the loading icon when waiting the api.
- If the process call more than one api, just need to show one loading icon during the process.
- [ ] Process’s button need be disable , can’t be double click and trigger the api again.
- After api response
- [ ] Need to show the default process message(eg. success, fail…..etc) after the api response.
- Video
- [ ] Development process video
- Development process video, non-work monitoring, no need for continuous , just hope to keep the audio and video data, and be able to establish and develop KM in the future.
- Code Review
- [ ] Comply with the development specifications and requirements, and complete the revision.
## Deadline
Deadline need to push the code.
2022/11/11 06:00 (GMT+8)
---
## Description
A clear and concise description of what the problem is.
- The sidebar is combined with the Header, and the scale and rendering are corrected.
---
## Goal
- [ ] Page/Flow/Action
- SideMenu
- Storybook UI
- 
- New - UI Integrate with header and logo
- 
- Header
- Exist UI
- 
- New UI
- Just need to put two icon
- Bell Icon
- The menu can temporarily not appear.
- Name Icon
- Temporary show the logout button after clicked like exist system.
- 
- 
- PC
- 
---
# Resources
## Figma
- Play the animation by Fimga prototype will know action on this page clearly
- 
- [UI of this issue follow figma design](https://www.figma.com/file/GH4M32mMjRucCuI8Ty66rd/Infocenter-Mockup?node-id=1399%3A48211)
---
# Acceptance
## Function Review
- Fulfilling requirements.
- [ ] UI of this issue adjusted to be consistent with figma
- [ ] Delivering complete code and functionality.
- [ ] Add and update the UI used by this Issue.
- [ ] Delivering complete code and functionality.
## Fool-proof design
- API
- [ ] API don't repeats unnecessary triggers.
- [ ] No data be updated (e.g. input/selected……etc) not call the process’s api.
- UI
- Before call the api
- [ ] No data be updated (input/selected) that the process’s button need be disabled and can’t be click.
- [ ] If the process have “Next step” button need “Pre step” button in the next steps.
- Call the api
- [ ] Need to show the loading icon when waiting the api.
- If the process call more than one api, just need to show one loading icon during the process.
- [ ] Process’s button need be disable , can’t be double click and trigger the api again.
- After api response
- [ ] Need to show the default process message(eg. success, fail…..etc) after the api response.
- Video
- [ ] Development process video
- Development process video, non-work monitoring, no need for continuous , just hope to keep the audio and video data, and be able to establish and develop KM in the future.
- Code Review
- [ ] Comply with the development specifications and requirements, and complete the revision.