Discourse Tab Bar for Mobile

Thank you @Osama this is awesome! :heart_eyes:

I notice one issue in css. Discourse Tab Bar can activate and push up the composer.
I believe it only should activate on #reply-control.draft instead of the whole #reply-control.

4 Likes

Ok, should be fixed now. Thanks for letting me know! :grinning_face_with_smiling_eyes:

6 Likes

Just wanted to say thanks so much for this, awesome addition to any Discourse site. @discoverearth did you manage to make this permanently show to all users ?

5 Likes

I’m trying to configure this to click tabs while the user is navigating the platform. In this usecase i’m trying to set up buttons which open the tabs for the Kanban, Calendar and Voting plugins.

Kanban:
If i’m in a category or subcategory and i add ‘?board=default’ to the url it navigates to the Kanban’s tab (Board), so it should be possible. The issue is that this plugin uses the relative path from root, rather than from the path users are currently on.
(i’ll also have to figure out a workaround for the homepage as the url logic there is different).

Calendar:
The Calendar tab needs ‘/l/calendar’ added to the end of the url

That looks possible, but it also needs to delete any text in the url which is above the category/subcategory the user is on. for example, if a user has navigated to ‘latest’ or ‘kanban’ that part of the url needs to be removed before adding /l/calendar’ to the end of it.

Does anyone have any ideas how to go about that, as it would be incredible to be able to use this with those plugins. The tabs selector is basically hidden on mobile now, which isn’t good for sites that use components like kanban or calendar heavily.

1 Like

This plugin is nice piece of work but can’t be used with DiscourseHub (with iPhone anyway) because it hides nav-tab at same position. And then one can’t change a forum.

So, this is useful only for forums, that doesn’t allow somehow DiscourseHub or breaks UX big time teaching to shut down app totally after a forum visit :wink:

Sure, someone who can coding can show this tab bar only when using a browser… but teaching a user to different UI in same device is really bad idea.

With this component:

And when pure DiscourseHub

3 Likes

Do you know which forum that is? I absolutely adore the user interface! :heart_eyes:

3 Likes

I’d love to be able to have the notifications button have the red notifications mentioned like in the top menu button in the default version, could you give me a hint on how to do it? I’m not really good at coding.

@nildarar, did you manage to have the notifications count appear on the button? Thanks.

1 Like

Hi! Loving this concept. Thanks.

One question: I’d prefer to use the outlined version of FontAwesome icons as opposed to the filled-in versions, in order to be more consistent with other areas of my website.

Is there any way to specify that? Typically, using an icon’s the full name — e.g. far fa-star (instead of just star) — would make that distinction. But whenever I try to put in the full name of an icon like that, the component doesn’t display anything at all in its place.

Is there any way to make that happen?

1 Like

This looks really cool. Is there way to make a tab to show the follow feed? This way a user can easily see a feed of all the people they follow.

Also is it possible for page specific

.user-main .about {
    margin-bottom: 0;
    color: var(--secondary);
    display: none;
}

Just for the feed page?

1 Like

Just to confirm, you’re referring to the follow feed of Follow Plugin 👨? If so, then set feed as the route (the third segment) in the setting of the tab that you want to redirect to the follow feed.

4 Likes

Yes I am. Thank you!

3 Likes

I think it’d be nice if we could add a “New Topic” button right in the middle of the bar. :thinking:

Reddit serves as a great example.

2 Likes

You sure can. Try the below in either the 3rd or 4th tab setting to achieve the middle effect.

New, plus, /new-topic
4 Likes

That’s great! I just did it and it reminds me of YouTube’s implementation. Overall, very nice! :grinning:


Would it be possible to add a button that redirects users to the “Discourse Chat” section of the community?

3 Likes

Hi, I made a PR for adding support to the non-ASCII characters in the tab URL, would you like to take a look and see if it can be merged into the main branch?

6 Likes

Sure, PR merged! Thank you @th21!

5 Likes

Not sure whether it’s mergeable so I forked and added extra settings to display tabs for non-login-user

5 Likes

Can we add a BACK button in the tab bar, maybe a simple javascript code or something? Tab bar on Discourse Hub app iOS prevents you from going back to the main Discourse selection page.

5 Likes

@Osama any ideas to add back/forward with them? Thanks.

2 Likes

@miss @MarcP Given that the component lets admins customize each tab, I can’t just hardcode a specific tab to do backward/forward navigation so we need a way to let admins decide which tab they want to act as a backward or forward button using the theme settings. This is a new feature that needs to be added to the component and I’d be happy to accept a PR for it. If you’re interested in working on this, please PM me before you start.

3 Likes