HexDocs sidebar - expanding and auto-opening/closing

[folospior]

The current Gleam HexDocs sidebar is fine-ish, but we can definitely improve it.

Please note I am not a UI/UX Designer, in fact I believe that's one of my weakest links. I apologize for any incorrect terminology. If you have any experience with UI/UX, or would just like to chime in, I ask you to please place a comment.

Current state

Right now, the sidebar has a fixed width, which may look quite ugly for long definitions.

Example picture - long type/function definitions

Taken from https://hexdocs.pm/grom/grom/interaction.html

The words can be split in the middle, and that makes longer functions a bit harder to read.

Hamburger menu - we're already using it!

I think we can fix this by making the sidebar a horizontally-expanding hamburger menu.

The sidebar already collapses into a hamburger menu on higher scale displays:

Example picture - 200% scale (1080p)

On narrower displays, such as phones, this is also the case:

Example picture - phone viewport (100% scale, iPhone 14 Pro Max through Chromium dev tools)

Sidebar closed	Sidebar open

As you can see, the phone sidebar has the same problem of cutting words in half!

Expanding

Alright, we can open and close the hamburger menu, but that doesn't solve our problem.

However, if we automatically expand the menu up to the width of the longest definition, then all definitions will fit on one line and be a lot more readable.

Example picture - docs.rs

While docs.rs' sidebar does not automatically expand to the longest definition, it is manually expandable.

We can still keep the manual resizing property to accommodate those who prefer narrower sidebars.

Hamburger menus are annoying (for some), though

On a computer, a person has to move their cursor to the top left corner of their browser, click on the icon, find the definition, then preferably close the sidebar. That's quite a lot of movement.

We can help with this problem by having the menu automatically open when a person moves their cursor to the left edge of the browser window.

Some people would prefer their navbar pinned and not having to deal with opening and closing it. For that, I suggest we still keep our hamburger menu icon, which would allow users to toggle between open and closed states.

This behavior is similar to that of full-screen browsers - when the user moves their cursor to the edge of the screen, their tabs show up!

Phones might still be too narrow

In case a phone (or any narrow view) still can't fit a function definition, we should strip the part that can't fit and replace it with ....

This helps keep every link the same width, potentially making them a bit more readable.

Proof of Concept

I AI-generated this simple proof of concept: https://folospior.github.io/hexdocs-poc/
It's not really great, but it works for what I'm trying to show (resizing is wonky, go very slow)

Check it out, and once again, please let me know what you think, especially if you're a UI/UX designer.

[lpil]

One proposal per discussion please!

You've not stated what the current problems are, could you detail those please 🙏

Do you have examples of other sites that do this better in your eyes?

What's the reason for wanting the width to be different in each package? Would it being wider be better?

Is there a way to improve it on narrower viewports too?

[folospior]

I elaborated on what I meant for the expanding bit, also added some things after I thought about it for a while.

I moved the categories proposal to #5457