[UI] Collapsed menu and mobile friendly

[alexanmtz]

✏️ Summary

Make a collapse version of our main side menu and support for mobile

📋 Description

We have two important FE improvements in our main side menu for logged users.

We should have a collapsed version to improve usability and space for the user navigate through the platform.

This menu needs to adapt on mobile views for better navigation on Mobile.

For our user menu on the home page, we already have a mobile version implemented here:
https://github.com/worknenjoy/gitpay/blob/master/frontend/src/components/design-library/organisms/layouts/topbar/topbar.tsx

🔍 Steps to Reproduce

1. Follow the steps to run the project locally on README: https://github.com/worknenjoy/gitpay?tab=readme-ov-file#readme
2. Create a user
3. Got to the dashboard and see the menu

You can see the menu on Story Book: http://localhost:6006/?path=/story/design-library-molecules-menus-sidemenu--default

To run Storybook, run npm run storybook in our frontend folder

✅ Expected Result

• The side menu should be collapsible. Please take a look at the mockup.
• The mobile menu should be as in the mockup.

🖼️ Screenshot / Mockup

Menu Mobile

Use the same collapse trigger (arrow button) as here

And here's the mockup of how the collapsed version will look like:

This is only the mockup, the icons should follow the same one we have today, and you need just to collapse and remove the text on collapsed version

Except the logo on the top, which on collapse it will collapse for a reduced version of the logo, to this one here:

This logo was extracted from our documentation: https://docs.gitpay.me/en/

🧰 UI Stack Used

React, Material-UI, Storybook

💰 Is there a bounty for this issue?

No

💵 Bounty Amount (if any)

No response

📜 Bounty Details (if applicable)

There's no Bounty for this issue.

This issue is part of the Only Dust Hackathon: https://onlydust.notion.site/May-28th-Open-Source-Hackathon-1f244b682a80801890e5fda15b779746

[dosubot]

Here’s a summary of what’s currently implemented and guidance for making the main side menu collapsible and mobile-friendly, as requested:

Current Implementation

• The main side menu is implemented in frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx. It uses React and Material-UI, displaying menu items with icons and labels, and manages the selected item with local state. Styling is handled via Material-UI’s makeStyles hook, with classes for menu items, icons, and profile details.
  See code reference

• The mobile version of the user menu is already implemented in frontend/src/components/design-library/organisms/layouts/topbar/topbar.tsx. This uses a hamburger icon (IconHamburger) and toggles the mobile menu with local state. The menu is conditionally rendered for desktop and mobile using OnlyDesktop and OnlyMobile wrappers.
  See code reference

Guidance for Implementation

1. Collapsible Side Menu

• State Management:
  Add a state variable (e.g., collapsed) to the SideMenu component to track whether the menu is expanded or collapsed.

• Collapse Trigger:
  Add a button (e.g., an arrow icon as shown in your mockup) that toggles the collapsed state.

• Menu Item Rendering:
  When collapsed is true, render only the icons (hide the text labels). When collapsed is false, show both icons and text.
  You can use conditional rendering for the ListItemText component.

• Logo:
  Swap the logo at the top for a reduced version when collapsed, as per your mockup.

2. Mobile Responsiveness

• Responsive Styles:
  Use Material-UI’s useMediaQuery or CSS media queries to adjust the menu layout for mobile screens.

• Mobile Menu:
  On mobile, consider rendering the side menu as a drawer or overlay, similar to how the topbar menu is handled with MenuMobile and IconHamburger.

• Consistency:
  Use the same icons as the current implementation. Only the logo changes when collapsed.

3. Reference for Menu Items

• The menu items and their structure can be referenced from the existing SideMenu and TopbarMenu components.
  TopbarMenu code reference

4. No Existing Issues/Discussions

• There are no previous issues or discussions in the repository related to collapsible or mobile-friendly menus.

---

If you need specific code snippets or further guidance on implementing the state logic or responsive styles, let me know!

To continue talking to Dosu, mention @dosu-bot.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[vijay2904]

Hi @alexanmtz, I would like to work on this issue, if it's still available. Let me know if there's anything specific I should keep in mind before getting started. Thanks!

[HyzeahAchungha]

I will love to work on this issue my EAT is 24hrs

[Ekene001]

Hi! I'd love to handle this task. I'm Ekene, a full-stack blockchain developer with over three years of experience in React, Next.js, TypeScript, and smart contract development (Solidity/Rust).

Here's how I'll tackle this task:

I'll add a toggle button to collapse/expand the main menu.

I'll preserve the collapsed state in localStorage.

I'll ensure all menu items remain accessible in both states then, I'll implement a mobile-friendly version based on our existing topbar pattern.

I'll add smooth transitions between desktop and mobile views.

I'll maintain consistent behavior with our current mobile menu.

Finally, I'll ensure proper theming (light/dark mode support) and I'll add comprehensive tests for all states.

Looking forward to contributing

[perpetual-cosmos]

I'd love to take on this task of improving the side menu! I can work on making it collapsible to help with space and usability, and also add support for mobile views as shown in the mockups.

I've already checked out how the topbar mobile menu is done, and I’ll follow a similar pattern to keep things consistent. I’ll make sure the side menu looks clean when collapsed, keeps the icons, and switches the logo to the smaller version as expected.

Excited to explore this – let me know if I can pick it up!