Feature/522 wire mobile nav layout

[mijinummi]

Overview

Integrates the MobileNav bottom tab bar component into the application's layout (apps/frontend/app/layout.tsx), providing mobile users with fixed navigation across primary application routes.

closes #522

Technical Details & Scope

1. Root Layout Integration & Routing

• Target File: apps/frontend/app/layout.tsx
• Route Scope: Rendered conditionally to exclude the unauthenticated landing page while persisting across all authenticated views.
• State Management: Integrated active tab highlighting derived from current route paths (usePathname) and unread status badges on the Notifications tab.

2. Layout, Spacing & safe-area-inset

• Viewport Threshold: Applied CSS responsive utilities (block md:hidden) targeting viewports < 768px.
• Content Padding: Updated main layout container with dynamic bottom padding (pb-16 md:pb-0 and pb-safe) to prevent content overlap.
• Mobile Web Offsets: Fixed positioning pinned to bottom: 0 with padding compensation using env(safe-area-inset-bottom) for iOS gesture bars and notch devices.

3. UX & Visual Presentation

• Added slide-up entry animation on initial component mounting.
• Includes key navigation items: Dashboard, Create Escrow, Notifications (with dynamic badge indicator), and Profile.

---

Acceptance Criteria Checklist

• Import and render MobileNav in the root layout
• Only visible on mobile viewports (< 768px), hidden on desktop
• Bottom tab bar with icons: Dashboard, Create Escrow, Notifications (with badge), Profile
• Active tab highlighted based on current route
• Fixed to bottom with safe-area-inset for iOS notch devices
• Does not overlap page content (added bottom padding to main content on mobile)
• Smooth slide-up animation on first render
• Tested on iOS Safari and Android Chrome viewports
• Excluded from landing page (authenticated routes only)

---

Cross-Browser & Device Verification

• iOS Safari (iPhone 13 / 14 / Pro Max): Verified bottom clearance with safe-area-inset home indicator.
• Android Chrome (Pixel 7 / Galaxy S23): Confirmed layout stability during soft keyboard toggles and viewport resizes.
• Desktop Viewports (>= 768px): Confirmed hidden state and normal zero-padding main container rendering.

[drips-wave]

@mijinummi Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits