Improve menu mobile display

[FelixMalfait]

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=43185-135140&node-type=frame&t=OOVK3xhrcy5zJPVL-11

Current behavior

Desired behavior

TODO :

• [ ] #8599
• [ ] Augment icon size
• [ ] Take the same as compact mode but in horizontal as much as possible
• [ ] On Figma the container around a folder is meaning that the folder is open, but other favorites and items are not in container like that
• [ ] For scrolling behavior : show everything and scroll all instead of by container like in desktop nav bar

[FelixMalfait]

/oss.gg 1200

[oss-gg[bot]]

Thanks for opening an issue! It's live on oss.gg!

[ketanMehtaa]

/assign

[oss-gg[bot]]

You already have an open issue assigned to you here. Once that's closed or unassigned, only then we recommend you to take up more.

[FelixMalfait]

@ketanMehtaa hey sorry we're not 100% sure we'll go with this design in the end. @Bonapara will confirm soon

[ketanMehtaa]

@FelixMalfait okay

[ketanMehtaa]

/assign

[oss-gg[bot]]

Assigned to @ketanMehtaa! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[pranavpurankar]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[Bonapara]

Hi @ketanMehtaa edited the desired behavior. We want to use the compact sidebar instead of displaying the menu in a side panel

[Bonapara]

The buttons should be 32x32 pixels to make them more easily clickable, as the height is currently only 28 pixels on desktop! (me might change them to 40x40 in the future)

[sanjay-gangwar4410]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[Khaan25]

@Bonapara, Is the bottom menu a slider? Like I've on my portfolio on small devices: https://v2-zzia.vercel.app/

[AndrewHamal]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[FelixMalfait]

Note: the compact sidebar already exists (click on the "minize" button on the top-right corner of the left navigation menu), we're not talking about recreating a sidebar from scratch but arranging it so that this vertical sidebar can be displayed horizontally and use as the new navigation bar in mobile mode

[AndrewHamal]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[AndrewHamal]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[AndrewHamal]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[AndrewHamal]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[Hitarthsheth07]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.

[FelixMalfait]

Thanks a lot @ketanMehtaa @Hitarthsheth07, still much work needed on both PR. We'll merge whichever is the best with 1200 points and award 500 points to the other. Feel free to work together if you want

@ketanMehtaa the good thing about your PR is that you tried to re-use existing code! But the visual outcome is still very far from what we want.

@Hitarthsheth07 you're closer to the outcome but you didn't re-use the compact sidebar as instructed :). The less code there is in your PR the better, avoid duplicating logic (ex: the items displayed in the menu should, come from a single source of truth, desktop or mobile). Feel free to ditch the existing MobileNavigationBar.tsx since we're changing our approach, it might not be useful anymore. Also use a linter. And make sure all elements are still accessible (search, settings)

[Khaan25]

@FelixMalfait, Should I also give it a try?

[FelixMalfait]

@Khaan25 Thanks! I think 2 is enough 😄

[Hitarthsheth07]

@FelixMalfait On it! Will be done by update the PR by tommorow

[FelixMalfait]

Great @Hitarthsheth07 thanks!

[Hitarthsheth07]

@FelixMalfait Heyy,

What should be done with the settings page? Should it be kept the same full screen as it is now?

[FelixMalfait]

@Hitarthsheth07 yes that'd be great. Mobile settings don't matter as much, we don't need something that feels native, we just want something that works and doesn't feel clunky :)

[Hitarthsheth07]

@FelixMalfait

I've sorted the navbar issue but cannot figure out a workaround for the settings page.

So, in the current version when the user clicks on settings page the navbar occupies full screen and the content changes. I tried implementing the same thing but it just doesn't work for some reason!

This is the onClick function I am passing to the settings button.

Full Horizontal Navbar

Would love to have suggestions/feedback on it!

Thanks

[Khaan25]

Pull the latest code, I with @charlesBochet improved the settings page navigation. I think that might help you out as well. Can't remember the issue number

[alanstan08]

Hey if the issue still persists I would love to give it a try

[lucasbordeau]

We need to refactor the navigation drawer zone before proceeding with this feature.

Also @Bonapara we should settle on an easy version of this horizontal nav bar, I'll write it down here.