Feature/collapsed UI menu

[RismanRJ]

Closes #1197

Description

• Implemented a collapsible SideMenu with collapsed state using useState.
• Replaced the mobile-only hamburger menu with a universal collapse/expand toggle using
  ChevronLeftIcon and ChevronRightIcon from @mui/icons-material.
• When collapsed:
  • Only icons are shown in the menu.
  • Tooltips appear on hover for accessibility.
  • Compact logo (responsiveLogo) is displayed.
• When expanded:
  • Both icons and labels are visible.
  • Full-size logo (logo) is shown.
• Menu layout is responsive using useMediaQuery.

Purpose

Enhances the UX by allowing users to collapse the sidebar for more content space. Makes the layout responsive and consistent across screen sizes.

Solution

• Introduced collapsed state in SideMenu.tsx.
• Added a toggle button using:
  • <ChevronLeftIcon /> when expanded
  • <ChevronRightIcon /> when collapsed
• Conditionally rendered logo, text, and tooltips based on collapsed and isMobile.
• Updated makeStyles to adapt styles dynamically.
• Ensured that only icons show on collapse with proper spacing and alignment.

Checklist

• Code tested and functions as intended
• Collapse/expand toggle works with Chevron icons
• Tooltip shows in collapsed mode
• Logo swaps correctly based on state
• Responsive behavior verified
• Follows code style and best practices
• No merge conflicts
• Reviewed by another team member

Related Issues

• Fixes [UI] Collapsed menu and mobile friendly #1197

[alexanmtz]

Hey @RismanRJ, thanks for the PR.

It's getting good, but what I can see here:

Is the topbar not expanding when it collapses, and the collapse icon should maybe be smaller and aligned?

I tried to make these adjustments but it's still not working as expected, here the branch:
https://github.com/worknenjoy/gitpay/tree/feat/collapsible-sidebar

I tried to change the grid space when it's collapsed but there's remaining space

So there's still some issues to address to make this work. Do you want to continue to try? Feel free to apply my changes and go from there if you have a solution.

[RismanRJ]

@alexanmtz Hey thanks for the reply and I will look through the issue and try to close the PR ASAP

thank you

[alexanmtz]

@RismanRJ we did changes recently to support mobile menu navigation on profile, so you need to sync with master before continue and resolve the conflicts

[RismanRJ]

@alexanmtz Okay sure 👍

[RismanRJ]

@alexanmtz Resolved the conflicts.
You can close this PR and merge it.

[alexanmtz]

@RismanRJ , thank you for the updates. Could you let me know if you resolved the issues with the alignment and the top bar not accommodating? Can you take a screenshot of your results so we can verify if everything is in order? Thank you 🙏

[RismanRJ]

@alexanmtz Can you just explain the issue more in detail?
Will try to fix it ASAP.

[alexanmtz]

Hey @RismanRJ , I can't see your change with a working solution. Have you checked your PR?