dc5bbaa0ae
All checks were successful
Deploy to Production / deploy (push) Successful in 53s
On phones the dashboard top bar is tight with the nav icons + the primary action crammed alongside. Move the action into a sticky bottom bar in the thumb zone, leave the top bar to navigation. Hidden on the create-wizard route since that page owns its own action. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
// Routes where the global "+ New server" CTA makes no sense — the wizard is
|
|
// itself the create flow and owns its own primary action.
|
|
const HIDDEN_PATHS: readonly string[] = ['/servers/new'];
|
|
|
|
/**
|
|
* Mobile-only sticky bottom action bar. On phones the dashboard top header is
|
|
* already tight with the nav icons; the primary action belongs in the thumb
|
|
* zone, not crammed top-right. Hidden from `sm:` upward where the header has
|
|
* room for the same button inline.
|
|
*/
|
|
export function MobileActionBar() {
|
|
const pathname = usePathname();
|
|
if (HIDDEN_PATHS.includes(pathname)) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-x-0 bottom-0 z-40 border-t border-[--color-border] bg-[--color-bg-elevated]/95 backdrop-blur sm:hidden"
|
|
style={{ paddingBottom: 'max(env(safe-area-inset-bottom), 0.5rem)' }}
|
|
>
|
|
<div className="mx-auto flex max-w-7xl px-4 pt-2.5">
|
|
<Link
|
|
href="/servers/new"
|
|
className="inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-md bg-[--color-accent] text-[14px] font-medium text-white transition-colors duration-200 active:bg-[#5557e8]"
|
|
>
|
|
+ New server
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|