Improve the navigation (table of contents)

[jeromecambon]

Our table of content (left side) is quite poor and would deserve enhancements. It would help navigation and also provide a more "modern" look. For instance:

1. Better highlight of the current selected component (may impact also the header)

2. Better identification of a main section with icons (see MuleSoft)

3. Better highlight of the current selected page (see Spring, RedHat Vale)

4. Better highlight on "mouse over" (see MuleSoft, Spring)

https://user-images.githubusercontent.com/17833345/212296396-622d4814-0d7b-4d56-aaba-ef23acdb0f3c.mov

https://user-images.githubusercontent.com/17833345/212296680-6f8bf388-38ad-4685-928b-ddb3ae2c05ed.mov

5. Separation between main sections (see Hazelcast, Rudder)

https://user-images.githubusercontent.com/17833345/212297361-d2716f5b-3306-4a18-85ea-011250320156.mov

https://user-images.githubusercontent.com/17833345/212297700-67830975-95cb-4fd4-9a80-6f6e32b1277c.mov

[tbouffard]

Can you please add video/screenshot close to the links to illustrate what you have in mind? Screenshots/videos make generally things clearer and explicit. This will help for discussions and also help for future archeology when viewing this issue later (and the external sites may have changed).

I am OK with the general proposal. This will improve the readability a lot 👍🏿. I am not sure we can implement the improvements all together. Let's talk about it and do some visual poc.

[jeromecambon]

• [x] Better highlight of the current selected component
• [ ] Better identification of a main section with icons (not for now, but could be later)
• [x] Better highlight of the current selected page
• [x] Better highlight on "mouse over"

[jeromecambon]

Before:

https://user-images.githubusercontent.com/17833345/213741777-c8ceb871-9fac-421d-a199-3c12f373dc5d.mov

After:

https://user-images.githubusercontent.com/17833345/213741857-4e69f0aa-2410-4c0a-9f48-0347bc74b89d.mov