| Resumo | F NAV - Abas de Navegação para Mobile | |
| Visualização | Theme Creator | |
| Repositório | GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub | |
| Guia de Instalação | Como instalar um tema ou componente de tema | |
| Novo nos Temas Discourse? | Guia para iniciantes sobre o uso de Temas Discourse |
Instale este componente de tema
Olá ![]()
Anteriormente, criei um tópico Development topic sobre ele como um conceito de componente de tema e agora ele está em um estado pronto para ser um Customization > Theme component.
Certifique-se de testá-lo antes de usar em produção.
Algumas informações aqui sobre o componente: F NAV - Theme component concept
Sobre o componente de tema. Li muitos posts sobre como seria maravilhoso tornar a Barra de Abas do Discourse para Mobile mais dinâmica e adicionar a capacidade de lidar com, por exemplo, notificações etc… O F-NAV pode fazer isso e muito mais…
Cabeçalho
Ele oculta o ícone de hambúrguer, o menu do usuário, a busca e o chat, e adiciona um botão de menu do perfil (avatar) que contém o conteúdo da aba de perfil do menu do usuário padrão.
Configurações
Ele também contém uma configuração onde você pode adicionar itens personalizados antes do item “Sair”.
Ele contém três campos onde você pode adicionar facilmente itens personalizados.
Existem algumas configurações para mostrar/ocultar os ícones do cabeçalho padrão, o que é útil quando você não deseja colocar a aba exata no F NAV, para que ela seja exibida no cabeçalho.
Abas
É possível associar diferentes funções às abas. Essas funções permitem que cada aba mude dinamicamente.

Essas mudanças incluem:
Funções
home
- altera o ícone da aba inicial nas rotas de tópico para uma seta para a esquerda, que adiciona uma função de voltar

- adiciona um indicador de ponto para novos ou não lidos

hamburger (abre o menu hambúrguer)
multi
multi tab
A aba Multi muda automaticamente para a aba de mensagens se o chat não estiver habilitado ou se o usuário o desativar nas
configurações do usuário.
A bolha de notificações muda conforme é urgente ou não.
As notificações urgentes da aba Multi são verdes e têm esta aparência. ![]()
Expandido
A mensagem pessoal é sempre verde, mas o chat pode ser azul, como originalmente para, por exemplo, notificação de mensagem de canal não lida.
Expandido
Notificação única
message
- adiciona o botão de mensagens com notificações e, ao clicar nele, abre um modal de mensagens para uma visualização rápida
chat
- adiciona o botão de chat com suas funções
notificationToRoute
-
se o modo “Não Perturbe” estiver ativo, o ícone do sino mudará para o ícone de sino com barra e o tempo restante do DND aparecerá

-
redireciona para a página de notificações do perfil, ignorando o menu de notificações
- se houver uma notificação, redireciona para
/notifications?filter=unread - se não houver notificação, redireciona para
/notifications - se houver conteúdo revisável, aparecerá uma bandeira vermelha e redireciona para
/review
- se houver uma notificação, redireciona para
notificationMenu
-
se o modo “Não Perturbe” estiver ativo, o ícone do sino mudará para o ícone de sino com barra e o tempo restante do DND aparecerá

-
abre o menu de notificações
search
- redireciona para a página
/searchbaseada no contexto
Configurações
Tentei tornar as configurações o mais simples possível.
Elas conterão quatro campos.
- name: Isso serve apenas para facilitar a identificação da aba nas configurações.
- icon: Adiciona um ícone à aba. Nota: Se você selecionar uma função, pode haver ícones que não podem ser substituídos por esta configuração.
- destination: Adiciona um destino para sua aba personalizada. Nota: Se você selecionar uma função que lidará com o destino, você pode deixá-la vazia. O componente converte automaticamente os destinos
/my/...para/u/username/...para que o status ativo da aba possa ser adicionado corretamente. - function: Escolha uma função para a aba.
Os administradores podem criar/remover/alterar abas facilmente e selecionar uma das funções ou adicionar um destino personalizado à aba.
Funções ![]()
Por exemplo, adicionar uma aba de criação de tópico simplesmente ficará assim.
Créditos: Discourse Tab Bar for Mobile e obrigado a todos pelos feedbacks no tópico F NAV - Theme component concept. ![]()


















