I love this idea! I’d be more than happy to review and merge a PR that implements this feature 
10 Likes
I really like this idea 
So just played with this a little bit. I believe there is a much better way to make it but for now it works on my site pretty good. 
I use the Big Header - Little Header component </head> code for template to do this.
Unfortunately on iPhone there is limitation because the footer-nav is completely hide the Discourse Tab Bar. So i hide that.
I updated this code!
Now i just share the code here (not sure this is merge able):
Place this on mobile </head> section
<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
var lastScrollTop = 0;
var body = $("body");
var scrollMax = 30;
$(window).scroll(function() {
var scroll = $(this).scrollTop();
if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
body.addClass("tab-bar-hidden");
} else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
body.removeClass("tab-bar-hidden");
}
lastScrollTop = scroll;
});
});
</script>
Place this on mobile css section:
html:not(.anon) {
#topic-progress-wrapper,
#reply-control.draft {
bottom: 49px;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .1s ease-out;
}
.posts-filtered-notice {
transition: all .1s ease-out;
bottom: 49px;
}
}
body.tab-bar-hidden {
.d-tab-bar {
bottom: -49px;
transition: all .2s ease-in;
}
#topic-progress-wrapper:not(.docked),
#reply-control.draft {
bottom: 0;
transition: all .2s ease-in;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .2s ease-in;
}
.posts-filtered-notice {
transition: all .2s ease-in;
bottom: 0;
}
}
.d-tab-bar {
transition: all .1s ease-out;
}
body:not(.footer-nav-ipad) .footer-nav {
display: none;
}
Demo
16 Likes
Pretty cool thing you made!
5 Likes
Handy little component - thanks!
Is there a way for individual users to either customise it, or hide it completely?
5 Likes
This is great @Don, thank you! I’ve just pushed your code (with minor modifications) to the component.
There isn’t a built-in option for individual users to customize or hide the component, but there is workaround in Discourse core that you could use to allow individual users to hide the component: you can create a variation of your main theme that doesn’t include this component, and then make that variation available to your users to select in Preferences → Interface.
This is how it would look like:
Users who don’t want this component can choose the Grey Amber (w/o Tab Bar) which is configured exactly like Grey Amber but the tab bar component is not included.
6 Likes
Great idea! Thanks for that!
5 Likes
Thank you @Osama this is awesome! 
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.
5 Likes
Ok, should be fixed now. Thanks for letting me know! 
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 
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! 
4 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 Official Discourse 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. 
Reddit serves as a great example.
6 Likes
You sure can. Try the below in either the 3rd or 4th tab setting to achieve the middle effect.
New, plus, /new-topic
5 Likes
