Hello :waving_hand: I am working on a new theme component based on Discourse Tab Bar for Mobile. The theme component adds the ability to use functions to the tabs. These function now can be hamburger, notifications, search. Hamburger: tab opens hamburger menu Notifications: adds notifications to the tab Search: opens context based /search It also modifies the header icons. Removes hamburger, user-menu, search and adds a new DMenu avatar which contains the user menu profile content. When you scroll down it hides everywhere except in topic the header to maximize the view. [The image shows a screenshot of a mobile application's user profile with various theme settings options and recent posts. (Captioned by AI)] It change the notification tab bell icon to bell-slash if do not disturb is active and adds the time. It also dynamically change the route if there is reviewable then it redirect to /review otherwise it goes to /notifications page. [A screenshot of a Theme Creator app displaying various topics such as "A basic guide on writing a basic guide," "Seamus the surfer dog," and "Narnia Holiday Pics." (Captioned by AI)] Here is the demo: https://discourse.theme-creator.io/theme/Don/f-nav That’s it right now… What do you think? Thanks :slightly_smiling_face:

The theme component is ready :tada: Thanks for everyone :hugs: [image] F NAV - Mobile Navigation Tabs Theme component information_source Summary F NAV - Mobile Navigation Tabs eyeglasses Preview Theme Creator hammer_and_wrench Repository GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub question Install Guide How to install a theme or theme component open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Hello wave Before, I have created a #dev topic for it as a theme component concep…

Great job thanks for the component I will try it. It has gained a simpler appearance especially in the header section on mobile. I like it like this, the crowd there is gone and there is a simpler look. Most well-known applications now use it this way, for example: x.com. Features I see that can be added: New topic button can be added to the widget When I click on a post and enter it, instead of the home button, there can be a go back icon. When the user clicks on this icon, they can go to the last place they left off. When I click on a post, the homepage selected active button can change. It can be transparent. There could be the number of unread messages on the homepage icon. I am not sure about this, it may make it look more crowded or alternative: [Screenshot_20241204_142920] @Don

Is it possible to define shortcuts to categories? I would love to try to have icons for special categories at the bottom. They should be able to display indicators about updated or new topics, as the category shortcuts in the sidebar.

Thanks for the feedback @ozkn :slight_smile: I’ve added the home icon change on topic routes and the new or updated topic dot indicator. It’ll be probably a good idea to add the sticky new or updated topic theme component… I changed the notification badge position and size (made it smaller and the number bolder) too.

Beautiful job @Don. Really great theme component. I have discovered some issues on Android where swiping does not work well, especially in PWA. It may be specific to the phones and not Discourse but exists non the less so this bridges that gap, especially for IOS. Seems like there is room for another Nav item with the available room on F NAV bar.

[image] Don: I would like to create a multi-tab This is the idea for multi tab. I will change the tab icon I think but this is just the first version of it. It is contains the chat and messages. The chat works just like the header chat icon and the messages is opens a messages modal. It probably will work if chat disabled then DMenu will be disable too and only messages be on nav. If chat enabled: [The image shows a pop-up with icons for email and chat, suggesting a user interface for communication. (Captioned by AI)]

Nice. I can’t wait to start using it. When the user is not logged in, nothing changes, right?

Hello :wave: Some progress here… I made the notifications bubbles, made some adjustment on number notifications and some other… :slightly_smiling_face: Multi tab is change now automatically to message tab if chat is not enabled or user turn it off in user settings. But now admins can add separately the message and chat tab too. The notifications bubble changes as it is urgent or not. Multi tab urgent notifications are green and looks like this. :arrow_down_small: [Screenshot 2024-12-10 at 15.41.45] Expanded [Screenshot 2024-12-10 at 15.41.59] Personal message is always green but chat can be blue as originally for example unread channel message notification. [Screenshot 2024-12-10 at 15.42.41] Expanded [Screenshot 2024-12-10 at 15.42.53] Single notification [Screenshot 2024-12-10 at 15.43.25]

Hello :wave: Some more update here… I’ve rebuild the tabs active state, now it works better with dynamic tab destinations too. [image] Arkshine: The hamburger menu opens with a brief blink effect. I’ve fixed it… Thanks :slightly_smiling_face: [image] Arkshine: The notification button should open the right panel instead of going to the profile. Now this is an option and admins can choose which one preferred. notificationToRoute: redirects to notifications page notificationMenu: opens notification menu I’ve added these changes to the theme creator, so now it works like this.

F NAV - Theme component concept

Development

Jagster (Jakke Flemming) December 13, 2024, 2:08pm 19

Same issue than with earlier a little bit similar one: using with DiscourseHub is really hard. Now it is only for browsers and PWAs.

Topic		Replies	Views
F NAV - Mobile Navigation Tabs Theme component mobile	85	4365	November 5, 2026
Discourse Tab Bar for Mobile Theme component	79	24049	July 28, 2026
Quick access to bookmarks and messages on user menu Feature	55	7636	November 3, 2020
Hamburger Theme Selector Theme component end-of-life	69	24960	May 30, 2023
Custom User Menu Theme component	9	1088	January 5, 2026

F NAV - Theme component concept

Related topics