Discourse Tab Bar for Mobile

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?

7 Likes

Sure, PR merged! Thank you @th21!

6 Likes

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

6 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.

3 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.

4 Likes

Hi, I made another PR to add an option to allow untrimmed URL to be able to match the tab destination setting.

For example, /latest?order=created and /latest will be treated as different tabs and receive icon color change on click when the option is on.

Would you like to take a look and let me know whether it’s mergable? thx in advance. :grinning:

4 Likes

I really like this!

It’s covering the Discourse Hub UI though, can that be fixed?

2 Likes

Hi, thank you for this theme component. I am currently using them on my website https://businesslab.vn. However, recently I have an idea about integrating “Toggle hamburger menu” and “Header dropdown toggle current user” inside this theme-component, this will make the display space in the header more minimalist, and users with only 1 hand operation can perform navigation to Tab bar (your theme-component). Hope you will be interested in this proposal.
image
image

1 Like

hello, this component is wonderful, congratulations on creating it! Is this the most current component there is? or is there a more modern component? I’m new to the forum

Is there a way for me to put a way on the last button so that when the person presses it, other buttons with icons or with icons and names appear for them to choose other options? Because I have more important options and I needed to put it, a way like this would be perfect, for example

that is, when the person clicks on the icon, other icons will appear for them to click on

@th21 @osama

1 Like

How do I make the tab bar fixed? Sometimes I scroll down and it disappears, I want to make it always visible!

I am trying to make one of the buttons go to user-portfolio with no luck.

Is this doable?

Edit: worked it out…

my/activity/portfolio
1 Like

Tab bar is overflow on chat box. Users can not chat with tab bar.
Could you fix this, please?

I can confirm the issue: it hides the text input.

A quick fix would be adding a margin under chat composer, not very beautiful but users should be able to toggle the input box.

I resize the tab bar as well so if anyone would like to use the css should use the original height of tab bar ( but I forget how much it is

.chat-composer__wrapper {
    margin-bottom: 35px 
}
1 Like

This seems to work, but it will leave a blank space when you scroll down.

(video recorded avec a margin-bottom of 49px, which is the tab bar height):

yes as I said it won’t be beautiful

1 Like

You should check with z-index, instead of margin
(Suppose that user never use tab when chatting)
By decrease z-index of tab-bar, it will be more beautiful

That’s why I didn’t use the z-index way and it’s also strange to have elements overlay, looks so buggy.