GitHub repository:
Follow the instructions in this #howto topic:
See the readme file in the theme’s GitHub repository.
Ideas to improve this theme are very welcome 
You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the readme file for details.
Hey, I love this plugin. But I need to make the bar visible for logged out users too.
Is there a way to do this? Maybe something like
body:not(.logged-in) .d-tab-bar-theme {
display: block
}Hi Ben
The component’s JS code expects in several places that there is a logged in user, so CSS wouldn’t be enough to show the bar for anonymous users. My recommendation here is to fork the component and modify it to make it show up to anonymous users.
How to add a + new post button to the bar?
Hi Peter,
Discourse core has this neat route /new-topic that exists to make it possible to open the composer via a URL. So, all you need to do is use that route as the URL for the tab that should open the composer.
This component is very useful and our forum users truly like it.
One of the most requested features is to display unread notifications badge and unread PMs badge on the keys at the bottom of the screen.
Does the Discourse JavaScript API allow us to do this?
Hi Nildarar,
I’m glad to here that your community enjoys this component and finds it useful, thanks! I support adding this feature to the component, but I can’t implement it right now (maybe in a few months). Though if someone else feels like working on this feature in the meantime, I’d be totally happy to merge a pull request with this feature.
Yes, the data needed is exposed in the currentUser object which is easily accessible. Most of the work for this feature would be 1) figuring out which tab(s) to display the badges on and 2) positioning the badges correctly with CSS.
Thanks @Osama
Based on your guidance, I found these objects.
<script type="text/discourse-plugin" version="0.8">
let currentUser = api.getCurrentUser();
console.log(currentUser);
</script>
// unread_high_priority_notifications: 2
// unread_notifications: 7
// unread_private_messages: 2
Is there a way we can register a function in an event or should we find out about this through the following trick?
$('.header-dropdown-toggle current-user').bind('DOMSubtreeModified', function(){
console.log('changed');
});Yes these are the correct properties that we need to consume, but with Discourse being an Ember application, we typically don’t subscribe to DOM events to update the UI. Instead, we should use what Ember calls ‘computed’ properties.
The component already defines a computed property here, so you can use that as an example. Once you’ve defined your computed property that determines whether or not the notifications badge should be displayed (based on the currentUser.unread_high_priority_notifications etc. properties), you will need to use your computed property in the Handlebars template in the same link at the bottom.
Note: implementing this feature in a separate component is tricky, so everything I said here assumes that you’re implementing this in the component itself, not a separate component.
Thank you, let me try 
Tab bar is showing white background even on Dark Theme. I just updated from 2.7.0 beta 1 to 2.7.0 beta 3 and after that the white background started to show. Prior to that everything worked just fine. I also tried to remove all other theme components and remove all customization to confirm is anything is messing up with the tab bar. But even on barebones Discourse, the Tab bar has a white background on a dark theme. Can someone please take a look in this?
I’ve pushed a fix for this issue. Thanks for letting me know!
Looks like this tab will make the topic-progress covers the reply button in some cases (E.g. I can reproduce this using Chrome to simulate iPhone SE)
As you can see, the reply button is covered by the progress bar. But if I disable the bar, it works. I guess it’s because the progress button’s position is relative, but I don’t know how to fix it.
I have a similar issue. The “table of content” button does not show up when I enable the Mobile Tab Bar. It would be nice if we do not have to choose one feature over another because we love both!
@haroldfy I cannot reproduce this issue here on Meta or theme creator. Maybe you have other themes/customizations that are interfering? I can take a look if your site is public.
@littleviolette I try to avoid as much as possible adding code that targets elements of another component. In this case, you can create a separate component with this CSS to push the ToC button above the bar:
html:not(.anon) .d-toc-toggle {
margin-bottom: 55px;
}
thanks for looking into this. It’s a private site, I will try to disable other customization and debug from there.
I think I found a bug, and I can only produce it on the PWA version of my site on iOS (seems fine on Android and on iOS safari).
The tab bar is supposed to always be locked, right? This is what it looks like when correct:
And then I unlock my screen, go into landscape mode, and then go back to portrait mode, and then I scroll up a little, and then this happens:
I had the same problem @haroldfy @littleviolette . You can fix it with :
html:not(.anon) #topic-progress-wrapper.docked{
margin-bottom:0!important;
}The tab bar also conflicts with the posts filter core feature which puts a sticky footer (posts-filtered-notice) when filtering.
Anyway, thanks for this great TC 
Awesome theme component, thank you
I have an ask and would like to check if there is interest in a ‘scroll to hide’ feature?
Essentially, the bottom bar auto-hides when user scrolls down, the re-appears as user scrolls up
Example I found is here
This will thoughtfully free up precious screen estate in mobile, and make the consuming of content a better experience with more space