About the theme component. I was read so much posts about it would be wonderful to make the Discourse Tab Bar for Mobile more dynamic and add the ability to handle e.g. notifications etc… F-NAV can do this and more…
Header
It hides the hamburger, user menu, search and chat and adds a profile (avatar) menu button which contains the default user menu profile tab content.
There are some settings for show/hide the default header icons which is useful when you don’t want to place the exact tab in F NAV so it will shown on header.
adds message button with notifications and clicking of it opens a messages modal for quick look
chat
adds chat button with it’s functions
notificationToRoute
if do not disturb active the bell icon will change to bell-slash icon and the dnd until time is appears
redirects to profile notifications page bypass the notification menu
if there is notification it redirects to /notifications?filter=unread
if there is no notification it redirects to /notifications
if there is a reviewable content red flag will appear and redirects to /review
notificationMenu
if do not disturb active the bell icon will change to bell-slash icon and the dnd until time is appears
opens notification menu
search
redirects to context base /search page
Settings
I try to make the settings simple as possible.
It will contains four fields.
name: This is just for easier identify the tab in setting.
icon: Adds icon to the tab. Note: If you select a function there might be icons which not overridable with this setting.
destination: Adds destination for your custom tab. Note: If you select a function that will handle the destination so you can leave it empty. The component handle the /my/... destinations automatically convert to /u/username/... so the tabs active status can be added correctly.
This is awesome and legit should be the default behavior and will save my thumb from trying to reach too often the far top screen of my .
I’m not a fan of the prominent “online” toggle as I think most people don’t need to change this setting often, I guess most users choose to opt-out of their online presence once and for all so not sure of the constant reminder that this option exists.
You’ve apparently made lot of very useful navigation modification theme components. I’d like to use some, but how much do you see yourself maintaining all of this in the long run? I tend very much to use only official theme components to ensure reliability.
I didn’t see the original tab bar official theme component, so I’ll have a look at it.
Hello @don, how can I use fa-regular icons like in the picture? I did some research and couldn’t find any information on how to do it after switching to Fontawesome 6.
Hello It should work with far-bell. I had plans to make it regular to solid when tab is active, I’ll check this but if I remember correctly the house icon only have solid in free version.
The home icon, that changes to back button when open a topic. Why, we can use swaiping for that (like when returning to home screen of the Hub ). My users were complaining quite lot about that, because know they have to reach logo for that (1st world problem, I know )
I think we can add it to a function I am just thinking of where to place this. This can be a single tab and you can add it the navigation which only shows in DiscourseHub.
The back button is only activate in topics to makes the back navigation easier between topics. It’s from the home function which you can turn off and then this will keep the home destination.
The settings cannot be reorder yet and if you have an existed selection you cannot clear it but I add a new function none which will be the same behaviour like you leave the function field empty. This way you don’t have to recreate the whole navigation tabs.
This is how it should be if you want to disable the back button and keep the home everywhere.
Fantastic as always. I have to agree from the quick preview on theme creator. This really should be package in core with a toggle for classic mobile and Improved Mobile.
I can see this opening things like longer banner site logo. Cleaner option for extras in the header like local selector and more. Very very nice as always Don!
Hi Don. Thank you for your awesome work. I like it.
I have a question. After I click on the Hamburger or Notification, sometimes I don’t need to take any further actions. At this time, I need to go back to the article list. However, I can only close the Hamburger or Notification by clicking on the blank page. This may lead to accidentally clicking on the avatar or reply.
To give another simple example, when I am on the chat page and need to go back to the home page, I have to click the back button in the upper left corner, which is actually not user-friendly on mobile devices.
So, is it possible to keep the menu bar always at the top?
Can you make some screenshot / screen record about the issue?
On /chat we hide the navigation and use the default chat header. I am not sure that worth to display the nav on chat because that can cause issues on different browsers maybe but I will check this.
Hi Don
Thank you for your reply.
Please refer to the screenshots below. The first two screenshots mean that when I want to close the Hamburger or Notification, I can only click on the yellow area. The problem is that it’s easy to accidentally click on the article or avatar.
The third screenshot means that I have to click the back button in the upper left corner to leave the chat interface.
Yeah, I see. The issue happens here is not the component but a core issue when you have enabled the reduce motion setting on your device. Is that enabled on your device?
When the reduce motion is turned off. The header-cloak (dark area behind the menu) is blocking the click action.
When I enable it on my device, it won’t block the user click.
If this is the case, you can safely close the menus with swipe gestures too.
Please be sure to test it before use in live.
.
). My users were complaining quite lot about that, because know they have to reach logo for that (1st world problem, I know 
)
