48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { LayoutDashboard, Ticket, DollarSign } from 'lucide-react';
|
|
|
|
const NAV = [
|
|
{ href: '/mobile/dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ href: '/mobile/tickets', label: 'Tickets', icon: Ticket },
|
|
{ href: '/mobile/finance', label: 'Finance', icon: DollarSign },
|
|
];
|
|
|
|
export default function MobileLayout({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-background max-w-lg mx-auto">
|
|
{/* Top bar */}
|
|
<header className="sticky top-0 z-20 bg-background border-b px-4 py-3 flex items-center justify-between">
|
|
<span className="font-bold text-lg tracking-tight">Pulse</span>
|
|
<span className="text-xs text-muted-foreground">Wulf Consulting</span>
|
|
</header>
|
|
|
|
{/* Page content */}
|
|
<main className="flex-1 overflow-y-auto pb-20">
|
|
{children}
|
|
</main>
|
|
|
|
{/* Bottom nav */}
|
|
<nav className="fixed bottom-0 left-0 right-0 z-20 border-t bg-background max-w-lg mx-auto">
|
|
<div className="flex">
|
|
{NAV.map(({ href, label, icon: Icon }) => {
|
|
const active = pathname.startsWith(href);
|
|
return (
|
|
<Link key={href} href={href}
|
|
className={`flex-1 flex flex-col items-center justify-center gap-0.5 py-2.5 text-xs transition-colors
|
|
${active ? 'text-primary' : 'text-muted-foreground hover:text-foreground'}`}
|
|
>
|
|
<Icon className="w-5 h-5" />
|
|
<span>{label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|