F NAV - Mobile Navigation Tabs

[Don]

	Summary	F NAV - Mobile Navigation Tabs
	Preview	Theme Creator
	Repository	GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Hello

Before, I have created a Dev topic for it as a theme component concept and now this is in a state to be a Theme component.

Please be sure to test it before use in live.

Some info here about the component: F NAV - Theme component concept

---

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.

Settings

It also contains a setting where you can add custom items before Log Out item.
It contains three fields where you can easily add custom items.

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.

Tabs

It is possible to associate different functions with tabs. These functions allow each tab to change dynamically.

Such changes include:

Functions

home

• switches the home tab icon on topic routes to left arrow which add a go back function
  
• adds new or unread topic indicator dot
  

---

hamburger (opens the hamburger menu)

---

multi

multi tab

Multi tab is change automatically to message tab if chat is not enabled or user turn it off in
user settings.

The notifications bubble changes as it is urgent or not.

Multi tab urgent notifications are green and looks like this.

Expanded

Personal message is always green but chat can be blue as originally for example unread channel message notification.

Expanded

Single notification

---

message

• 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.
• function: Choose a function to the tab.

Admins can simply create/remove/change tabs and select from one of the functions or add a custom destination to the tab.
Functions

E.g. adding topic creation tab will simply looks like this.

---

Credit: Discourse Tab Bar for Mobile and thanks for everyone the feedbacks in F NAV - Theme component concept topic.

[CocoQuark (Coconut Flavored Quark)]

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.

[ozkn (Mathx)]

Thanks for the component @don I’ve been here for a long time you’re really doing great work.

[Monikas (JustMonika)]

FKB Pro - Social theme

[A screenshot of a social media platform, showcasing a user's profile with a variety of anime-related content. (Captioned by AI)] [The image shows a computer screen displaying a web browser with a blurry background, possibly to protect sensitive information. (Captioned by AI)] This one I’m not sure if it’s a bug or not because I have too many components Well I’d better give feedback on it

This should be a bug

[Don]

Ah thanks, this is FKB theme related. I’ll update the theme.

[Don]

Here is the fix: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
Please update the FKB theme and enable this new setting.

[ozkn (Mathx)]

Bell Classic Regular Icon | Font Awesome

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.

[Don]

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.

[ozkn (Mathx)]

Thanks, I solved my problem. @Don

[Jagster (Jakke Lehtonen)]

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 )

[Don]

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.

[Jagster (Jakke Lehtonen)]

Actually DiscourseHub works just fine with swiping down. I just didn’t know that.

That question of home/back button is bigger because I have to explain it to others.

[Don]

@Jagster

That question of home/back button is bigger because I have to explain it to others.

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.

FEATURE: Add `none` option to dropdown for clearing selection

[Heliosurge (Dan DeMontmorency)]

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!