lorentz
fea62382de
- AppNavigation returns null on /mobile/* (no more horizontal scroll) - Mobile header: 'Pulse' title (links home) + Menu icon (links to /mobile/nav) - /mobile/nav: full-screen nav page with touch-friendly cards - Mobile Views: Dashboard, Tickets, Finance (large icon cards) - Full Site: Quotes, Config Items, Backup, Engagement, Ticket Digest, Admin - Sign out button - Bottom tab bar unchanged (Dashboard / Tickets / Finance)
50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { LayoutDashboard, Ticket, DollarSign, Menu } 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">
|
|
<Link href="/mobile" className="font-bold text-lg tracking-tight">Pulse</Link>
|
|
<Link href="/mobile/nav" className="p-1.5 rounded-lg hover:bg-accent transition-colors" aria-label="Navigation menu">
|
|
<Menu className="w-5 h-5" />
|
|
</Link>
|
|
</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>
|
|
);
|
|
}
|