# KA Tabbar v1 — barre de navigation mobile commune Groupe KA (2026-08-25)
Langage de navigation mobile commun à l'écosystème : pilule flottante fixe
en bas d'écran, détachée des bords (12 px + safe-area iOS), inspirée de la
barre Immo-Ka et généralisée en design system. C'est le moyen PRINCIPAL de
navigation sur mobile (≤ 760 px) ; le hamburger garde les fonctions
secondaires (stats, sources, contact, légal…).
# Fichiers canoniques (ce dossier)
| Fichier |
Rôle |
ka-tabbar.css |
Styles complets — copie conforme dans src/ka/ka-tabbar.css de chaque app |
KaTabbar.tsx |
Composant React (react-router) + jeu d'icônes intégré — copie dans src/ka/ |
ka-tabbar.js |
Version vanilla (KaTabbar.mount({...})) pour les sites sans React |
TABBAR-STANDARD.md |
Ce document |
# Spécifications
- Dimensions : onglets min-height 50 px, padding pilule 5 px, radius 18 px,
max-width 440 px centrée, icônes 21 px stroke 1.7, labels 10 px/650.
- Position :
position: fixed; left/right: max(12px, env(safe-area-inset-*)); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: var(--z-bottombar, 600).
- Fond : off-white translucide + blur 14 (clair) ou
.ka-tabbar--dark
(encre) ; surcharger --ktb-bg pour un fond de marque (ex. vert profond
fabri-ka). Pas de glassmorphism appuyé.
- État actif : icône = couleur signature (
--ktb-accent), label = encre,
trait 16×2.5 accent sous le label. Micro-interactions : pop d'icône 0.25 s,
apparition du trait 0.22 s, press = scale 0.9 (désactivées en
prefers-reduced-motion).
- Cohabitation :
body:has(.ka-tabbar) reçoit un padding-bottom 84 px ;
body:has(.cta-sticky) masque la pilule (le CTA de fiche prend le bas) ;
le widget KA Agent (.kaa-btn) est remonté au-dessus de la pilule.
- Onglets : 4 (5 max).
to (route), href (externe, ex. hub univers KA)
ou onPress (action — ex. ouvrir/focus la recherche). Le composant ne
devine PAS l'état actif : l'app le calcule (useLocation / routeur maison).
# Configurations par app (déployé 2026-08-25)
| App |
Onglets |
Accent actif |
Thème |
Notes |
| immo-ka |
Découvrir · Carte · Taux · Profil |
lime |
clair |
barre d'origine (base du standard), classes .tabbar historiques |
| auto-ka |
Découvrir · Recherche · Favoris · Profil |
#ff5a2a |
clair |
Recherche = focus recherche accueil ; Favoris = hub groupe-ka.com/compte |
| food-ka |
Produits · Recherche · Soldes · Favoris |
#1f9d55 |
clair |
Soldes = /aubaines ; Favoris = hub groupe-ka.com/compte |
| fabri-ka |
Accueil · Produits · Boutiques · Recherche |
ambre sur vert profond |
sombre (--ktb-bg #123f2e) |
Recherche = overlay plein écran existant |
| resto-ka |
Découvrir · Recherche · Villes · Favoris |
#f08c00 |
clair |
pas de carte dans l'app → Villes (icône pin) |
| sorti-ka |
Découvrir · Recherche · Carte · Favoris |
#d6336c |
clair |
vanilla ; Carte = vue résultats + bascule carte |
| vrai-prix |
Estimer · Marché · Ventes · Méthode |
#d8372e |
clair |
Next.js (variante src/ka/KaTabbar.tsx avec next/link) ; bilingue fr/en ; Estimer = focus recherche d'adresse (id vp-adresse) ; Ventes = ancre /#ventes |
# Intégration (app React/Vite)
- Copier
ka-tabbar.css + KaTabbar.tsx dans frontend/src/ka/.
- Dans
App.tsx : composer les onglets avec useLocation (état actif) et
monter <KaTabbar tabs={…} /> après <main> ; retirer toute ancienne
barre basse et ses styles.
- Onglet Recherche :
onPress qui navigue vers l'accueil puis focus le champ
de recherche (setTimeout ~80 ms après navigation).
- Vérifier : padding-bottom du body, footer non masqué, widget KA Agent
dégagé, aucun doublon header/tabbar sur mobile.
- Build +
pm2 restart + healthcheck + commit/push (spbgit).
# Règles UX
- La pilule ne doit JAMAIS masquer un CTA, un résultat ou un bouton de filtre
(le padding-bottom du body est là pour ça ; les feuilles/sheets passent
au-dessus via
--z-modal).
- Jamais plus de 5 onglets ; labels d'un seul mot ; fr-CA.
- L'identité de marque passe par
--ktb-accent (et --ktb-bg sombre au
besoin) — dimensions, spacing et animations restent IDENTIQUES partout.