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…

This looks really nice! :clap: Separating the notifications makes a lot of sense. The Central theme does the same, making the user menu easier to access and comfortable (feels less imposing). It’s straight, and you have the essential links. This is such a big UX improvement IMO, love it. About the links inside the menu: I would replace the word “Summary” with “Profile”; it’s easier to understand in this context. “Activity” is not super helpful; I would replace it with “Messages” instead. Direct access to your inbox is a must-have. I think a “Bookmark” would be welcome too. I’m not sure about the bottom panel. :thinking: I guess I’m not used to looking at the bottom. The notification button should open the right panel instead of going to the profile. The view is more suited when you want to take a fast look, and you don’t have extra content unrelated to the notification. The hamburger menu opens with a brief blink effect. I hope the feedback helps. :+1:

Thanks for the feedbacks :hugs: [image] David_Ghost: Where will be the chat button? Well, I would like to create a multi-tab in the F NAV which contains the messages and chat. Just something like on mobile phone app folders. So you’ll see what’s in there and can open it in a DMenu for example. It separately shows the unread badges when it opens otherwise you see a consolidated unread indicator. The messages should have priority as Arkshine mentioned so it would opens in a modal to view messages. [image] Arkshine: About the links inside the menu: I would replace the word “Summary” with “Profile”; it’s easier to understand in this context. “Activity” is not super helpful; I would replace it with “Messages” instead. Direct access to your inbox is a must-have. I think a “Bookmark” would be welcome too. Great ideas! I think messages should be in F NAV as I mentioned above, but I think it will be customizable. :thinking: [image] Arkshine: The notification button should open the right panel instead of going to the profile. The view is more suited when you want to take a fast look, and you don’t have extra content unrelated to the notification. The original idea here was to redirect users to notifications with filter unread if there is unread notification and goes to all without filter if there isn’t and goes to review page if there is reviewable notification. But I forget to add it :sweat_smile: I think it’s more comfortable on mobile to redirect the page… But maybe I am wrong with it :thinking: Edit: I’ve added it. Now it redirect to /u/username/notifications?filter=unread if there is unread notification. [image] Arkshine: The hamburger menu opens with a brief blink effect. Hmm yeah it seems it doesn’t add the animation correctly if you close hamburger menu with click outside. Closing with swipe works fine, I think this is why I didn’t noticed it. :thinking: Thanks :slightly_smiling_face:

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)]

F NAV - Theme component concept

Development

David_Ghost December 3, 2024, 10:38pm 2

I love it. Nice job again.

Where will be the chat button?

Topic		Replies	Views
F NAV - Mobile Navigation Tabs Theme component mobile	85	4366	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	7637	November 3, 2020
Hamburger Theme Selector Theme component end-of-life	69	24961	May 30, 2023
Custom User Menu Theme component	9	1088	January 5, 2026

F NAV - Theme component concept

Related topics