marco/buildmymcpserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): mobile bottom action bar for + New server
All checks were successful
Deploy to Production / deploy (push) Successful in 53s
Details

Browse Source 
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>
This commit is contained in:
Marco Sadjadi 2026-05-23 00:19:31 +02:00
parent 083b6e5d41
commit dc5bbaa0ae
2 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/app/(dashboard)/layout.tsx
View File

@ -1,4 +1,5 @@
import { Logo } from '@/components/logo';
import { MobileActionBar } from '@/components/mobile-action-bar';
import { FileClock, LayoutGrid, Package, Server, Settings } from 'lucide-react';
import Link from 'next/link';
@ -29,13 +30,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
</div>
<Link
href="/servers/new"
className="inline-flex h-7 items-center gap-1.5 rounded-md bg-[--color-accent] px-2.5 text-[12px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
className="hidden h-7 items-center gap-1.5 rounded-md bg-[--color-accent] px-2.5 text-[12px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8] sm:inline-flex"
>
+ New server
</Link>
</div>
</header>
<main className="flex-1 bg-[--color-bg]">{children}</main>
<main className="flex-1 bg-[--color-bg] pb-20 sm:pb-0">{children}</main>
<MobileActionBar />
</div>
);
}

35
apps/web/components/mobile-action-bar.tsx Normal file
View File

@ -0,0 +1,35 @@
'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>
);
}