feat: Add scroll-hide header and contextual FAB system
Implemented:
1. Scroll-Hide App Bar (Mobile)
- Hides on scroll down (past 50px)
- Shows on scroll up
- Chrome URL bar behavior
- Smooth slide animation (300ms)
- Desktop always visible (md:translate-y-0)
2. Contextual FAB Hook
- useFABConfig() hook for pages
- Pre-configured for: orders, products, customers, coupons, dashboard
- Automatic cleanup on unmount
- Easy to use: useFABConfig('orders')
3. Removed Focus Styles
- Bottom nav links: focus:outline-none
- Cleaner mobile UX
Header Scroll Behavior:
- Scroll down > 50px: Header slides up (-translate-y-full)
- Scroll up: Header slides down (translate-y-0)
- Desktop: Always visible (md:translate-y-0)
- Smooth transition (duration-300)
FAB Configuration:
const configs = {
orders: 'Create Order' → /orders/new
products: 'Add Product' → /products/new
customers: 'Add Customer' → /customers/new
coupons: 'Create Coupon' → /coupons/new
dashboard: 'Quick Actions' → (future speed dial)
none: Hide FAB
}
Usage in Pages:
import { useFABConfig } from '@/hooks/useFABConfig';
function OrdersPage() {
useFABConfig('orders'); // Sets up FAB automatically
return <div>...</div>;
}
Next Steps:
- Add useFABConfig to actual pages
- Test scroll behavior on devices
- Implement speed dial for dashboard
Files Created:
- useFABConfig.tsx: Contextual FAB configuration hook
Files Modified:
- App.tsx: Scroll detection and header animation
- BottomNav.tsx: Removed focus outline styles
This commit is contained in:
@@ -63,7 +63,7 @@ export function BottomNav() {
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className={`flex flex-col items-center justify-center flex-1 h-full gap-0.5 transition-colors ${
|
||||
className={`flex flex-col items-center justify-center flex-1 h-full gap-0.5 transition-colors focus:outline-none focus-visible:outline-none ${
|
||||
active
|
||||
? 'text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
|
||||
Reference in New Issue
Block a user