| Résumé | F NAV - Onglets de navigation mobile | |
| Aperçu | Theme Creator | |
| Dépôt | GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub | |
| Guide d’installation | Comment installer un thème ou un composant de thème | |
| Nouveau dans les thèmes Discourse ? | Guide du débutant pour utiliser les thèmes Discourse |
Installer ce composant de thème
Bonjour ![]()
J’avais auparavant créé un sujet Development topic pour en faire un concept de composant de thème, et maintenant il est dans un état prêt à devenir un Customization > Theme component.
Assurez-vous de le tester avant de l’utiliser en production.
Quelques informations ici sur le composant : F NAV - Theme component concept
À propos du composant de thème. J’ai lu beaucoup de messages indiquant qu’il serait formidable de rendre la Barre d’onglets Discourse pour mobile plus dynamique et d’ajouter la possibilité de gérer, par exemple, les notifications, etc. F-NAV peut faire cela et bien plus encore…
En-tête
Il masque le bouton hamburger, le menu utilisateur, la recherche et le chat, et ajoute un bouton de menu de profil (avatar) qui contient le contenu de l’onglet de profil du menu utilisateur par défaut.
Paramètres
Il contient également un paramètre où vous pouvez ajouter des éléments personnalisés avant l’élément « Se déconnecter ».
Il comporte trois champs où vous pouvez facilement ajouter des éléments personnalisés.
Il existe quelques paramètres pour afficher/masquer les icônes d’en-tête par défaut, ce qui est utile lorsque vous ne souhaitez pas placer l’onglet exact dans F NAV, auquel cas il sera affiché dans l’en-tête.
Onglets
Il est possible d’associer différentes fonctions aux onglets. Ces fonctions permettent à chaque onglet de changer dynamiquement.

Ces modifications incluent :
Fonctions
home (Accueil)
- change l’icône de l’onglet Accueil sur les routes de sujet en une flèche gauche, ajoutant ainsi une fonction « retour »

- ajoute un indicateur de point pour les nouveaux sujets ou les sujets non lus

hamburger (ouvre le menu hamburger)
multi
multi tab
L’onglet Multi change automatiquement en onglet Messages si le chat n’est pas activé ou si l’utilisateur le désactive dans les paramètres utilisateur.
La bulle de notification change selon qu’elle est urgente ou non.
Les notifications urgentes de l’onglet Multi sont vertes et ont cette apparence. ![]()
Développé
Le message personnel est toujours vert, mais le chat peut être bleu comme à l’origine, par exemple pour la notification de message de canal non lu.
Développé
Notification unique
message
- ajoute un bouton de message avec des notifications et son clic ouvre une modale de messages pour un aperçu rapide
chat
- ajoute un bouton de chat avec ses fonctions
notificationToRoute
-
si le mode « Ne pas déranger » est actif, l’icône de cloche passera à l’icône cloche barrée et le temps restant jusqu’à la fin du mode NPD s’affichera

-
redirige vers la page des notifications de profil en contournant le menu des notifications
- s’il y a des notifications, il redirige vers
/notifications?filter=unread - s’il n’y a pas de notifications, il redirige vers
/notifications - s’il y a du contenu à vérifier, un indicateur rouge apparaîtra et il redirigera vers
/review
- s’il y a des notifications, il redirige vers
notificationMenu
-
si le mode « Ne pas déranger » est actif, l’icône de cloche passera à l’icône cloche barrée et le temps restant jusqu’à la fin du mode NPD s’affichera

-
ouvre le menu des notifications
search
- redirige vers la page
/searchbasée sur le contexte
Paramètres
J’ai essayé de rendre les paramètres aussi simples que possible.
Il comportera quatre champs.
- name : Cela sert uniquement à identifier plus facilement l’onglet dans les paramètres.
- icon : Ajoute une icône à l’onglet. Remarque : Si vous sélectionnez une fonction, il se peut que certaines icônes ne puissent pas être remplacées par ce paramètre.
- destination : Ajoute une destination pour votre onglet personnalisé. Remarque : Si vous sélectionnez une fonction qui gérera la destination, vous pouvez laisser ce champ vide. Le composant convertit automatiquement les destinations
/my/...en/u/username/...afin que l’état actif de l’onglet puisse être ajouté correctement. - function : Choisissez une fonction pour l’onglet.
Les administrateurs peuvent simplement créer/supprimer/modifier des onglets et sélectionner l’une des fonctions ou ajouter une destination personnalisée à l’onglet.
Fonctions ![]()
Par exemple, l’ajout d’un onglet de création de sujet ressemblerait simplement à ceci.
Crédits : Discourse Tab Bar for Mobile et merci à tous pour les retours dans le sujet F NAV - Concept de composant de thème. ![]()


















