plebbit / plebchan

A GUI for plebbit similar to 4chan
https://plebchan.eth.limo
GNU General Public License v2.0
21 stars 8 forks source link

add: persistent drop-down navigation bar #508

Open plebeius-eth opened 2 months ago

plebeius-eth commented 2 months ago

Having some kind of sticky navigation tool is important, especially in our case since we use infinite scroll instead of pagination. Without it, it's hard to navigate across boards while scrolling down a feed, because the navigation bar is located at the top of the page. 4chan uses a sticky header on mobile, which we have already implemented, and on desktop, it uses the Frames tool, which I believe we should implement as well.

Image

estebanabaroa commented 2 months ago

how many people use this? I've never used it, I think left only sidebar is too unintuitive because it's too different from most popular sites. most sites have either sidebars on both sides, with content in the middle, or sidebar only on the right, with content on the left. I dont know any popular sites with only sidebar on the left.

imo it would be better UX to have the sticky header on desktop as well somehow (not sure how to make it merge smoothly with the desktop header when it reaches the top)

also imo it's low priority at the moment since 90% of users are on mobile

estebanabaroa commented 2 months ago

I guess one idea could be to sticky the [Home] menu and the [Return] menu, and make them separately merge back to their original position when the user scrolls up, it would look something like this as the user is scrolling up

image

but complicated to implement and low priority at the moment imo, since most people are only mobile, and people on desktop can figure out how to scroll back all the way up if they need

plebeius-eth commented 1 month ago

4chan actually has a sticky header setting, under "Navigation". It only appears on desktop, it's not available on mobile since they force the sticky header. It's called "persistent drop-down navigation bar", I think we should do the same:

Image