F NAV - Mobile Navigation Tabs

Theme component
73

Quick update about my Fork of “F-NAV for Mobile” with Back Button, Custom Submenu, and Visibility Controls. Works best with 3.6beta1

Why this fork?

  • Provide a header “Back” button on topic pages that mirrors common mobile app UX
  • Offer a “customMenu” tab type that opens a configurable submenu (ideal for linking to multiple destinations; we use it to add custom pre-populated “New Topic” links)
  • Add group-based visibility to tabs and menu items, so you can show certain items to staff only, etc.
  • Small fixes with some deprecations and polishing of styles/accessibility
Summary about newly added features here
  • Header Back Icon (optional)
    • Replaces the header home logo with a back arrow on topic pages
    • Behavior: go back if there’s history, otherwise route to “/”
    • Toggle with setting: header_back_icon_enabled
  • Custom Submenu tab type
    • New f_nav_tabs function: customMenu
    • New setting: f_nav_submenu_items
      • Configure menu items with label and URL (optional icon)
      • Great for quick access to multiple pages from a single tab
  • Group‑based visibility controls
    • Tabs, submenu items, and profile_extra_items can be limited to selected groups
    • Behavior:
      • Empty groups => visible to all
      • If groups set => only members of at least one selected group can see
      • Anonymous users can’t see restricted items
  • Optional: Hide nav bar on topic pages
    • Toggle with setting: hide_nav_in_topic
  • Zipped “build” artifacts and testing docs
    • Convenience build artifacts (v1–v5) under builds/
    • TESTING_GUIDE.md and TEST_RESULTS.md documenting manual validation

Enhancements to existing features

  • F‑NAV items and tabs
    • Adds visibleTabs getter to respect group visibility
    • Integrates the new CustomSubmenu component into FNavItem flow
  • Header avatar/profile menu
    • Mobile view detection moved into the component, improving behavior and resolving warnings
    • Profile extra items now support group‑based visibility
  • Styling and accessibility
    • New SCSS for the custom submenu and the back icon
    • Consistent hover/active/focus-visible states
    • Consistent border‑radius with core variables; refined padding/spacing (e.g., back button padding set to 0)

Bug fixes and maintenance

  • Resolve site.mobileView deprecation warnings by moving checks from initializers into component rendering
  • Fix a rendering edge case by moving a function out of the block
  • Minor polish to match Discourse header behaviors (hover/active states, opacity transitions)
  • Small CSS tidy-ups (e.g., ensure back button padding is zero, prevent accidental sizing shifts)

High‑level comparison (Original vs Fork)

  • Original (main): F‑NAV mobile tabs + chat optional import; no back button or custom submenu
  • Fork (feat/home-logo-arrow-back):
    • Adds header back icon feature with routing fallback
    • Introduces “customMenu” tab function with configurable submenu items
    • Adds group‑restricted visibility for tabs, submenu items, and profile items
    • Optionally hides the F‑NAV on topic pages
    • Improves a11y and consistency of interaction states
    • Provides testing docs and packaged builds

Notes:

  • This component targets recent Discourse versions that support the Discourse Plugin API level 1.14+ (as indicated in the initializers)
  • If you rely on group‑based visibility, ensure your groups and memberships are configured first

Word of warning: Please test with caution as I am not a coder, and the TC was made and tested entirely with AI.

Shoutout to Don for this great component, it’s a fantastic addition to Discourse UX/UI! :heart:

2 Likes