65 lines
1.9 KiB
TypeScript
65 lines
1.9 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']
|
|
|
|
// Routes that render their own top bar UI — skip the global Topbar there
|
|
const selfTopbarRoutes = ['/home/search']
|
|
|
|
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}/`))
|
|
|
|
const hasOwnTopbar = selfTopbarRoutes.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 />
|
|
|
|
<div className="shell-main">
|
|
{/* Single top bar — logo + search + cart (desktop) / search only (mobile) */}
|
|
{!hasOwnTopbar && <Topbar isFlashDelivery={isFlashDelivery} />}
|
|
|
|
{/* Main content */}
|
|
<main className="shell-content min-w-0">{children}</main>
|
|
</div>
|
|
|
|
{/* Cart slide-over (desktop) / bottom bar (mobile) */}
|
|
{shouldShowCartBar && <FloatingCartBar isFlashDelivery={isFlashDelivery} />}
|
|
|
|
{/* Mobile bottom nav */}
|
|
<BottomNavigation />
|
|
</div>
|
|
)
|
|
}
|