F NAV - 移动导航标签

主题组件
73

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

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 Forked Branch)

  • 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. Works best with 3.6beta1.

Shoutout to Don for this great component; it’s a fantastic addition! :heart:

关于我的“F-NAV for Mobile”分支的快速更新，包含后退按钮、自定义子菜单和可见性控件

为什么是这个分支？

  • 在主题页面上提供一个“后退”标题按钮，以反映常见的移动应用用户体验
  • 提供一个“customMenu”选项卡类型，可打开可配置的子菜单（非常适合链接到多个目的地；我们用它来添加自定义预填充的“新主题”链接）
  • 为选项卡和菜单项添加基于组的可见性，以便您可以仅向员工显示某些项等
  • 修复了一些弃用的小问题，并优化了样式/可访问性
此处是关于新增功能的摘要
  • 标题后退图标（可选）
    • 在主题页面上将标题主页徽标替换为后退箭头
    • 行为：如果有历史记录则后退，否则路由到“/”
    • 通过设置切换：header_back_icon_enabled
  • 自定义子菜单选项卡类型
    • 新的 f_nav_tabs 函数：customMenu
    • 新设置：f_nav_submenu_items
      • 使用标签和 URL（可选图标）配置菜单项
      • 非常适合从单个选项卡快速访问多个页面
  • 基于组的可见性控件
    • 选项卡、子菜单项和 profile_extra_items 可以限制为选定的组
    • 行为：
      • 空组 => 对所有人可见
      • 如果设置了组 => 只有至少一个选定组的成员才能看到
      • 匿名用户无法看到受限项目
  • 可选：隐藏主题页面的导航栏
    • 通过设置切换：hide_nav_in_topic
  • 压缩的“构建”工件和测试文档
    • 在 builds/ 下提供方便的构建工件（v1–v5）
    • TESTING_GUIDE.md 和 TEST_RESULTS.md 记录手动验证

对现有功能的增强

  • F‑NAV 项目和选项卡
    • 添加 visibleTabs getter 以尊重组可见性
    • 将新的 CustomSubmenu 组件集成到 FNavItem 工作流中
  • 标题头像/个人资料菜单
    • 移动视图检测已移至组件内，从而改善了行为并解决了警告
    • 个人资料额外项目现在支持基于组的可见性
  • 样式和可访问性
    • 为自定义子菜单和后退图标添加了新的 SCSS
    • 一致的悬停/活动/焦点可见状态
    • 与核心变量保持一致的边框半径；改进了内边距/间距（例如，后退按钮内边距设置为 0）

Bug 修复和维护

  • 通过将检查从初始化程序移至组件渲染来解决 site.mobileView 弃用警告
  • 通过将函数移出 block 来修复渲染的边缘情况
  • 对匹配 Discourse 标题行为（悬停/活动状态、不透明度过渡）进行了微调
  • 少量 CSS 整理（例如，确保后退按钮内边距为零，防止意外的尺寸变化）

高层级比较（原始 vs 分支）

  • 原始（main）：F‑NAV 移动选项卡 + chat 可选导入；无后退按钮或自定义子菜单
  • 分支（feat/home-logo-arrow-back）：
    • 添加了带有路由回退功能的标题后退图标功能
    • 引入了带有可配置子菜单项的“customMenu”选项卡功能
    • 为选项卡、子菜单项和个人资料项添加了基于组的限制可见性
    • 可选地隐藏主题页面的 F‑NAV
    • 改进了交互状态的可访问性和一致性
    • 提供测试文档和打包的构建

注释：

  • 此组件针对支持 Discourse 插件 API 级别 1.14+ 的最新 Discourse 版本（如初始化程序所示）
  • 如果您依赖基于组的可见性，请确保首先配置您的组和成员资格

警告：请谨慎测试，因为我不是程序员，并且 TC 完全由 AI 创建和测试。最适合 3.6beta1 版本。

感谢 Don 提供的这个出色组件；这是一个绝佳的补充！:heart:

2 个赞