Optimize the differents navigation bars and menus

[Dehelssey]

The left sidebar menu is pretty filled with options, maybe we can optimize its organization, reorder the elements or remove some ?

like it's been said by @Cl0v1s in #93 this menu needs to remain simple / clear, especially on mobile

[gerwitz]

I would love configurability. If I got to design my own nav it would still be 6 but quite different than what's possible now.

Just to provoke, it would be:

• Home
• Direct link to one list
• Bubble
• Notifications
• Direct link to messages with one contact
• More…

[Cl0v1s]

In order to propose that customization we need to:

• Build a unique component capable of building a customized menu (no mockup needed)
• Create a whole new screen to allow user to customize their interface (mockup needed)

I remove the milestone since we cant work on that for now without a mockup

[Dehelssey]

Just to be clear, the mockup needed here is for a new screen where we can customize the navbar (either left on desktop or bottom on mobile) ?

btw, those items would be the same on both desktop and mobile views, so i'm not sure we can go up to 6 like you'd like @gerwitz cause it would be pretty cluttered on smaller devices...

the original purpose of this issue was to reorganize all the links that are shown in both left and right sidebars on desktop (and in the side menu on mobile), but we can keep both topics in the same issue, i think.

therefore i need to provide another mockup for desktop organization of links and menu entries (left and right menus) (which will end up one on top of the other in the mobile side menu)

[Cl0v1s]

When you look at the desktop UI, there is 5 elements (and the "plus" button)

I was thinking that we could let the user choose those 5 elements for both desktop and mobile UIs with a customization interface, and think about a way to organise the others non-selected options

[Dehelssey]

Yup we're on the same page. But @gerwitz was talking about 6 items in the menu and i just wanted to be sure it was 6 counting the "plus" one (so only 5 on mobile)

[muppeth]

This sounds like a good idea. User could decide which options from all possible ones, to put in the top 5. The rest would be present under the "More" button.

Mockup from #93 about bubble timeline is IMO great. However I do understand some people would pefer not to see federated timeline. So unless user checks such option in settings ("replace fediverse with bubble timeline"), within the Fediverse window, there would be option to check bubble and entire fedi as proposed in the mockup.

[Cl0v1s]

Do you have an idea of when you would be able to take time to think about his @Dehelssey ?

If it's too complicated for you, I can start to think about something if you want !

[Dehelssey]

I was planning on doing that tomorrow since i'm on strike^^

[muppeth]

Perhaps good to have a peak at elk. I like their side bar solution. It's very similar to mangane/soapbox.

[Dehelssey]

@muppeth haha i'm stalking them for a week or two yes !

[Dehelssey]

let's use more of the vertical space we have. i've organized different actions in 3 categories : primary navigation, instance related items and secondary settings (see figjam file)

therefore i used right sidebar for main actions (with a focus on the 5 firsts, which will be chosen par the user, and reflected in the mobile navbar)

the left sidebar is for instance-related stuff

the other actions go back to the settings menus

i added the pinned instances in the right sidebar both because i had more space left there and because i feel like those are secondary actions...

[Dehelssey]

as you can see i removed the kinda useless topbar, so i gain even more useful vertical space for menus.

In my mind, if screen weren't tall enough, overflowing menu items would be displayed in a "more" submenu similar to the existing one since I'm not a fan of scrollable menu (but maybe you can convince me otherwise)

I also added a "write post" expandable field on top of the feed but also kept the button in the sidebar.

Check the somewhat interactive mockup

[Dehelssey]

i realize i forgot to reproduce the chat boxes 🤦

Well chats are gone so nevermind 😅

[Dehelssey]

@Cl0v1s would you like me to rework those a bit ?

[Cl0v1s]

Done in latest release