Fix (NotificationsList): made the Notifications sidebar responsive

[naman114]

Proposed Changes

• Fixes Notifications sidebar is not responsive #4387
• Made the notification bar open from the right edge of the screen
• Earlier, the NotificationsList component was part of the Sidebar component. This caused the notification bar to open as part of the Sidebar (smaller width) in mobile view. In this PR, the NotificationsList component is moved higher up to the AppRouter component along with its state (handling its opening/closing). The state and setState for the the same have been passed down to the Sidebar and NotificationsList components

AwesomeScreenshot-1_3_2023.3.02.38AM.mp4

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	68178a0
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/63b354e3f438000008bafcc7
😎 Deploy Preview	https://deploy-preview-4441--care-egov-staging.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
care-storybook	✅ Ready (Inspect)	Visit Preview	Jan 2, 2023 at 10:05PM (UTC)

[rithviknishad]

The notification bar should be opening from the right edge of the screen.

[naman114]

Made the sidebar open from the right edge of the screen. Updated the video in the PR description showing the same

@rithviknishad

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
0.0% Duplication

[nihal467]

LGTM

[rithviknishad]

I'm not too fond of the notification logic being handled inside the sidebar.
What do you think @khavinshankar?

[naman114]

How would you handle it? @rithviknishad

[rithviknishad]

@naman114 I would ideally prefer using redux here. This way there's no need to keep on passing the props, and the sidebar handles the logic of the sidebar only.

[rithviknishad]

A component: NotificationItem (the sidebar list item) could mimick the sidebar item, but could fetch the notification count from redux maybe?

The open/close state may also be handled with redux.

[naman114]

@rithviknishad Here, we just have the AppRouter component as the parent with the Sidebar and NotificationList as the children components. Since the component hierarchy doesn't extend beyond parent-child, won't Redux be overkill?

Also, even if Redux is used, the Sidebar will have to update the opening/closing state of the Notifications Modal so it's still not really like - the sidebar handling the logic of sidebar only

[rithviknishad]

@naman114 Yes I agree using redux is overkill 😅

Can you checkout this deploy preview? https://deploy-preview-3996--care-net.netlify.app

I and shivank had solved this issue in an earlier PR.

@khavinshankar can you put this on hold, I'll get the slideover implementation refactored out from that PR in a separate PR by today

PR: #3996

[rithviknishad]

@naman114 @khavinshankar fixed in #4487 by using the new SlideOver component instead.

[naman114]

Should I close this PR? @rithviknishad @khavinshankar