62 lines
2.7 KiB
JavaScript
62 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import {
|
|
LayoutGrid,
|
|
Search,
|
|
Users,
|
|
MessageSquare,
|
|
User,
|
|
Bell
|
|
} from 'lucide-react';
|
|
|
|
export default function EmployerMobileLayout({ children, title }) {
|
|
const { url } = usePage();
|
|
|
|
const navItems = [
|
|
{ label: 'Home', icon: LayoutGrid, href: '/mobile/employer/home' },
|
|
{ label: 'Find Workers', icon: Search, href: '/mobile/employer/workers' },
|
|
{ label: 'Candidates', icon: Users, href: '/mobile/employer/candidates' },
|
|
{ label: 'Chat', icon: MessageSquare, href: '/mobile/employer/messages', badge: 3 },
|
|
{ label: 'Profile', icon: User, href: '/mobile/employer/profile' },
|
|
];
|
|
|
|
const isActive = (href) => url.startsWith(href);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F9FA] font-sans text-[#141B34] flex flex-col max-w-md mx-auto relative">
|
|
{/* Content Area */}
|
|
<main className="flex-1 overflow-y-auto pb-24">
|
|
{children}
|
|
</main>
|
|
|
|
{/* Bottom Navigation */}
|
|
<div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-[#E5E7EB] px-2 py-2 flex items-center justify-between z-50 h-[70px]">
|
|
{navItems.map((item) => {
|
|
const active = isActive(item.href);
|
|
return (
|
|
<Link
|
|
key={item.label}
|
|
href={item.href}
|
|
className={`flex flex-col items-center justify-center flex-1 space-y-1 transition-all relative ${active ? 'text-[#141B34]' : 'text-slate-400'
|
|
}`}
|
|
>
|
|
<div className="relative">
|
|
<item.icon className={`w-6 h-6 ${active ? 'fill-[#141B34]' : ''}`} />
|
|
{item.badge && (
|
|
<div className="absolute -top-1.5 -right-1.5 min-w-[16px] h-4 bg-[#185FA5] text-white text-[8px] font-bold rounded-full flex items-center justify-center border border-white px-1">
|
|
{item.badge}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<span className="text-[9px] font-bold tracking-tight">{item.label}</span>
|
|
{active && (
|
|
<div className="absolute bottom-[-8px] w-1.5 h-1.5 bg-[#141B34] rounded-full" />
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|