Após a nova atualização, isso não está mais funcionando. @Don você fez alguma alteração relevante ou algo assim?
Olá 
Não, acho que não. A última alteração foi há 2 meses. Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub
Sim, voltou a funcionar tudo. Alguns outros componentes do tema estavam causando o problema.
1 curtida
Olá Hmm, não consigo reproduzir isso… qual dispositivo e navegador você usa?
Olá Don, obrigado pela resposta.
É muito estranho. Abaixo estão vários navegadores que testei, e o mesmo fenômeno ocorreu. 
Navegador Edge no PC
Aplicativo Discourse Hub do iPhone
Safari do iPhone
Edge do Android
Usei o seguinte CSS para ajustar a posição, e funcionou muito bem.
/* Use Flexbox para centralizar chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
display: flex;
justify-content: center;
align-items: center;
position: relative; /* Garante que o contêiner tenha um contexto de posicionamento */
}
/* Garante que os estilos do elemento de número não interfiram na centralização */
.chat-channel-unread-indicator__number {
display: inline-flex;
align-items: center;
justify-content: center;
}
2 curtidas
Parece legal. Seria bom mostrar também para usuários não logados.
@Don você aceita PRs? Adicionei um recurso para adicionar funções extras para abrir um menu modal onde você pode adicionar itens adicionais.
Em nosso caso de uso, queremos criar um submenu para ter várias variações ao criar um novo tópico (por exemplo, enviar um relatório de bug, enviar uma solicitação de suporte, enviar uma ideia, criar um novo diário ou criar um novo tópico regular)
Veja: GitHub - jrgong420/f-nav-for-mobile: F NAV - Mobile Navigation Tabs
4 curtidas
Atualização rápida sobre meu Fork de “F-NAV para Mobile” com Botão Voltar, Submenu Personalizado e Controles de Visibilidade
Por que este fork?
- Fornece um botão “Voltar” no cabeçalho das páginas de tópico que espelha a UX comum de aplicativos móveis
- Oferece um tipo de aba “customMenu” que abre um submenu configurável (ideal para vincular a vários destinos; usamos para adicionar links personalizados pré-preenchidos de “Novo Tópico”)
- Adiciona visibilidade baseada em grupos para abas e itens de menu, para que você possa mostrar certos itens apenas para a equipe, etc.
- Pequenas correções com algumas depreciações e polimento de estilos/acessibilidade
Resumo sobre os recursos recém-adicionados aqui
- Ícone de Voltar no Cabeçalho (opcional)
- Substitui o logotipo inicial no cabeçalho por uma seta de voltar nas páginas de tópico
- Comportamento: volta se houver histórico, caso contrário, roteia para “/”
- Alternar com a configuração:
header_back_icon_enabled
- Tipo de aba Submenu Personalizado
- Nova função f_nav_tabs: customMenu
- Nova configuração: f_nav_submenu_items
- Configura itens de menu com rótulo e URL (ícone opcional)
- Ótimo para acesso rápido a várias páginas a partir de uma única aba
- Controles de visibilidade baseados em grupo
- Abas, itens de submenu e profile_extra_items podem ser limitados a grupos selecionados
- Comportamento:
- Grupos vazios => visível para todos
- Se grupos definidos => apenas membros de pelo menos um grupo selecionado podem ver
- Usuários anônimos não podem ver itens restritos
- Opcional: Ocultar barra de navegação em páginas de tópico
- Alternar com a configuração: hide_nav_in_topic
- Artefatos de “build” compactados e documentação de testes
- Artefatos de build de conveniência (v1–v5) em builds/
- TESTING_GUIDE.md e TEST_RESULTS.md documentando validação manual
Melhorias em recursos existentes
- Itens e abas do F‑NAV
- Adiciona o getter visibleTabs para respeitar a visibilidade do grupo
- Integra o novo componente CustomSubmenu no fluxo do FNavItem
- Avatar/menu de perfil no cabeçalho
- Detecção de visualização móvel movida para o componente, melhorando o comportamento e resolvendo avisos
- Itens extras de perfil agora suportam visibilidade baseada em grupo
- Estilização e acessibilidade
- Novo SCSS para o submenu personalizado e o ícone de voltar
- Estados consistentes de hover/ativo/focus-visible
- Raio de borda consistente com variáveis principais; preenchimento/espaçamento refinado (por exemplo, preenchimento do botão de voltar definido como 0)
Correções de bugs e manutenção
- Resolve avisos de depreciação de site.mobileView movendo verificações de inicializadores para a renderização do componente
- Corrige um caso de borda de renderização movendo uma função para fora do bloco
- Pequeno polimento para corresponder aos comportamentos do cabeçalho do Discourse (estados de hover/ativo, transições de opacidade)
- Pequenos ajustes de CSS (por exemplo, garantir que o preenchimento do botão de voltar seja zero, evitar mudanças acidentais de dimensionamento)
Comparação de alto nível (Branch Original vs. Forked)
- Original (main): Abas móveis F‑NAV + importação opcional de chat; sem botão de voltar ou submenu personalizado
- Fork (feat/home-logo-arrow-back):
- Adiciona recurso de ícone de voltar no cabeçalho com fallback de roteamento
- Introduz a função de aba “customMenu” com itens de submenu configuráveis
- Adiciona visibilidade restrita por grupo para abas, itens de submenu e itens de perfil
- Opcionalmente oculta o F‑NAV em páginas de tópico
- Melhora a a11y e a consistência dos estados de interação
- Fornece documentação de testes e builds empacotados
Observações:
- Este componente visa versões recentes do Discourse que suportam o nível 1.14+ da API de Plugins do Discourse (conforme indicado nos inicializadores)
- Se você depende de visibilidade baseada em grupo, certifique-se de que seus grupos e associações estejam configurados primeiro
Palavra de aviso: Teste com cautela, pois não sou um programador e o TC foi feito e testado inteiramente com IA. Funciona melhor com 3.6beta1.
Parabéns a Don por este ótimo componente; é uma adição fantástica! 
3 curtidas
Olá, seu CSS parece ocultar o usuário atual padrão sem alternar a opção nas configurações, então a regra CSS display: none está codificada. Agradeceria se não fosse esse o caso.
O menu personalizado que você criou, há alguma maneira de estilizar a cor dos itens?
Este problema do espaço em branco na parte superior apareceu novamente no celular. Eu atualizei tudo, mas ainda acontece.
Desde a última atualização do Discourse, o componente f-nav está fazendo o Discourse travar no Android. 
2 curtidas
Olá 
Obrigado pelo relatório! Eu fiz o merge de uma atualização para corrigir os problemas que você encontrou na versão mais recente do Discourse. Por favor, atualize o tema componente!
6 curtidas
body.f-nav-hidden .d-header-wrap {
animation: none !important;
opacity: 1 !important;
z-index: 1000 !important;
}
Eu vejo esse comportamento também na linha do tempo com estilo flutuante no mobile:
Note que estou testando a barra de navegação com um pouco mais de altura (espaço para os botões), mas acho que o problema geral não está relacionado a isso.
1 curtida
Olá
Obrigado, fiz algumas atualizações aqui. UX: Nav bar fixes and nested replies support - Pull Request #9 - VaperinaDEV/f-nav-for-mobile - GitHub
Nota: A posição é calculada a partir da variável --f-nav-height, então, se você alterar a altura, use essa variável.
É possível adicionar um botão com o destino /new-topic 
1 curtida
Maravilhoso, obrigado! É possível ou ao menos algo a ser considerado sonhar em ter este botão respondendo dinamicamente nos tópicos?
Só compartilhando ideias. Estou usando seu componente de tema como está, e ele é um dos meus favoritos 
Com este botão dinâmico, o Componente de Tema também deveria ser capaz de ocultar o botão de resposta padrão, assim como já faz com os botões do menu hambúrguer e do canto superior direito.
Acho que isso permitirá exibir a navegação inferior nos tópicos em uma única linha e exibir tudo de forma mais limpa.
Seria possível desfazer a ação de abrir os chats de IA após entrar no chat, da mesma forma que acontece por padrão ao clicar no ícone padrão no topo?
Atualmente, ao abrir o chat de IA a partir do F NAV, não há como voltar para a tela principal do Discourse.
Espero que isso seja possível; eu realmente gosto dos botões na parte inferior 
1 curtida
Você pode enviar algumas capturas de tela para que eu entenda exatamente o que você quer dizer? 
1 curtida
Claro! Ao apontar um botão do F NAV para `/discourse-ai/ai-bot/conversations` (e ocultando manualmente o ícone no canto superior direito para o chat do AI Bot no mobile), o caminho funciona, mas não há como voltar ao fórum.
Este é o comportamento padrão que o F NAV poderia imitar neste botão específico para permitir o comportamento de `voltar ao fórum`:
NOTA: A configuração para habilitar esse ícone é
ai_bot_add_to_header
1 curtida