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:

https://user-images.githubusercontent.com/8097623/141985359-f73ebbc0-7a9f-4711-b519-407e7d965eeb.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[bot]]

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 😄

[DaveyD233]

The problem is NOT the Hysterium of ETHERIUM being #blocked, more than the #number#s of "POSSIBLE Ethereum 1&2.0 tokens", according to CoinBase, RISING 100k (IN BOTH ETH1&2.0) tokens since the BEGINNING of this year(ie. 120million ETH 1&2.0 tokens available, ON January 2022, to 120.1 ETH1&2.0 tokens IN February 2022, to NOW; Where CoinBase is showing there ARE 120.8Million ETH1&2.0 tokens PRESENTLY, May 2022, EQUALLING "121.6 TOTAL ETH1&2.0 tokens" Today, Though Eth 2.0 is STILL Not even available to use!? Appearing as if ETHERIUM 2.0 is EQUALLY being "staked" is a Major Mining&Proof-Of-Stake RIP-OFF! Not only that, the increase of NOW 1.8MILLION MORE of Both ETHERIUMS 1&2.0, is MAKING MY Current ETHERIUM 1 tokens DEPRECIATE in value ALSO!! ADDING TWICE AS MANY tokens to "Balance out"_"APPEAR" as if ETH1&2.0 ARE Equal, while the "staked" ETH2.0 CAN'T Even be Touched, is the BIGGEST RIP OFF I HAVE EVER SEEN IN MY ENTIRE LIFE(lol next to Blu-ray, merely ENHANCING the Color MORE, to "appear" better than HD 🙂)! WHO KEEPS ADDING THESE "NEW TOKENS" that @CoinBase is reporting, FOR BOTH ETHERIUM 1&2.0?! Because whomever is the "Extra Tokens Adder," is Not Only DEPRECIATING the VALUE of BOTH ETHERIUMS 1&2.0, but putting these "Mysteriously Added $1.6MILLION New Eth 1&2.0 tokens" in their OWN pockets(ie. Vitalik Buterin's "Custom Oil Painting" of Himself, for his Twitter Photo), while the REST OF US Have to just WATCH, as the #Number#s of ETHERIUMS 1&2.0 tokens KEEP going UP(while also watching the prices keep going DOWN) in the process! Dehumanizing others because of COLA(Cost Of Living Adjustment) going UP 5.9%(the Highest since 1981, when the World Wide Web came out), just to Maintain their Rich Living Lifestyle (#Greedily) was NOT what Ethereum was Originally invented For, nor originally "All About"! It's a Community Currency, which iss now seeming to become the greedy bank-like/centralized architecture the Whole Idea of Ethereum was AGAINST to start with! Ethereum Cant survive without BitCoin, and Vise Versa too! Let's ALSO please Keep in mind that Public Service Providers, HERE IN the USA(&Other countries), HAVE been starting 2B Paid for by BitCoin &transfered through ETHERIUM, to $$$$! iSalute Ethereum for the Main Mission Statement's ideal of "promoting the general welfare,to ENSURE Domestic Tranquility"!,but ADDING MORE TOKENS to Both ETHERIUMS 1&2.0 Diviates THAT ENTIRE MO(Modus Operandi) of said "Mission Statement" while Also doing the SAME "for" the Communities, that CryptoCurrency was designed for to begin with!

Thank you for your time, CAPT David Simonton-Valento, O-3_USAF, AAS, BT-BAS, Sap-Certification

[github-actions[bot]]

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 https://github.com/ethereum/ethereum-org-website/pull/6778 - thanks @konopkja & @pettinarip!