# F NAV - Theme component concept
**URL:** https://meta.discourse.org/t/f-nav-theme-component-concept/340226
**Category:** Development
**Created:** [December 3, 2024, 9:59pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226 "2024-12-03T21:59:05Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 3, 2024, 9:59pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/1 "2024-12-03T21:59:06Z")
Hello š
I am working on a new theme component based on [Discourse Tab Bar for Mobile](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696).
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.
* * *
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.
* * *
Here is the demo: [https://discourse.theme-creator.io/theme/Don/f-nav](https://discourse.theme-creator.io/theme/Don/f-nav)
Thatās it right nowā¦
What do you think? Thanks š
---
### Author:  [@David\_Ghost](https://meta.discourse.org/u/David_Ghost)
#### Post date: [December 3, 2024, 10:38pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/2 "2024-12-03T22:38:43Z")
I love it. Nice job again.
Where will be the chat button?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 4, 2024, 4:16am UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/3 "2024-12-04T04:16:50Z")
This looks really nice! š
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. š¤
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. š
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 4, 2024, 6:16am UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/4 "2024-12-04T06:16:45Z")
Thanks for the feedbacks š¤
> [@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.
* * *
> [@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. š¤
* * *
> [@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 š
I think itās more comfortable on mobile to redirect the pageā¦ But maybe I am wrong with it š¤
Edit: Iāve added it. Now it redirect to `/u/username/notifications?filter=unread` if there is unread notification.
* * *
> [@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. š¤
Thanks š
---
### Author:  [@ozkn](https://meta.discourse.org/u/ozkn)
#### Post date: [December 4, 2024, 11:12am UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/5 "2024-12-04T11:12:28Z")
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](http://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:
@Don
---
### Author:  [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [December 4, 2024, 8:31pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/6 "2024-12-04T20:31:35Z")
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.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 4, 2024, 9:41pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/7 "2024-12-04T21:41:45Z")
Thanks for the feedback @ozkn š
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.
---
### Author:  [@BrianC](https://meta.discourse.org/u/BrianC)
#### Post date: [December 4, 2024, 10:13pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/8 "2024-12-04T22:13:04Z")
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.
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [December 5, 2024, 1:35am UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/9 "2024-12-05T01:35:16Z")
What does F stand for?
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [December 5, 2024, 7:04am UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/10 "2024-12-05T07:04:47Z")
Iām guessing **F** ooter? š
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 6, 2024, 9:15am UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/11 "2024-12-06T09:15:06Z")
> [@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:
---
### Author:  [@David\_Ghost](https://meta.discourse.org/u/David_Ghost)
#### Post date: [December 6, 2024, 5:09pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/12 "2024-12-06T17:09:47Z")
Nice. I canāt wait to start using it.
When the user is not logged in, nothing changes, right?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 10, 2024, 3:02pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/13 "2024-12-10T15:02:37Z")
Hello š Some progress hereā¦ I made the notifications bubbles, made some adjustment on number notifications and some otherā¦ š
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. š½
Expanded
* * *
Personal message is always green but chat can be blue as originally for example unread channel message notification.
Expanded
* * *
Single notification
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 11, 2024, 5:44pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/14 "2024-12-11T17:44:26Z")
Hello š
Some more update hereā¦ Iāve rebuild the tabs active state, now it works better with dynamic tab destinations too.
> [@Arkshine](#):
>
> The hamburger menu opens with a brief blink effect.
Iāve fixed itā¦ Thanks š
> [@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.
---
### Author:  [@BrianC](https://meta.discourse.org/u/BrianC)
#### Post date: [December 11, 2024, 11:47pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/15 "2024-12-11T23:47:40Z")
Nice work @Don I know this isnāt you F NAV theme component but it would great if there was an x to close the search window when it opens. Unless Iām missing it, which is possible once you click the search icon if you decide not to search it is not clean to close the window.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 12, 2024, 6:04pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/16 "2024-12-12T18:04:56Z")
> [@BrianC](#):
>
> it would great if there was an x to close the search window when it opens
Hey Brian š Iām not sure I understand. When you tap the search icon it will redirect to the `/search` page so you can go back with the browser/mobile navigation or gesture.
* * *
Some update againā¦ Iāve decided to not delete header icons, only hide it with CSS. Yesterday, when I fix the hamburger menu opening animation I figured out it will more easier, clean and safe I think because this way we can trigger the default header icons click. Now the hamburger, notification menu and search working this way. The default header chat icon is also just hidden with CSS because on `/chat` pages it will show on header.
I try to make the settings simple as possible.
It will contains 4 fields the descriptions are missing yet. Destination is optional because if you choose a function it will include the necessary thing and this field should leave empty.
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.
---
### Author:  [@BrianC](https://meta.discourse.org/u/BrianC)
#### Post date: [December 13, 2024, 3:47am UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/17 "2024-12-13T03:47:41Z")
> [@Don](#):
>
> Hey Brian š Iām not sure I understand. When you tap the search icon it will redirect to the `/search` page so you can go back with the browser/mobile navigation or gesture.
Hi @Don my statement is rather incoherent, š My comment has nothing to do with your component. I think it would be helpful to have an x to close the search interface of you decide not to search after opening or clicked by mistake. I often end up backing out of the page or Discourse accidently. š¤Æ
Looks fantastic, canāt wait to give it a try!
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 13, 2024, 1:25pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/18 "2024-12-13T13:25:04Z")
The theme component is ready š
Thanks for everyone š¤
> [@F NAV - Mobile Navigation Tabs](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277):
>
> information_sourceSummary F NAV - Mobile Navigation TabseyeglassesPreview [Theme Creator](https://discourse.theme-creator.io/theme/Don/f-nav-component)hammer_and_wrenchRepository [GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs Ā· GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Hello wave Before, I have created a #Development [topic](https://meta.discourse.org/t/f-nav-theme-component-concept/340226) for it as a theme component concepā¦
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 13, 2024, 2:08pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/19 "2024-12-13T14:08:34Z")
Same issue than with earlier a little bit similar one: using with DiscourseHub is really hard. Now it is only for browsers and PWAs.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [December 13, 2024, 2:15pm UTC](https://meta.discourse.org/t/f-nav-theme-component-concept/340226/20 "2024-12-13T14:15:32Z")
Works fine for me in DiscourseHub.
[Next page](https://meta.discourse.org/t/f-nav-theme-component-concept/340226.md?page=2)