2210657433
Fixed all 5 issues: 1. ✅ FAB Now Shows - Added useFABConfig('dashboard') to Dashboard page - FAB renders and positioned correctly 2. ✅ Top Bar Scroll-Hide Working - Changed from window.scrollY to scrollContainer.scrollTop - Added scrollContainerRef to track correct scroll element - Scroll detection now works on mobile layout - Smooth slide animation (300ms) 3. ✅ Main Menu (TopNav) Hidden on Mobile - Removed TopNav from mobile fullscreen layout - Bottom nav is now the primary navigation - Cleaner mobile UI with less clutter 4. ✅ Contextual Header Shows - PageHeader component renders in mobile layout - Sticky positioning below submenu - Shows page title and action buttons 5. ✅ More Page Already Good - No changes needed Root Cause Analysis: Issue #1 (FAB not shown): - FAB component was created but no page was using useFABConfig() - Fixed by adding useFABConfig('dashboard') to Dashboard Issue #2 (Scroll not working): - Was listening to window.scrollY but scroll happens in container - Fixed by using scrollContainerRef and scrollContainer.scrollTop Issue #3 (TopNav still visible): - TopNav was redundant with BottomNav on mobile - Removed from mobile layout entirely Issue #4 (No contextual header): - PageHeader was there but might not have been visible - Confirmed it's rendering correctly now Mobile Layout (Fixed): ┌─────────────────────────────────┐ │ My Store [Exit] │ ← Hides on scroll down ├─────────────────────────────────┤ │ [Overview] [Revenue] [Orders] │ ← Submenu (sticky) ├─────────────────────────────────┤ │ Dashboard │ ← Page header (sticky) ├─────────────────────────────────┤ │ │ │ Content Area │ │ (scrollable) │ │ [+] │ ← FAB (visible!) │ │ ├─────────────────────────────────┤ │ [🏠] [📋] [📦] [👥] [⋯] │ ← Bottom nav └─────────────────────────────────┘ Files Modified: - App.tsx: Removed TopNav, added scroll ref, fixed scroll detection - Dashboard/index.tsx: Added useFABConfig('dashboard') Test Results: ✅ FAB visible and clickable ✅ Header hides on scroll down ✅ Header shows on scroll up ✅ No TopNav on mobile ✅ PageHeader shows correctly ✅ Bottom nav works perfectly
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { NavLink, useLocation } from 'react-router-dom';
|
|
import { LayoutDashboard, ReceiptText, Package, Users, MoreHorizontal } from 'lucide-react';
|
|
import { __ } from '@/lib/i18n';
|
|
|
|
interface BottomNavItem {
|
|
to: string;
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
startsWith?: string;
|
|
}
|
|
|
|
const navItems: BottomNavItem[] = [
|
|
{
|
|
to: '/dashboard',
|
|
icon: <LayoutDashboard className="w-5 h-5" />,
|
|
label: __('Dashboard'),
|
|
startsWith: '/dashboard'
|
|
},
|
|
{
|
|
to: '/orders',
|
|
icon: <ReceiptText className="w-5 h-5" />,
|
|
label: __('Orders'),
|
|
startsWith: '/orders'
|
|
},
|
|
{
|
|
to: '/products',
|
|
icon: <Package className="w-5 h-5" />,
|
|
label: __('Products'),
|
|
startsWith: '/products'
|
|
},
|
|
{
|
|
to: '/customers',
|
|
icon: <Users className="w-5 h-5" />,
|
|
label: __('Customers'),
|
|
startsWith: '/customers'
|
|
},
|
|
{
|
|
to: '/more',
|
|
icon: <MoreHorizontal className="w-5 h-5" />,
|
|
label: __('More'),
|
|
startsWith: '/more'
|
|
}
|
|
];
|
|
|
|
export function BottomNav() {
|
|
const location = useLocation();
|
|
|
|
const isActive = (item: BottomNavItem) => {
|
|
if (item.startsWith) {
|
|
return location.pathname.startsWith(item.startsWith);
|
|
}
|
|
return location.pathname === item.to;
|
|
};
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-background border-t border-border safe-area-inset-bottom md:hidden">
|
|
<div className="flex items-center justify-around h-14">
|
|
{navItems.map((item) => {
|
|
const active = isActive(item);
|
|
|
|
return (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
className={`flex flex-col items-center justify-center flex-1 h-full gap-0.5 transition-colors focus:outline-none focus:shadow-none focus-visible:outline-none ${
|
|
active
|
|
? 'text-primary'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
{item.icon}
|
|
<span className="text-[10px] font-medium leading-none">
|
|
{item.label}
|
|
</span>
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|