130 lines
6.0 KiB
TypeScript
130 lines
6.0 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
HomeIcon,
|
|
RocketLaunchIcon,
|
|
Squares2X2Icon
|
|
} from '@heroicons/react/24/outline';
|
|
import {
|
|
HomeIcon as HomeIconSolid,
|
|
RocketLaunchIcon as RocketIconSolid,
|
|
Squares2X2Icon as GridIconSolid
|
|
} from '@heroicons/react/24/solid';
|
|
|
|
export const MobileBottomBar: React.FC = () => {
|
|
const pathname = usePathname();
|
|
const [showMoreMenu, setShowMoreMenu] = useState(false);
|
|
|
|
const isActive = (path: string) => {
|
|
if (path === '/dashboard') {
|
|
return pathname === '/dashboard';
|
|
}
|
|
return pathname.startsWith(path);
|
|
};
|
|
|
|
const navItems = [
|
|
{
|
|
label: 'Início',
|
|
path: '/dashboard',
|
|
icon: HomeIcon,
|
|
iconSolid: HomeIconSolid
|
|
},
|
|
{
|
|
label: 'CRM',
|
|
path: '/crm',
|
|
icon: RocketLaunchIcon,
|
|
iconSolid: RocketIconSolid
|
|
},
|
|
{
|
|
label: 'Mais',
|
|
path: '#',
|
|
icon: Squares2X2Icon,
|
|
iconSolid: GridIconSolid,
|
|
onClick: () => setShowMoreMenu(true)
|
|
}
|
|
];
|
|
|
|
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;
|
|
|
|
if (item.onClick) {
|
|
return (
|
|
<button
|
|
key={item.label}
|
|
onClick={item.onClick}
|
|
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>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
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>
|
|
|
|
{/* More Menu Modal */}
|
|
{showMoreMenu && (
|
|
<div className="md:hidden fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm" onClick={() => setShowMoreMenu(false)}>
|
|
<div
|
|
className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900 rounded-t-3xl shadow-2xl max-h-[70vh] overflow-y-auto"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="p-6">
|
|
{/* Handle bar */}
|
|
<div className="w-12 h-1.5 bg-gray-300 dark:bg-zinc-700 rounded-full mx-auto mb-6" />
|
|
|
|
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">
|
|
Todos os Módulos
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<Link
|
|
href="/erp"
|
|
onClick={() => setShowMoreMenu(false)}
|
|
className="flex flex-col items-center gap-3 p-4 rounded-2xl hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white shadow-lg">
|
|
<svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-900 dark:text-white text-center">
|
|
ERP
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Add more modules here */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|