Improve user experience on /articles

[Olaleye-Blessing]

Context

Currently, users have to scroll back up in order to select a topic or filter the article by newest | oldest | top. This will be annoying especially if they have loaded a good number of articles.

Expected Behavior

There should be an easy way to either select their topic of interest or filter the topics.

Screenshots

Current behavior

Expected behavior

Steps to reproduce

1. Go to the articles page
2. Scroll down to load more articles
3. Notice the filter dropdown and recommended topics disappeared

Additional info

I will like to work on it.

[github-actions[bot]]

Hello @Olaleye-Blessing, thanks for opening your first issue! your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.

[NiallJoeMaher]

Thanks for the input! 🦾 Do you have any examples of sites doing this so I can see what it might look like?

[Bitnagar]

@NiallJoeMaher I think what @Olaleye-Blessing is asking is something similar to firstissue.dev

[NiallJoeMaher]

@Bitnagar From a quick glance, it doesn't seem to work too well on my mobile and takes up a lot of space 🙈

[Olaleye-Blessing]

Not concrete examples but MDN has a sample; (View on PC) You could access any of the page content from the in this article section cause it sticks to the screen. You don't need to scroll back up to do this.

I made a video of what it will look like: https://streamable.com/zqow4j

[Olaleye-Blessing]

I added the mobile version here: https://streamable.com/bhcccm

[Olaleye-Blessing]

IMO, the mobile version shown here is not bad. Does it look like it takes up a lot of space? @NiallJoeMaher

[Olaleye-Blessing]

@NiallJoeMaher I think what @Olaleye-Blessing is asking is something similar to firstissue.dev

Yea, exactly. Thanks for the perfect example.

[Bitnagar]

@NiallJoeMaher my bad. I saw it on desktop. It was fine. Forget to check for mobile! 😅 Apologise.

[NiallJoeMaher]

@Bitnagar not a problem at all! Good idea, and we had another similar discussion recently. Just seeing what the most eloquent way of tackling something like this (by stealing from some other good designs) 🙈