Rethink Learn section of Navbar

[minimalsm]

Is your feature request related to a problem? Please describe.

The number of links in the 'Learn' section of the main navigation is outgrowing the initial design.

This looks fine for now but very soon we'll be adding 3-4 new pages. Aesthetically this doesn't look great but also runs into Hick's Law problems - reducing the likelihood users will find the information they are looking for and reducing the user experience.

Describe the solution you'd like

Open to suggestions. Just wanted to highlight this issue.

Want to contribute?

We love contributions from the Ethereum community! Please comment on an issue if you're interested in helping out with a PR.

[MrBrain295]

Maybe a more button that could show the rest?

[vj-codes]

@minimalsm hey can this be a hacktoberfest issue?

[CjFlypuffin369]

hello

[Vishnurr2k01]

adding a scroll ?

[minimalsm]

Hey everyone. This issue requires design before being worked on (i.e. if you have a proposal feel free to comment here). Some sort of re-organization of the navbars is probably required for this.

[nikkhielseath]

@minimalsm

I shall like to propose a design inspired by this Nav from Revolut.

Especially, those curved borders.

[samajammin]

Marking this as blocked - I think we should re-think this as part of an overhaul of the learn page more broadly:
https://ethereum.org/en/learn/

My gut take as of now is we can build out a landing page for the Learn section of the site that acts as a hub & provides a hierarchy of topics & subpages, similar to how we have the "Developers' Home" within the "Developers" dropdown menu.

[samajammin]

Noting this is also a bug on smaller screens/browsers - the dropdown nav is cut off with no ability to scroll:

Screen.Recording.2021-11-16.at.06.23.08.AM.mp4

@minimalsm perhaps a short term fix would be to remove some of these pages from the dropdown? e.g. I think at least these could be removed - they're less important pages & are linked to from the footer & elsewhere:

• Ethereum Glossary
• Community guides and resources
• Ethereum Improvement Proposals

[aguscruiz]

I have a proposal for the design. Here are my thoughts:

• The dropdown could be divided into sections, I divided here in the mock but I may not be correct on the division criteria (that's open to discussion obviously).
• We could only list the "most useful" learn articles at the dropdown, and have a "browse all topics" at the bottom to link to a Learn landing page with every article listed.
• I added a bit more whitespace to the dropdown items, specially with regards to the dropdown border, it felt too cramped.
• Also added a subtle drop shadow to elevate the dropdown a bit.

Learn section

Another nav dropdown

[aguscruiz]

@minimalsm thoughts?

[samajammin]

Thanks for the suggestion @aguscruiz! I like your proposal 😄

[github-actions]

This issue is stale because it has been open 45 days with no activity.

[samajammin]

Multiple folks have also reported this in Discord:

• https://discord.com/channels/714888181740339261/727898649006309377/949382094029717524
• https://discord.com/channels/714888181740339261/727898649006309377/949698900384677898

[maxgeor]

Basic/Advanced

Quick win would be properly grouping and nesting different ideas. Since this tab is about learning, it makes sense to group ideas into Basic and Advanced (people shouldn't read "Blockchain Bridges" before "What's ETH?"). Here's one grouping:

Learn

• Basics
  • What’s Ethereum?
    • Ether (ETH)
    • Smart contracts
    • History of Ethereum
    • Ethereum upgrades
    • Ethereum Whitepaper
  • DeFI (Decentralized finance)
  • NFTs (Non-fungible tokens)
  • DAOs (Decentralized autonomous organisations)
  • Web3

• Advanced
  • Ethereum governance
  • Blockchain bridges
  • Ethereum energy consumption
  • Ethereum Improvement Proposals

  • Ethereum security and scam prevention
• More (this one doesn't need a label)
  • Ethereum glossary
  • Community guides and resources

Then you can lay out the nav horizontally, which each section next to eachother to save on vertical space:

Learn
Basics Advanced More

You can add flex-wrap: wrap to the container so it won't get smushed.

Mobile

The site has a pretty hefty nav overall. For mobile, it makes sense to ditch the typical pop-out list and for a full width/height, global nav modal. It would have 2 columns to save vertical space.

Scrolling Bug

Slapping a min-height using vh units with overflow-scroll should solve the no-scroll issue.

[samajammin]

Assigning to @konopkja 😄

[github-actions]

This issue is stale because it has been open 45 days with no activity.

[corwintines]

@minimalsm @konopkja I imagine this can be closed now.

[samajammin]

Solved in #6778 - thanks @konopkja & @pettinarip!