🧭 Mobile Panels & Navigation
Learn how AppStruct's mobile interface uses slide-up panels and bottom navigation to provide full desktop functionality optimized for touch devices. This system adapts the complete feature set for efficient mobile editing.
Mobile Navigation System Overview
The mobile interface completely reimagines navigation for touch devices, replacing the desktop's fixed sidebars with a dynamic panel system that maximizes screen real estate while keeping all features easily accessible.
Key Components:
- Bottom Navigation Bar - Primary feature access
- Slide-Up Panels - Contextual content and tools
- Floating Action Buttons (FABs) - Quick element actions
- Panel Overlays - Modal-style interactions
- Gesture Controls - Swipe and touch navigation
Bottom Navigation Bar
Navigation Structure
The bottom navigation provides access to all main AppStruct features:
| Icon | Feature | Purpose |
|---|---|---|
| Components | Add UI Elements | Access component library and drag-and-drop |
| Pages | Screen Management | Create, edit, and manage app screens |
| Design | Design System | Colors, fonts, themes, and global styles |
| Publishing | App Deployment | Web, iOS, and Android publishing options |
| Settings | Project Settings | General configuration and preferences |
Navigation Behavior
- Single Tap: Opens corresponding panel
- Active State: Shows current open panel with highlight
- Badge Indicators: Shows notifications or status (if applicable)
- Adaptive Icons: Icons may change based on context
Mobile-Specific Adaptations
- Thumb-Friendly Zone: All tabs accessible with one-handed use
- Visual Feedback: Clear touch states and animations
- Safe Area Respect: Works with device notches and home indicators
Slide-Up Panel System
Panel Architecture
Panel Types:
- General Panels - Feature-specific content (components, pages, etc.)
- Element Panels - Edit selected elements
- Workflow Panels - Action and logic configuration
- Context Panels - Situational tools and options
Panel Presentation Modes
Full Height Panels:
- Used for complex features (Components, Design Settings)
- Slide from bottom to nearly full screen
- Include header with title and close button
- Scrollable content area
Partial Height Panels:
- Used for quick actions and simple settings
- Cover bottom portion of screen
- Allow background canvas interaction
- Auto-dismiss on background tap
Modal Panels:
- Used for critical workflows (publishing, settings)
- Full overlay with backdrop
- Require explicit dismissal
- Block other interactions
Panel Navigation Patterns
Opening Panels
Method 1: Bottom Navigation
- Tap any bottom navigation icon
- Panel slides up from bottom
- Canvas remains visible in background (if partial)
- Panel content loads with smooth animation
Method 2: FAB Actions
- Select element to show FAB
- Tap FAB to open element panel
- Panel shows element-specific controls
- Optimized for quick edits
Method 3: Context Actions
- Long-press elements for context menu
- Select panel-opening actions
- Contextual panels open with relevant content
Closing Panels
Explicit Close:
- X Button: Tap close button in panel header
- Done/Save: Action buttons that close and save
- Back Gesture: Swipe down or back gesture
Implicit Close:
- Background Tap: Tap canvas or backdrop to close
- Navigation Switch: Tap different bottom nav item
- Element Selection: Some selections auto-close panels
Panel State Management
- Persistent State: Panels remember position and content
- Smart Restoration: Reopen panels in previous state
- Cross-Session: Panel preferences saved between sessions
Panel Content Organization
Header Design
All panels include consistent headers:
Header Elements:
- Panel Title - Clear description of panel function
- Close Button - Consistent X icon for dismissal
- Action Buttons - Save, Done, or other primary actions (when applicable)
- Progress Indicators - Show multi-step processes
Content Areas
Scrollable Content:
- Vertical Scrolling - All panel content vertically scrollable
- Section Organization - Clear visual separation of features
- Search/Filter - Quick access to specific content
- Categorization - Logical grouping of related features
Interactive Elements:
- Touch-Optimized Buttons - Large tap targets (44pt minimum)
- Form Controls - Mobile-friendly inputs and selectors
- Drag Areas - Clear indicators for draggable content
- Feedback Systems - Visual and haptic feedback
Specialized Mobile Panels
Components Panel
Mobile Adaptations:
- Larger Component Cards - Easier touch selection
- Drag Preview - Clear visual feedback during drag
- Category Expansion - Accordion-style organization
- Search Functionality - Quick component finding
- Favorites System - Recently/frequently used components
Pages Panel
Mobile Features:
- Page Thumbnails - Visual page identification
- Swipe Actions - Swipe to delete/duplicate pages
- Drag Reordering - Touch-friendly page reordering
- Quick Actions - Add, duplicate, delete with large buttons
Design Settings Panel
Mobile Optimization:
- Color Picker - Touch-friendly color selection
- Font Preview - Large, readable font samples
- Slider Controls - Easy adjustment of values
- Preset Systems - Quick application of design themes
Element Settings Panel
Smart Organization:
- Tabbed Interface - Settings, Styles, Actions
- Context-Aware Content - Shows relevant options only
- Quick Toggles - Large switches for boolean options
- Value Inputs - Optimized for mobile keyboards
Panel Interactions
Touch Gestures
Panel Management:
- Swipe Up: Open panel from bottom nav
- Swipe Down: Close or minimize panel
- Tap Outside: Close panel (context-dependent)
- Long Press: Access panel-specific options
Content Navigation:
- Scroll: Navigate panel content
- Pinch: Zoom content (where applicable)
- Tap: Select items or activate controls
- Double Tap: Quick actions (context-dependent)
Haptic Feedback
- Panel Open/Close: Subtle vibration confirmation
- Selection Actions: Light feedback for selections
- Error States: Distinct vibration for errors
- Success Actions: Positive feedback for completions
Responsive Panel Behavior
Screen Size Adaptations
Phone Portrait:
- Full Height Panels for complex features
- Minimal Header Space to maximize content
- Single Column Layout for all panel content
- Bottom Sheet Style presentation
Phone Landscape:
- Partial Height Panels more common
- Two Column Layout where space permits
- Shorter Panel Heights to preserve canvas view
- Horizontal Scrolling for wide content
Tablet Portrait/Landscape:
- Larger Panel Widths for more content
- Multi-Column Layouts where beneficial
- More Desktop-Like Features with larger screens
- Concurrent Panel/Canvas interaction possible
Panel Performance Optimization
Loading Strategies
- Lazy Loading: Load panel content when opened
- Preloading: Cache frequently used panels
- Progressive Loading: Load critical content first
- Background Updates: Update panels without interruption
Memory Management
- Panel Disposal: Release memory when panels close
- Content Caching: Smart caching of panel state
- Image Optimization: Compressed images for mobile
- Efficient Rendering: Optimize for mobile GPUs
Accessibility Features
Touch Accessibility
- Large Touch Targets: Minimum 44pt tap targets
- Clear Visual Hierarchy: High contrast and clear organization
- Voice Over Support: Screen reader compatibility
- Motor Accessibility: Easy to use with limited dexterity
Visual Accessibility
- High Contrast Mode: Support for system accessibility settings
- Dynamic Type: Respect system font size preferences
- Color Independence: Don't rely solely on color for information
- Focus Indicators: Clear focus states for navigation
Panel Best Practices
Design Principles
- Consistency: All panels follow same design patterns
- Clarity: Clear purpose and organization
- Efficiency: Quick access to common actions
- Forgiveness: Easy to undo actions and close panels
User Experience
- Predictable Behavior: Panels behave consistently
- Clear Hierarchy: Logical information organization
- Fast Access: Common actions quickly accessible
- Contextual Relevance: Show only relevant options
Troubleshooting Panel Issues
Common Problems
Panel Won't Open:
- Check for conflicting gestures
- Verify element selection state
- Refresh page if persistent
- Check browser compatibility
Panel Content Missing:
- Verify internet connection
- Check for JavaScript errors
- Clear browser cache
- Try different browser
Slow Panel Performance:
- Close other browser tabs
- Restart browser
- Check device memory
- Clear app cache
Next Steps
Explore other mobile interface features:
The mobile panel and navigation system provides the full power of AppStruct in a touch-optimized interface, making professional app development possible entirely on mobile devices.