[BUG]: Dashboard Sidebar Inaccessible on Mobile - No Responsive Behavior

[imSubhro]

Description

🐛 Bug Description

The Dashboard Sidebar is completely inaccessible on mobile devices. It has no responsive behavior, meaning on smaller screens the sidebar either overflows out of the viewport, overlaps the main content, or disappears entirely. Users on mobile cannot navigate between sections of the dashboard at all, which makes the entire app non-functional on phones and tablets.

Steps To Reproduce

🔁 Steps to Reproduce

1. Open the OPSCORD app on a mobile device or resize your browser to a mobile width (below 768px).
2. Navigate to the Dashboard.
3. Observe the sidebar — it either overflows, overlaps the content, or is completely hidden with no way to access it.
4. There is no hamburger menu or drawer to open the sidebar on mobile.

💡 Proposed Fix

• Hide the sidebar by default on screens below 768px using CSS media queries.
• Add a hamburger menu icon to the top navbar that toggles the sidebar visibility.
• The sidebar should slide in as a fixed overlay on mobile with a semi-transparent backdrop.
• Tapping the backdrop or a close button should dismiss the sidebar.
• On desktop the sidebar should remain unchanged and always visible.

Expected Behavior

✅ Expected Behavior

On mobile devices the sidebar should collapse into a hidden drawer by default. A hamburger menu icon should be visible in the top navbar that toggles the sidebar open and closed. The sidebar should slide in smoothly as an overlay without pushing or breaking the main content layout. Tapping outside the sidebar should close it.

❌ Actual Behavior

The sidebar has no responsive behavior at all. On screens below 768px it breaks the layout completely and there is no hamburger menu or any other way for mobile users to access navigation.

Environment Matrix

🖥️ Environment Matrix

Environment	Details
Browser	Chrome Mobile, Safari iOS, Firefox Android
OS	iOS 17, Android 14
Device	iPhone 14, Samsung Galaxy S23, iPad
Screen Width	Below 768px
Reproducible	100% — affects all mobile users

Would you like to work on this issue?

• Yes, I would like to submit a PR for this issue.
• No, I am just reporting it.

[imSubhro]

Hi @probably-ABHINAV 👋

I'd love to fix this under GSSoC! 🚀

I tested the app on mobile and the sidebar is completely broken on smaller screens — there's no hamburger menu, no drawer, no way to navigate at all. For any user on a phone the dashboard is essentially unusable right now, which is a pretty critical gap considering how much web traffic comes from mobile devices these days.

My plan is to hide the sidebar on screens below 768px and add a hamburger icon to the navbar that toggles it open as a smooth slide-in overlay. I'll add a semi-transparent backdrop behind it so users can tap outside to close it, which is the standard mobile navigation pattern users already expect. The desktop layout won't be touched at all — it stays exactly as it is.

This is a pure CSS and JavaScript fix with no backend involvement. It's one of those bugs that looks small in the code but makes a massive difference to real users. Could you please assign this to me? I'll submit a clean PR quickly! 😊

[probably-ABHINAV]

Assigned to @imSubhro
Note: While submitting the pr provide a ss for the update,

[github-actions]

👋 This issue has been automatically marked as stale because it has had no activity for 7 days. It will be closed in 3 days if no further activity occurs.
If you're still working on this, please comment to keep it open.

[imSubhro]

keep it open