119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
HomeIcon,
|
|
UserPlusIcon,
|
|
RectangleStackIcon,
|
|
UsersIcon,
|
|
ListBulletIcon
|
|
} from '@heroicons/react/24/outline';
|
|
import {
|
|
HomeIcon as HomeIconSolid,
|
|
UserPlusIcon as UserPlusIconSolid,
|
|
RectangleStackIcon as RectangleStackIconSolid,
|
|
UsersIcon as UsersIconSolid,
|
|
ListBulletIcon as ListBulletIconSolid
|
|
} from '@heroicons/react/24/solid';
|
|
import { MenuItem } from './SidebarRail';
|
|
|
|
interface MobileBottomBarProps {
|
|
menuItems?: MenuItem[];
|
|
}
|
|
|
|
export const MobileBottomBar: React.FC<MobileBottomBarProps> = ({ menuItems }) => {
|
|
const pathname = usePathname();
|
|
|
|
const isActive = (path: string) => {
|
|
if (path === '/dashboard' || path === '/cliente/dashboard') {
|
|
return pathname === path;
|
|
}
|
|
return pathname.startsWith(path);
|
|
};
|
|
|
|
// Mapeamento de ícones sólidos para os itens do menu
|
|
const getSolidIcon = (label: string, defaultIcon: any) => {
|
|
const map: Record<string, any> = {
|
|
'Dashboard': HomeIconSolid,
|
|
'Leads': UserPlusIconSolid,
|
|
'Listas': RectangleStackIconSolid,
|
|
'CRM': UsersIconSolid,
|
|
'Meus Leads': UserPlusIconSolid,
|
|
'Meu Perfil': UserPlusIconSolid,
|
|
};
|
|
return map[label] || defaultIcon;
|
|
};
|
|
|
|
const navItems = menuItems
|
|
? menuItems.reduce((acc: any[], item) => {
|
|
if (item.href !== '#') {
|
|
acc.push({
|
|
label: item.label,
|
|
path: item.href,
|
|
icon: item.icon,
|
|
iconSolid: getSolidIcon(item.label, item.icon)
|
|
});
|
|
} else if (item.subItems) {
|
|
// Adiciona subitens importantes se o item pai for '#'
|
|
item.subItems.forEach(sub => {
|
|
acc.push({
|
|
label: sub.label,
|
|
path: sub.href,
|
|
icon: item.icon, // Usa o ícone do pai
|
|
iconSolid: getSolidIcon(sub.label, item.icon)
|
|
});
|
|
});
|
|
}
|
|
return acc;
|
|
}, []).slice(0, 4) // Limita a 4 itens no mobile
|
|
: [
|
|
{
|
|
label: 'Dashboard',
|
|
path: '/dashboard',
|
|
icon: HomeIcon,
|
|
iconSolid: HomeIconSolid
|
|
},
|
|
{
|
|
label: 'Leads',
|
|
path: '/crm/leads',
|
|
icon: UserPlusIcon,
|
|
iconSolid: UserPlusIconSolid
|
|
},
|
|
{
|
|
label: 'Listas',
|
|
path: '/crm/listas',
|
|
icon: RectangleStackIcon,
|
|
iconSolid: RectangleStackIconSolid
|
|
}
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Bottom Navigation - Mobile Only */}
|
|
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-zinc-900 border-t border-gray-200 dark:border-zinc-800 shadow-lg">
|
|
<div className="flex items-center justify-around h-16 px-4">
|
|
{navItems.map((item) => {
|
|
const active = isActive(item.path);
|
|
const Icon = active ? item.iconSolid : item.icon;
|
|
|
|
return (
|
|
<Link
|
|
key={item.label}
|
|
href={item.path}
|
|
className="flex flex-col items-center justify-center min-w-[70px] h-full gap-1"
|
|
>
|
|
<Icon className={`w-6 h-6 ${active ? 'text-[var(--brand-color)]' : 'text-gray-500 dark:text-gray-400'}`} />
|
|
<span className={`text-xs font-medium ${active ? 'text-[var(--brand-color)]' : 'text-gray-500 dark:text-gray-400'}`}>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</>
|
|
);
|
|
};
|