[website] [UX IMPROVEMENT] Make the header and Left navigation sticky

[nloureiro]

To improve the navigation experience on the different pages, the header and left navigation should be sticky to the browser window.

This is a design good practice that is used in almost all Devdocs websites.

Header: Add background color and make it fixed on desktop and mobile

Left Navigation: Add background color, make it fixed on desktop and mobile, and add overflow to scroll when the content doesn't fit the screen vertically.

Use-case example, using devtools in the browser to produce these screencasts

https://user-images.githubusercontent.com/1120748/208143113-5398b77d-0c09-442d-9db7-32b23f19f84a.mov

https://user-images.githubusercontent.com/1120748/208143251-f1f8f4c9-bd12-4b7c-b28c-e598918ce0b9.mov

cautions to the top border on the left navigation

The content going under the header is on purpose.

[samajammin]

The content going under the header is on purpose.

This looks a bit awkward to me. Should we consider making the color above the site nav solid (so the content doesn't show through ABOVE the site nav)?

[corwintines]

Agree, should just make the background there the background color so it looks less awkrward

[nloureiro]

The content going under the header is on purpose.

This looks a bit awkward to me. Should we consider making the color above the site nav solid (so the content doesn't show through ABOVE the site nav)?

actually, I like it. I would add that a very subtle transparency would make it even better.

Did a small screencast to illustrate it.

https://user-images.githubusercontent.com/1120748/208393648-1594294f-4992-4743-9693-e38ce2c64076.mov

[nhsz]

having text content between the header and navigation menu feels odd

having the content of the right menu below the header doesn't look good to me

I agree we should have a solid/blur background there.

[nloureiro]

having text content between the header and navigation menu feels odd

having the content of the right menu below the header doesn't look good to me

I agree we should have a solid/blur background there.

That screenshot looks odd, yes.

But with fullscreen mobile and with the user intention to scroll, I like it. and if we add the 5% transparency, it's even better

check this Figma prototype https://www.figma.com/proto/ekzIgwyeVKLtFSAcnA0Q0D/geth-website?page-id=2848%3A21050&node-id=2857%3A21520&viewport=1157%2C757%2C1&scaling=min-zoom

https://user-images.githubusercontent.com/1120748/208510389-99871b95-1055-439d-9ec6-0266cd43a61a.mov

[wackerow]

Could add a filter: blur(x); on the background so the text blurs as it rolls underneath

[nloureiro]

Could add a filter: blur(x); on the background so the text blurs as it rolls underneath

Yes, let's go for: backgournd transparency of 0.9 background blur of 10px

desktop > https://www.figma.com/file/ekzIgwyeVKLtFSAcnA0Q0D/geth-website?node-id=3112%3A22484&t=CAOVt8xbTCnKymwI-1 mobile version > https://www.figma.com/file/ekzIgwyeVKLtFSAcnA0Q0D/geth-website?node-id=2857%3A21520&t=CAOVt8xbTCnKymwI-1

[nhsz]

We've decided to abandon this feature for now as it needs further discussion/planning (both design & implementation) on how to deal with the layout refactor needed to implement this properly. Could be considered in future plannings for Geth site v2 iteration.

[Dawidowak]

I use phone all i have here ... I now is hard work with me bad language sory i AM welder pc for me magic any repozytories.. i now for 99 % is easy I work with difrent specializarion please tray undorstand me

pon., 17 kwi 2023, 16:40 użytkownik Nicolás Quiroz @.***> napisał:

Closed #26424 https://github.com/ethereum/go-ethereum/issues/26424 as completed.

— Reply to this email directly, view it on GitHub https://github.com/ethereum/go-ethereum/issues/26424#event-9026215935, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2BANDN63LSPTNVGER6T7E3XBVQAPANCNFSM6AAAAAATRAEZKA . You are receiving this because you are subscribed to this thread.Message ID: @.***>