41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import { useStore } from '../stores/store';
|
|
|
|
const NAV_CONTEXTS = [
|
|
{ id: 'accueil', label: 'Accueil', icon: '⌂' },
|
|
{ id: 'reunion', label: 'Réunion', icon: '□' },
|
|
{ id: 'affaires', label: 'Affaires', icon: '◇' },
|
|
{ id: 'gestion', label: 'Gestion', icon: '○' },
|
|
];
|
|
|
|
export default function BottomNav() {
|
|
const { navContext, setNavContext, setPage } = useStore();
|
|
|
|
const ouvrirContexte = (id) => {
|
|
setNavContext(id);
|
|
setPage('accueil');
|
|
};
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 inset-x-0 z-40 bg-white/95 border-t border-gray-200 pb-safe shadow-[0_-8px_24px_rgba(15,23,42,0.08)]">
|
|
<div className="grid grid-cols-4 gap-1 px-2 pt-2">
|
|
{NAV_CONTEXTS.map((item) => {
|
|
const actif = navContext === item.id;
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
onClick={() => ouvrirContexte(item.id)}
|
|
className={`min-h-[56px] rounded-xl text-xs font-bold flex flex-col items-center justify-center gap-0.5 transition ${
|
|
actif ? 'bg-aa-blue text-white' : 'text-gray-500 active:bg-gray-100'
|
|
}`}
|
|
>
|
|
<span className="text-xl leading-none">{item.icon}</span>
|
|
<span>{item.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|