56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import { useLocation } from '@tanstack/react-router'
|
|
import { BottomNavigation } from './BottomNavigation'
|
|
import { FloatingCartBar } from './FloatingCartBar'
|
|
import { Sidebar } from './shell/Sidebar'
|
|
import { Topbar } from './shell/Topbar'
|
|
|
|
interface AppLayoutProps {
|
|
children: React.ReactNode
|
|
showCartBar?: boolean
|
|
isFlashDelivery?: boolean
|
|
hideShell?: boolean
|
|
}
|
|
|
|
// Routes where the full shell (sidebar/topbar/bottom nav) should be hidden
|
|
const hideShellRoutes = ['/login', '/register', '/checkout', '/home/checkout', '/flash/checkout']
|
|
|
|
export function AppLayout({
|
|
children,
|
|
showCartBar = true,
|
|
isFlashDelivery = false,
|
|
hideShell = false,
|
|
}: AppLayoutProps) {
|
|
const location = useLocation()
|
|
const currentPath = location.pathname
|
|
|
|
const shouldHideShell =
|
|
hideShell ||
|
|
hideShellRoutes.some((route) => currentPath === route || currentPath.startsWith(`${route}/`))
|
|
|
|
// On mobile the cart bar replaces the old floating pill
|
|
const shouldShowCartBar = showCartBar && !shouldHideShell
|
|
|
|
if (shouldHideShell) {
|
|
return <main className="min-h-screen">{children}</main>
|
|
}
|
|
|
|
return (
|
|
<div className="shell-grid">
|
|
{/* Desktop rail */}
|
|
<Sidebar />
|
|
|
|
{/* Top bar with search + cart */}
|
|
<Topbar isFlashDelivery={isFlashDelivery} />
|
|
|
|
{/* Main content */}
|
|
<main className="shell-content min-w-0">{children}</main>
|
|
|
|
{/* Cart slide-over (desktop) / bottom bar (mobile) */}
|
|
{shouldShowCartBar && <FloatingCartBar isFlashDelivery={isFlashDelivery} />}
|
|
|
|
{/* Mobile bottom nav */}
|
|
<BottomNavigation />
|
|
</div>
|
|
)
|
|
}
|