F NAV - Theme component concept

Hello :wave:

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.


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: Theme Creator

That’s it right now…

What do you think? Thanks :slightly_smiling_face:

9 Likes

I love it. Nice job again.

Where will be the chat button?

2 Likes

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:

1 Like

Thanks for the feedbacks :hugs:

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. :thinking:


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.


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:

2 Likes

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:

@Don

2 Likes