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
Collections
Jewelry
Accessories
About

Uses utility composition with Alpine state instead of dedicated showcase-only mobile navigation wrappers.

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

Touch-Optimized Link Another Link

Uses minimum 44px touch targets for accessibility

Performance Features

Passive Touch Events ✓ Enabled
Viewport Optimization ✓ Active
Reduced Animations ✓ Mobile
Touch Detection ✓ Supported

Powered by SparklesUtils.responsive (theme)

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

  • inline-flex h-11 w-11 - Trigger hit area
  • relative h-4 w-6 - Hamburger line frame
  • translate-x-0 / -translate-x-full - Menu slide state
  • border-b border-gray-200 - Item separators
  • block py-4 text-lg - Tap-friendly nav links

Responsive Utilities

  • • Device detection via SparklesUtils.responsive.getState()
  • • Viewport height fixes via SparklesUtils.responsive.updateViewportHeight()
  • • Passive touch event listeners
  • • Safe area CSS variables support
  • • Reduced motion via SparklesUtils.responsive.prefersReducedMotion()
  • • Touch-friendly minimum sizes (44px)

📝 Usage Examples

<button @click="mobileMenuOpen = !mobileMenuOpen"
        class="inline-flex h-11 w-11 items-center justify-center rounded-lg">
  <div class="relative h-4 w-6">
    <span :class="mobileMenuOpen ? 'translate-y-[7px] rotate-45' : ''"></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