yiekheng
3bfd35ef8d
Adds viewportFit: 'cover' so the PWA can draw under the notch / Dynamic Island when installed. Nav and Toast read env(safe-area-inset-*) to keep their content out of the hardware cutouts (no-op on browsers without a notch — env() resolves to 0). Replaces autoFocus on the first field of CreateAccountDialog and CreateUserDialog with a useEffect that only focuses on pointer devices (matchMedia '(hover: hover) and (pointer: fine)'). Phones no longer get the soft keyboard popping the instant a dialog opens.
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export default function Nav() {
|
|
const pathname = usePathname() ?? "/";
|
|
const isUsers = pathname.startsWith("/users");
|
|
const isAccounts = !isUsers;
|
|
|
|
return (
|
|
<header
|
|
className="sticky top-0 z-10 border-b border-zinc-200/80 bg-white/80 backdrop-blur-md"
|
|
style={{
|
|
// Push content below the iPhone notch when the PWA is installed.
|
|
// No-op on browsers without a notch (env() resolves to 0).
|
|
paddingTop: "env(safe-area-inset-top)",
|
|
paddingLeft: "env(safe-area-inset-left)",
|
|
paddingRight: "env(safe-area-inset-right)",
|
|
}}
|
|
>
|
|
<div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6">
|
|
<Link href="/" className="group flex items-center gap-3">
|
|
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 text-[11px] font-semibold tracking-tight text-white">
|
|
CM
|
|
</span>
|
|
<span className="hidden flex-col leading-none sm:flex">
|
|
<span className="text-sm font-semibold tracking-tight text-zinc-900">
|
|
CM Bot V2
|
|
</span>
|
|
<span className="mt-0.5 text-[11px] text-zinc-500">
|
|
Account dashboard
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
|
|
<nav
|
|
aria-label="Primary"
|
|
className="flex items-center gap-1 rounded-full bg-zinc-100 p-1"
|
|
>
|
|
<NavLink href="/" active={isAccounts}>
|
|
Accounts
|
|
</NavLink>
|
|
<NavLink href="/users" active={isUsers}>
|
|
Users
|
|
</NavLink>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
function NavLink({
|
|
href,
|
|
active,
|
|
children,
|
|
}: {
|
|
href: string;
|
|
active: boolean;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
aria-current={active ? "page" : undefined}
|
|
className={`inline-flex items-center rounded-full px-4 py-1.5 text-xs font-medium transition-colors sm:text-sm ${
|
|
active
|
|
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200/60"
|
|
: "text-zinc-500 hover:text-zinc-900"
|
|
}`}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|