a75d4f5d69
Topbar (mobile-topbar.tsx):
- Bumped to 56px to match standard mobile-app proportions.
- Deep-navy gradient surface (#1e2844 -> #171f35) with white type —
matches the desktop sidebar identity, gives the app a premium
finish instead of generic white-with-text.
- Brand "PN" wordmark mark on the left when no back affordance is
needed (rounded brand-blue square, inset highlight + drop shadow).
- Soft glow shadow underneath for elevation depth instead of a hard
bottom border.
- White-on-navy back arrow with active-state translucent fill.
PageHeader (page-header.tsx):
- On mobile, the gradient hero strip + duplicate title + description
block now collapses entirely — the topbar already shows the title,
so duplicating it in the body wasted a third of the viewport.
- The actions slot remains rendered as a flush right-aligned row so
primary buttons (date-range pickers, "+ New X") stay accessible.
- Desktop rendering is untouched.
Mobile shell (mobile-layout.tsx):
- Top buffer 16px below the topbar so content doesn't ride flush.
- Bottom buffer 32px above the tab bar so the last card breathes.
CSS (globals.css):
- Hide the react-query-devtools floating button below lg: — it was
overlapping the bottom-tab bar's "More" affordance.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { ChevronLeft } from 'lucide-react';
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { useMobileChrome } from './mobile-layout-provider';
|
|
|
|
/**
|
|
* Fixed mobile topbar (56px + safe-area top inset). Marina-editorial premium:
|
|
* deep-navy gradient surface with white type, the brand "PN" mark on the
|
|
* left when there's no back affordance, and a soft glow shadow underneath
|
|
* for depth instead of a hard divider line.
|
|
*
|
|
* Slots: title (auto-truncating), back arrow, primary action — all driven by
|
|
* `useMobileChrome()` from the active page. When no page has set a title the
|
|
* URL's last segment is title-cased as a fallback.
|
|
*/
|
|
export function MobileTopbar() {
|
|
const { title, primaryAction, showBackButton } = useMobileChrome();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const fallbackTitle =
|
|
pathname
|
|
.split('/')
|
|
.filter(Boolean)
|
|
.pop()
|
|
?.replace(/-/g, ' ')
|
|
.replace(/\b\w/g, (c) => c.toUpperCase()) ?? 'Port Nimara';
|
|
|
|
return (
|
|
<header
|
|
className={cn(
|
|
'fixed top-0 inset-x-0 z-40',
|
|
'bg-gradient-to-b from-[#1e2844] to-[#171f35]',
|
|
'shadow-[0_4px_18px_-6px_rgba(15,23,42,0.45)]',
|
|
'h-[calc(56px+env(safe-area-inset-top))] pt-safe-top',
|
|
'flex items-center gap-2 px-3',
|
|
)}
|
|
>
|
|
{showBackButton ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => router.back()}
|
|
aria-label="Go back"
|
|
className={cn(
|
|
'size-11 inline-flex items-center justify-center rounded-full -ml-1',
|
|
'text-white/95 active:bg-white/10 transition-colors',
|
|
)}
|
|
>
|
|
<ChevronLeft className="size-[22px] stroke-[2.25]" />
|
|
</button>
|
|
) : (
|
|
<div
|
|
aria-label="Port Nimara"
|
|
className={cn(
|
|
'size-9 shrink-0 rounded-lg flex items-center justify-center',
|
|
'bg-[#3a7bc8] shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_1px_2px_rgba(0,0,0,0.25)]',
|
|
)}
|
|
>
|
|
<span className="text-white font-bold text-[13px] tracking-tight">PN</span>
|
|
</div>
|
|
)}
|
|
|
|
<h1
|
|
className={cn(
|
|
'flex-1 min-w-0 truncate text-center',
|
|
'text-[17px] font-semibold tracking-tight text-white',
|
|
)}
|
|
>
|
|
{title ?? fallbackTitle}
|
|
</h1>
|
|
|
|
<div className="size-11 inline-flex items-center justify-center text-white/95">
|
|
{primaryAction}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|