Category Dropdown in Mobile View

I was wondering if it would be plausible (whether through CSS or a component) to have a dropdown in the mobile view that is similar to that in desktop - meaning showing categories as opposed to Latest, Top, etc.

categorydropdown

7 Likes

I’m working on it, and have something almost finished, I just need to improve a part of our internal library to allow it. Should come rather soon.

15 Likes

That’s awesome!! Thanks @joffreyjaffeux :smiley:

4 Likes

FTR, it’s being worked on in this PR if you want to follow along

https://github.com/discourse/discourse/pull/7914

7 Likes

Did this end up being implemented?

No I didnt so far for mulitple reasons, we worked on double nesting categories support and reworked a lot of dropdowns internals.

Will update if we come up with a good solution.

6 Likes

Joffrey will that potentially include the tag picker too?

1 Like

Yes possibly :slight_smile:

4 Likes

I’m confused, I’m waiting for this feature (category and tag dropdown in mobile view) but noticed that in my instance they’re already present on any category page, but nowhere else.

Is this the current behavior and I just missed it - or am I seeing it differently due to some plugin/TC? Is there currently any way of enabling this on the other pages?

1 Like

That’s the behavior that has existed for a decent amount of time now… the category dropdowns appear on category topic lists, but not on /categories or aggregate pages like /latest /new /top.

It should be possible to get those dropdowns on those other pages in a theme today, but I don’t believe anyone’s tried it yet.

We’re still planning on doing this by default, but other features and customer work have taken priority.

7 Likes

Is this on a roadmap still? It’s difficult to build a consistent navigation on mobile, especially as the tag drop-down is also nested with the category drop-down and thus only shows on category lists.

Eg I’m in a category and the selected tag shows in the tag drop-down:
Screenshot from 2022-07-21 02-16-53

But when I unselect the category, the tag is still selected (and i could click the tag info icon), but all the drop-downs are gone. That’s quite confusing:
Screenshot from 2022-07-21 02-17-34

I’m building a forum that only uses tags for organization. It works great on desktop but with the current ux on mobile I could only put a link to the tags page on the navigation-bar menu. To have the tags drop-down show on all pages, would I need to replace the mobile template or could there be a simpler way?

Our general thinking here is to just redo the whole caboodle.

1 control for tags / categories / filters … all of them. Fitting this into mobile is certainly going to be a challenge, but the “mega” control comes with so many advantages.

2 Likes

I took a shot today at making it always visible and this seems to be working for me with no side effect that I could notice:

api.modifyClass("component:bread-crumbs", {
  pluginId: "never-hidden-bread-crumbs",
  hidden: false
});

hidden is originally:

@discourseComputed("category")
hidden(category) {
  return this.site.mobileView && !category;
},

I preferred to make it hidden on the categories page only.

3 Likes