Add mobile bottom tab bar for small screen navigation

- New MobileTabBar component with Home, Search, and Account tabs
- Animated indicator follows active tab (spring layoutId transition)
- Shown only below sm breakpoint where desktop nav links are hidden
- Account tab provides quick sign-out access
- Safe area padding for devices with home indicators
- Added bottom padding to layout to prevent content overlap

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-01 11:33:52 -05:00
co-authored by Claude Opus 4.6
parent f7d5179d0f
commit 30d074e2ca
2 changed files with 81 additions and 1 deletions
+3 -1
View File
@@ -3,6 +3,7 @@
import { CommandPalette } from "@/components/command-palette";
import { KeyboardHelpDialog } from "@/components/keyboard-help-dialog";
import { KeyboardProvider } from "@/components/keyboard-provider";
import { MobileTabBar } from "@/components/mobile-tab-bar";
import { NavBar } from "@/components/nav-bar";
import { Toaster } from "@/components/ui/sonner";
@@ -13,7 +14,7 @@ export default function PagesLayout({
}) {
return (
<KeyboardProvider>
<div className="min-h-screen">
<div className="min-h-screen pb-14 sm:pb-0">
<NavBar />
{/* Ambient glow */}
<div className="pointer-events-none fixed left-1/2 top-1/4 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[800px] rounded-full bg-primary/3 blur-[200px]" />
@@ -21,6 +22,7 @@ export default function PagesLayout({
{children}
</main>
</div>
<MobileTabBar />
<CommandPalette />
<KeyboardHelpDialog />
<Toaster position="bottom-right" />