Make the sidenav responsive on height

[edimitchel]

According to Discord thread

I have a concern about the sidenav layout and the consequence on wide (or not tall enough) screens.
See the attached image of the side nav: the account part is cropped (the viewport size is 1536x731 on my desktop)

It should never get scroll bar for UX purpose!

For making sure scroll never comes, we should add a responsiveness mechanism to hide items using usability order.
Great principales written by @patak-dev :

• Explore, local, Bookmarks, favourites could be removed
• We need an order of what is more important and remove the rest if the screen is not tall enough
• The account should always be visible

My opinion is agreeing previous point but I would like to extends (it's my own):

• Removing Home icon in favor of the Elk icon as home icon
• Put Parameters closer to account (remove padding)
• Put Compose icon button at the same place to the back icon (or aside to)

[edimitchel]

Doing an experiment to start improvement (not adaptiveness yet, only reorganization)

https://github.com/elk-zone/elk/tree/experiment/side-nav-prototyping

[ZMYaro]

I think we should avoid removing items from the side nav. Having to open a submenu is at least as cumbersome as having to scroll, if not more so. Rather than remove items entirely, I think it would make sense to relocate them when the screen is wide enough, move items that are not navigation (e.g., the account switcher, search box, or possibly the Elk logo) to the right side).

I think the account switcher could also be made the same height as other sidebar items, with the user's handle in a smaller font size, which would have the added benefit of cutting off less of the user's server.

[patak-dev]

We should try first to avoid removing items (reducing space and making some less tall), but there are some that are not used that much like favourites, so it does makes sense to push to the three dots to avoid the scrollbar. About moving things to the other side, I think we should wait until we see what other things end up there. It is empty only temporarly.

[ZMYaro]

@patak-dev I assumed there might be plans for that space. Is that roadmap documented somewhere? IIRC, there was a previous iteration of Elk that had the search box on the right side when space was available.

[michelc]

In my case I created a userContent.css file to adapt the content of the side menu because I had a scroll bar on my laptop screen.

• The "Home" menu has been removed as the "Elk" icon at the top left has the same effect
• The "Back" icon (to the right of the "Elk" icon) has been enlarged
• The label of "Appréciés" menu has been changed to "Favoris" (as it was before :)
• I've removed (for now?) the "Conversations" and "Bookmarks" menus that I don't use
• The look of the "Compose" menu has been changed to look like a button (and maybe change its name to "Publish"?)

And in the content of the posts, the vertical margins of the paragraphs have been increased to make the empty lines stand out better.

https://pouet.chapril.org/@ms_michel/109676043078053700

[edimitchel]

That makes think we could override in CSS inside the account settings to get this without extension!
@patak-dev ?

[edimitchel]

About Appréciés button name, we could revert it but we need to harmonize with other translations

[michelc]

On Mastodon, it's "Favoris" (translation of "Favorites" in French) but on the other hand, it's "J'aime" on Twitter...

Also, I just saw that there is "@ Direct Messages" on Mastodon which must match "@ Conversations" so I shouldn't have deleted it :)