Improve Ui for mobile size devices

[nikita-9112]

Summary

Improved the UI for mobile and tablet screen size devices.

Closed #1152

---

on mobile size screen

on tablet size screen

on desktop size screen

Let me know if any changes are requied.

[vercel]

@nikita-9112 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[Priyanshu-byte-coder]

The changes look good overall, but wrapping the entire right section (notification bell, theme toggle, sign-out button) in !isMobile hides critical UI actions on mobile. Users on phones would have no way to sign out or access notifications. Please keep those visible on mobile — just rearrange the layout instead. Rebase on main and revise the approach.

[nikita-9112]

hi @Priyanshu-byte-coder , now I rearrange the code and make the signout and notification icon visible on mobile size without toggling. Please review it and tell me if any changes or improvement is required.

[Priyanshu-byte-coder]

Thank you for the contribution! However, hiding the right action bar (Settings, Notifications, Theme Toggle, Sign Out) on mobile with !isMobile creates a serious UX issue — mobile users won't be able to access these controls.

The right approach for mobile is to make these controls accessible in a different way (e.g., in the mobile nav drawer, a hamburger menu, or by making the toolbar scrollable/collapsible) — not to hide them entirely.

Please revise the approach to ensure all controls remain accessible on mobile.

[nikita-9112]

Hey, @Priyanshu-byte-coder , As you mentioned, I have made signout and notification buttons visible on mobile screen without the need of clicking the hamberger menu icon. When user clicks that hamberger menu icon the theme, username and shortcut button will be visible. Means the toggling functionality is only applicable for username, theme, and shortcut button , not for signout and notification icon. So please explain me the functionality of hamberger menu you want.