Mobile Features
Complete mobile experience with touch-optimized components, app-like navigation, and performance enhancements for modern mobile commerce.
📱 Mobile Feature Demonstrations
Touch-optimized components, app-like navigation, and performance enhancements
Mobile Navigation Patterns
Hamburger Menu
Sparkles
Uses existing CSS classes: sparkles-hamburger and sparkles-mobile-nav
Bottom Navigation
Standard Tailwind classes with Alpine.js state management
Mobile Optimization Features
Touch-Friendly Design
All interactive elements follow 44px minimum touch target guidelines
Uses minimum 44px touch targets for accessibility
Performance Features
Passive Touch Events
✓ Enabled
Viewport Optimization
✓ Active
Reduced Animations
✗ Desktop
✓ Mobile
Touch Detection
✓ Supported
Powered by sparkles-mobile-optimizations.js
Automatic mobile performance enhancements
Responsive Utilities
Device-specific visibility:
Mobile & Tablet Only
All Devices
Tailwind responsive utilities for all breakpoints
Mobile Modals & Bottom Sheets
Mobile Filters (Bottom Sheet)
Filter Products
Simple Alpine.js transitions with Tailwind classes
Full Screen Mobile Search
Recent Searches
Rings
Necklaces
Earrings
Full-screen overlay with Alpine.js transitions
Available Mobile CSS Classes
Navigation Classes
.sparkles-hamburger- Hamburger menu icon.sparkles-hamburger-active- Active state.sparkles-mobile-nav- Mobile navigation container.sparkles-mobile-nav-active- Show mobile nav.sparkles-mobile-nav-list- Nav list container.sparkles-mobile-nav-item- Nav item.sparkles-mobile-nav-link- Nav link
Responsive Utilities
- • Device detection via
sparklesMobileOptimizations() - • Automatic viewport height fixes
- • Passive touch event listeners
- • Safe area CSS variables support
- • Reduced motion preferences
- • Touch-friendly minimum sizes (44px)
📝 Usage Examples
<button @click="mobileMenuOpen = !mobileMenuOpen"
class="sparkles-mobile-menu-btn"
:class="{'sparkles-hamburger-active': mobileMenuOpen}">
<div class="sparkles-hamburger">
<span></span><span></span><span></span>
</div>
</button>
<div class="fixed bottom-0 left-0 right-0">
<button @click="activeTab = 'home'"
:class="activeTab === 'home' ? 'active' : ''">
Home
</button>
</div>
<div x-show="showBottomSheet" x-transition>
<div class="fixed bottom-0 bg-white rounded-t-xl">
Bottom sheet content
</div>
</div>
⚡ Performance & Accessibility
Mobile Optimization Best Practices
- 🐆 Touch targets minimum 44px for accessibility compliance
- ⚡ Passive event listeners for smooth scrolling performance
- ♿ Reduced motion support for accessibility preferences
- 📱 Safe area support for notched devices and iOS PWA