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.
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.
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.
Great ideas! I think messages should be in F NAV as I mentioned above, but I think it will be customizable.
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.
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.
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:
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
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.
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.
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.
Some more update here… I’ve rebuild the tabs active state, now it works better with dynamic tab destinations too.
I’ve fixed it… Thanks
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.
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.
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.
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.
I think it’s more comfortable on mobile to redirect the page… But maybe I am wrong with it 
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. 
