# F NAV — Вкладки мобильной навигации
**URL:** https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277
**Category:** Theme component
**Tags:** mobile
**Created:** [13.Декабрь.2024 13:12:16 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277 "2024-12-13T13:12:16Z")
**Posts on this page:** 20
**Page:** 4
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [26.Июнь.2025 06:30:38 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/63 "2025-06-26T06:30:38Z")
> [@MihirR](#):
>
> body.f-nav-hidden .d-header-wrap {
> animation: none !important;
> opacity: 1 !important;
> transform: none !important;
> visibility: visible !important;
> position: sticky !important;
> top: 0 !important;
> z-index: 1000 !important; // убедиться, что он остаётся поверх других элементов
> }
После нового обновления это больше не работает. @Don, ты внёс какие-то соответствующие изменения или что-то ещё?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [26.Июнь.2025 07:51:35 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/64 "2025-06-26T07:51:35Z")
> [@MihirR](#):
>
> Вы внесли какие-либо существенные изменения?
Привет 👋 Нет, я так не думаю. Последнее изменение было 2 месяца назад. [Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile/commit/085e07f68dc49a689c64137604cf598ed7e275f7)
---
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [26.Июнь.2025 07:53:00 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/65 "2025-06-26T07:53:00Z")
Да, всё снова заработало. Проблема была вызвана другими компонентами темы.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [26.Июнь.2025 10:35:05 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/67 "2025-06-26T10:35:05Z")
Привет 👋 Хм, мне не удалось воспроизвести это… какое устройство и браузер вы используете?
---
### Author:  [@clacle](https://meta.discourse.org/u/clacle)
#### Post date: [26.Июнь.2025 12:08:51 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/68 "2025-06-26T12:08:51Z")
Привет, Дон, спасибо за ответ.
Это очень странно. Ниже приведены несколько браузеров, которые я протестировал, и наблюдалось то же самое явление. 😅
Edge на ПК
Приложение Discourse Hub на iPhone
Safari на iPhone
Edge на Android
---
### Author:  [@clacle](https://meta.discourse.org/u/clacle)
#### Post date: [26.Июнь.2025 13:28:05 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/70 "2025-06-26T13:28:05Z")
> [@Don](#):
>
> Хм, я не могу воспроизвести это… Какое устройство и браузер вы используете?
Я использовал следующий CSS для корректировки позиции, и это работает довольно хорошо.
```plaintext
/* Используйте Flexbox для центрирования chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
display: flex;
justify-content: center;
align-items: center;
position: relative; /* Убедитесь, что контейнер имеет контекст позиционирования */
}
/* Убедитесь, что стили элемента с номером не мешают центрированию */
.chat-channel-unread-indicator__number {
display: inline-flex;
align-items: center;
justify-content: center;
}
```
---
### Author:  [@David\_Ghost](https://meta.discourse.org/u/David_Ghost)
#### Post date: [24.Август.2025 18:01:28 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/71 "2025-08-24T18:01:28Z")
Выглядит круто. Было бы здорово показывать это и для пользователей, не вошедших в систему
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [11.Октябрь.2025 12:59:56 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/72 "2025-10-11T12:59:56Z")
@Don, вы принимаете PR? Я добавил функцию для открытия модального меню, куда можно добавлять дополнительные элементы.
В нашем случае мы хотим создать подменю с несколькими вариантами при создании новой темы (например, отправить отчет об ошибке, запрос на поддержку, идею, создать новый журнал или обычную новую тему).
Смотрите: [GitHub - jrgong420/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub](https://github.com/jrgong420/f-nav-for-mobile/)
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [18.Октябрь.2025 10:44:02 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/73 "2025-10-18T10:44:02Z")
Быстрое обновление о моём форке «F-NAV для мобильных устройств» с кнопкой «Назад», пользовательским подменю и элементами управления видимостью. Лучше всего работает с версией 3.6beta1.
### Зачем этот форк?
- Добавлена кнопка «Назад» в заголовке на страницах тем, повторяющая распространённый UX мобильных приложений.
- Предложен тип вкладки «customMenu», открывающий настраиваемое подменю (идеально для ссылок на несколько целей; мы используем его для добавления пользовательских ссылок «Новая тема» с предустановленными данными).
- Добавлена групповая видимость для вкладок и элементов меню, чтобы можно было показывать определённые элементы только сотрудникам и т. д.
- Небольшие исправления, связанные с устареванием и улучшением стилей/доступности.
> **Краткое описание новых функций**
>
> - Иконка «Назад» в заголовке (опционально)
> - Заменяет логотип «Домой» в заголовке на стрелку «Назад» на страницах тем.
> - Поведение: переход назад, если есть история, иначе — перенаправление на «/».
> - Управление через настройку: `header_back_icon_enabled`.
>
> - Тип вкладки «Custom Submenu» (пользовательское подменю)
> - Новая функция f\_nav\_tabs: customMenu.
> - Новая настройка: f\_nav\_submenu\_items.
> - Настройка элементов меню с меткой и URL (опционально иконка).
> - Отлично подходит для быстрого доступа к нескольким страницам из одной вкладки.
>
> - Элементы управления видимостью на основе групп
> - Вкладки, элементы подменю и profile\_extra\_items можно ограничить выбранными группами.
> - Поведение:
> - Пустые группы =\> видны всем.
> - Если группы заданы =\> видят только члены хотя бы одной выбранной группы.
> - Анонимные пользователи не видят ограниченные элементы.
>
> - Опционально: скрытие панели навигации на страницах тем
> - Управление через настройку: hide\_nav\_in\_topic.
>
> - Артефакты сборки в архиве и документация по тестированию
> - Удобные артефакты сборки (v1–v5) в папке builds/.
> - Файлы TESTING\_GUIDE.md и TEST\_RESULTS.md с документацией по ручной валидации.
>
> ### Улучшения существующих функций
>
> - Элементы и вкладки F-NAV
> - Добавлен видимый getter visibleTabs для учёта групповой видимости.
> - Интеграция нового компонента CustomSubmenu в поток FNavItem.
>
> - Меню профиля/аватара в заголовке
> - Определение мобильного вида перемещено внутрь компонента, что улучшило поведение и устранило предупреждения.
> - Дополнительные элементы профиля теперь поддерживают групповую видимость.
>
> - Стилизация и доступность
> - Новый SCSS для пользовательского подменю и иконки «Назад».
> - Последовательные состояния наведения/активности/focus-visible.
> - Последовательный border-radius с использованием переменных ядра; улучшенные отступы (например, отступ кнопки «Назад» установлен в 0).
>
> ### Исправления ошибок и поддержка
>
> - Устранены предупреждения об устаревании site.mobileView путём переноса проверок из инициализаторов в рендеринг компонентов.
> - Исправлен случайный сбой рендеринга путём вынесения функции из блока.
> - Небольшие доработки для соответствия поведению заголовка Discourse (состояния наведения/активности, переходы непрозрачности).
> - Небольшие правки CSS (например, убедиться, что отступ кнопки «Назад» равен нулю, предотвратить случайные изменения размеров).
>
> * * *
>
> ## Сравнение высокого уровня (Оригинал vs Форк)
>
> - Оригинал (main): Мобильные вкладки F-NAV + опциональный импорт чата; нет кнопки «Назад» или пользовательского подменю.
> - Форк (feat/home-logo-arrow-back):
> - Добавлена функция иконки «Назад» в заголовке с резервным маршрутизированием.
> - Введена функция вкладки «customMenu» с настраиваемыми элементами подменю.
> - Добавлена групповая видимость для вкладок, элементов подменю и элементов профиля.
> - Опциональное скрытие F-NAV на страницах тем.
> - Улучшена доступность (a11y) и согласованность состояний взаимодействия.
> - Предоставлена документация по тестированию и упакованные сборки.
**Примечания:**
- Этот компонент предназначен для последних версий Discourse, поддерживающих уровень API плагинов Discourse 1.14+ (как указано в инициализаторах).
- Если вы используете групповую видимость, сначала убедитесь, что группы и членство в них настроены.
* * *
Предупреждение: Пожалуйста, тестируйте с осторожностью, так как я не программист, а TC был создан и протестирован полностью с помощью ИИ.
Спасибо Дон за этот отличный компонент — это прекрасное дополнение к UX/UI Discourse! ❤
---
### Author:  [@nicolsdennis](https://meta.discourse.org/u/nicolsdennis)
#### Post date: [04.Март.2026 17:55:11 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/74 "2026-03-04T17:55:11Z")
Привет! Похоже, ваш CSS скрывает текущего пользователя по умолчанию, даже если в настройках не включена соответствующая опция. То есть правило CSS display: none прописано жестко. Было бы здорово, если бы это можно было изменить.
Касательно кастомного меню, которое вы создали: есть ли способ настроить цвет его элементов?
---
### Author:  [@joo](https://meta.discourse.org/u/joo)
#### Post date: [19.Март.2026 15:15:12 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/75 "2026-03-19T15:15:12Z")
> [@joo](#):
>
> 
>
> 
>
> При использовании темы Horizon один из компонентов в списке тем вызывает появление пустой области в верхней части (область логотипа/элементов) при прокрутке.
Проблема с белым пространством в верхней части снова появилась на мобильных устройствах. Я обновил всё, но это всё ещё происходит.
---
### Author:  [@gilles](https://meta.discourse.org/u/gilles)
#### Post date: [20.Март.2026 19:39:34 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/76 "2026-03-20T19:39:34Z")
После последнего обновления Discourse компонент f-nav вызывает падение Discourse на Android. 😭
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [20.Март.2026 20:28:13 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/77 "2026-03-20T20:28:13Z")
Привет 👋
Спасибо за отчёт! Я объединил обновление, которое исправляет проблемы, с которыми вы столкнулись в последней версии Discourse. Пожалуйста, обновите компонент темы!
>
>
> This update fixes the latest Discourse compatibility issues and fixes the "viewp…ort based" warnings mobileView...
---
### Author:  [@joo](https://meta.discourse.org/u/joo)
#### Post date: [18.Апрель.2026 03:46:54 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/78 "2026-04-18T03:46:54Z")
> [@joo](#):
>
> > [@joo](#):
> >
> > 
> >
> > 
> >
> > При использовании темы Horizon один из компонентов в списке тем вызывает появление пустой области в верхней части (область логотипа/элементов) при прокрутке.
>
> При использовании мобильного устройства проблема с пустой областью в верхней части снова возникает. Я обновил всё, но проблема сохраняется.
```plaintext
body.f-nav-hidden .d-header-wrap {
animation: none !important;
opacity: 1 !important;
z-index: 1000 !important;
}
```
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [20.Август.2026 13:36:37 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/79 "2026-08-20T13:36:37Z")
Я наблюдаю такое же поведение и с плавающей временной шкалой на мобильных устройствах:
Обратите внимание, что я тестирую навигационную панель с немного большей высотой (место для кнопок), но, по-моему, общая проблема с этим не связана.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [20.Август.2026 19:37:26 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/80 "2026-08-20T19:37:26Z")
Привет 👋
Спасибо, я внёс некоторые обновления здесь. [UX: Nav bar fixes and nested replies support - Pull Request #9 - VaperinaDEV/f-nav-for-mobile - GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile/pull/9)
> [@satonotdead](#):
>
> Обрати внимание, что я тестирую навигационную панель с немного большей высотой
Примечание: позиция рассчитывается на основе переменной `--f-nav-height`, поэтому, если ты меняешь высоту, используй её.
Можно добавить кнопку с переходом `/new-topic` ⬇
> [@Don](#):
>
> Например, добавление вкладки для создания темы будет выглядеть примерно так.
>
> 
>
> 
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [20.Август.2026 19:52:04 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/81 "2026-08-20T19:52:04Z")
Превосходно, спасибо! Возможно ли реализовать динамический ответ этого кнопки в темах, или стоит ли об этом думать?
Просто делюсь идеями. Я использую ваш компонент темы как есть, и он один из моих любимых 👌
> _С помощью этой динамической кнопки компонент темы должен также уметь скрывать стандартную кнопку ответа, как он уже делает с кнопкой-гамбургером и кнопкой в правом верхнем углу._
>
> _Я думаю, это позволит отображать нижнюю навигацию в темах в одну строку и сделать всё более аккуратным._
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [31.Август.2026 22:00:54 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/82 "2026-08-31T22:00:54Z")
Не могли бы вы отменить действие по открытию чатов ИИ после входа в чат, так, как это происходит по умолчанию при нажатии на стандартную иконку вверху?
Сейчас, когда чат ИИ открывается из F NAV, нет способа вернуться на главный экран Discourse.
Надеюсь, это станет возможно; мне очень нравятся кнопки внизу 🙂
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [01.Сентябрь.2026 00:26:49 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/83 "2026-09-01T00:26:49Z")
Можете ли вы предоставить несколько скриншотов, чтобы я понял, что именно вы имеете в виду? 😊
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [01.Сентябрь.2026 19:54:37 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/84 "2026-09-01T19:54:37Z")
Конечно! При настройке кнопки F NAV на путь `/discourse-ai/ai-bot/conversations` _(и ручном скрытии иконки чата ИИ-бота в правом верхнем углу на мобильных устройствах)_, путь работает, но нет способа вернуться на форум.
Вот поведение по умолчанию, которое F NAV может имитировать для этой конкретной кнопки, чтобы обеспечить возможность `вернуться на форум`:
> **ПРИМЕЧАНИЕ:** Настройка для включения этой иконки — `ai_bot_add_to_header`
[Предыдущая страница](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277.md?page=3)
[Следующая страница](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277.md?page=5)