F NAV - Mobile Navigation Tabs

Customization Theme component
85

I’ve added the AI Bot function to it: FEATURE: Add AI Bot tab support - Pull Request #10 - VaperinaDEV/f-nav-for-mobile - GitHub

It’s easy to configure in the f_nav_tabs setting, just select the aiBot function.

Screenshot 2026-09-02 at 8.26.50
Screenshot 2026-09-02 at 8.26.50485×361 8.45 KB

3 Likes
86

Thank you again, Don! You made it. I was testing this new functionality, and I can confirm it’s working like a charm.

1 Like
87

I wonder if I’m the only one seeing the F NAV bar on desktop when using Embed Discourse as a full comment system on your site?

1 Like
88

Perhaps it’s viewport-based or that the embedded forum mirrors mobile view? Looking at the code tells me that the component will show only if in mobile view.

1 Like
89

Thanks for the report! I think this should work: FIX: prevent f-nav from rendering in embed mode · VaperinaDEV/f-nav-for-mobile@31b5e64 · GitHub

2 Likes
90

Hi @Don, thanks thanks again for F NAV, it’s been the backbone of our mobile layout at our community mobile experience.

I forked it to fit a few things we needed, and I’d be glad to send any of them back as PRs, or you’re welcome to take the code as-is if you think it belongs in the component:

1. F NAV on /chat, in place of the chat footer
Instead of hiding itself on full-page chat, the bar stays and the chat’s own footer (.c-footer) is hidden. Its tabs (channels, DMs, threads, starred, search) are all available in the chat sidebar too.

To leave room below the chat, the bar sets core’s footer-nav-visible class on /chat (only adding and removing it itself, so core’s PWA bar keeps its own), with --footer-nav-height set to the bar’s height. Core’s chat-height mixin already subtracts that. The bar steps aside while the keyboard is open.

It also brings back the header’s sidebar button on mobile full-page chat, which the chat plugin hides, since the footer’s tabs live in the sidebar.

2. Leaving the chat, like the AI bot tab
Inside the chat, the tab that opens it shows shuffle and goes back to lastKnownAppURL, just like the AI bot tab does from its conversations.

That tab can be the Chat tab, Multi Tab, or a custom tab pointing at /chat. The behaviour lives in f-nav-item, because the tab’s own click handler wins over the inner icon’s link.

3. A compose tab
This is a new compose function, which a custom tab pointing at /new-topic also triggers:

  • Inside a topic the user can post in, it shows reply and opens the reply composer (composer.focusComposer({ topic }), so drafts reopen as usual).
  • Everywhere else, it opens a new topic with the current category preselected (composer.openNewTopic).

Each change is small and self-contained, so they can go in separately. Just let me know which ones you’d like as PRs and I’ll open them against main.

One question: the repo has no license yet. Would you consider adding one, so forks and contributions are clear?

I hope it helps!

3 Likes