Care UI Slideover, upgrades Notifications List and Mobile Sidebar

[rithviknishad]

Proposed Changes

• Fixes Notifications sidebar is not responsive #4387
• New component: SlideOver
• Replaces the custom slide-over of the mobile sidebar with the new slide-over component.

Co-authored by @skks1212 via #3996

Desktop view (notifications)

Mobile view (sidebar and notifications)

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

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	e3b157e
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/63b4f972a3befc000951aa25
😎 Deploy Preview	https://deploy-preview-4487--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 4, 2023 at 3:58AM (UTC)

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
11 Code Smells

No Coverage information
0.0% Duplication

[shivankacker]

LGTM!

[naman114]

I am not able to see the back arrow even though it can be pressed @rithviknishad

AwesomeScreenshot-1_4_2023.5.59.55PM.mp4

[rithviknishad]

@naman114 the video recording you have is #3996 which uses unicons, and it has been removed from care. This PR is #4487 and uses Care Icons.

[nihal467]

LGTM, marking it for "Team discussion required" for final UI approval

[nihal467]

@khavinshankar the UI is approved in yesterday's EOD. You can merge it