Category carousel only on mobile

Development

AI-generated summary

alltiagocom seeks to modify the Discourse mobile interface to display categories in a carousel format, similar to the desktop sidebar, rather than hiding them behind a menu. They ask if it’s possible to retrieve the list of current or all categories for use in JavaScript. Moin suggests using a header categories navbar component as an example. NateDhaliwal clarifies that while the sidebar categories are user-customizable and thus harder to access, all site categories can be retrieved. alltiagocom expresses satisfaction with the solution provided by Moin, which met their needs with minimal CSS adjustments. alltiagocom confirms that Moin’s component worked perfectly for their requirements.

1

Some forums/communities probably don’t benefit much on having an easy access to categories on mobile, because they are more focused on being a support forum, but for what I’m building, seeing the categories is very important. Clicking the menu bar is not so intuitive, especially for people who use Discord, and from what I read, adding a swipe gesture is not ideal (at least that’s what I got from reading a thread).

Can I go from this:

IMG_1698 copy
IMG_1698 copy1242×2208 356 KB

to something like this?

IMG_1698
IMG_16981242×2208 342 KB

Not being a developer, I don’t know the ins and outs, but with some help from ChatGPT and Claude, I’ve been able to create some custom components and one of them was to inject some stuff here and there via JavaScript.

My question in this case is more related to:
Is there a way to grab the list of the current categories displayed in the sidebar? Or maybe the list of all categories to let JavaScript use that?

2

I would use Header Categories Navbar as an example for your component.

3

Because that is user-customizable, so perhaps not… [1] but you can get all the categories of the site, yes.

  1. Unless, of course, one uses JavaScript to loop through each element in that section, but that’ll be quite inefficient. ↩︎

4

Awesome! :handshake:

Exactly what I wanted! With just a few CSS tweaks, it 's looking great!

5

The component provided by @Moin did the trick. Exactly what I wanted.