INJIWEB-1640 Fix mobile sidebar default open state after login

[iamlokanath]

Initialize the sidebar collapsed on mobile viewports so that, after login,
users land on the home screen with the sidebar closed by default, while
keeping the existing behavior (open by default) on larger screens.

INJIWEB-1640.mp4

Summary by CodeRabbit

• New Features
  • The sidebar now automatically collapses when viewing the app on mobile devices, adapting to screen size on page load.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The Sidebar component now intelligently initializes its collapsed state based on viewport width. A mobile breakpoint constant (640px) and initialization function were added, with SSR-safe fallback handling to determine the initial sidebar state during page load.

Changes

Cohort / File(s)	Change Summary
Responsive Sidebar Initialization inji-web/src/components/User/Sidebar.tsx	Added MOBILE_BREAKPOINT_PX constant (640px) and getInitialSidebarCollapsed() function to dynamically set sidebar's initial collapsed state based on viewport width. Function includes SSR-safe window checking to gracefully handle server-side rendering contexts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A sidebar so clever, it shrinks with the screen,
On mobile devices, it knows just what's seen,
With a hop and a bound at 640 wide,
It collapses on load, fit snug by your side! 🎯

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing the mobile sidebar to default to a closed state after login, which aligns with the PR's objective of initializing the sidebar as collapsed on mobile viewports.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Rudhhi-Shah-14]

Also let's add the unit tests for the same please

[Rudhhi-Shah-14]

as this is purely responsive behaviour, we could avoid the JS breakpoint check and handle the initial collapsed or expanded state using Tailwind’s sm: classes.
I would suggest giving that approach a try please

[Rudhhi-Shah-14]

Do add the unit tests for the changes