Microsoft Edge Side Panel Support

Enable HUBB24 to run in Edge's side panel for multitasking

What is the Microsoft Edge Side Panel?

The Microsoft Edge side panel allows users to open PWAs in a narrow vertical panel (typically 400px wide) alongside their main browser window. This enables users to:

Browse products while working in other tabs
Keep messages accessible at all times
Monitor orders without switching windows
Quick access to shopping and business tools

📊 Optimal Width: The recommended width for side panel is 400px, though it can range from 360px to 500px depending on user preference.

Current HUBB24 Implementation

✓ Enabled

HUBB24 is now configured to support Microsoft Edge side panel with the following settings:

Manifest Configuration:

{
  "edge_side_panel": {
    "preferred_width": 400
  },
  "display_override": [
    "window-controls-overlay",
    "standalone"
  ]
}

Features Optimized for Side Panel:

Responsive Design: All pages adapt to narrow widths (360px+)
Quick Actions: App shortcuts for fast navigation
Compact Layout: Bottom navigation and mobile-optimized views
Persistent State: Maintains session across panel opens

How Users Can Access Side Panel Mode

Install HUBB24 PWA

Visit https://hubb24.com in Microsoft Edge

Click the install icon in the address bar or use Settings → Apps → Install HUBB24

Open in Side Panel

Method A: Right-click the HUBB24 app icon → "Open in sidebar"

Method B: Click the sidebar icon in Edge (left side) → Select HUBB24

Method C: Edge Settings → Sidebar → Add HUBB24

Adjust Panel Width

Users can drag the panel border to adjust width between 360px - 500px

HUBB24 automatically adapts to the chosen width

Best Practices for Side Panel Design

✓ What HUBB24 Does Right:

• Responsive grid layouts that adapt to narrow widths
• Stack content vertically for better side panel viewing
• Bottom navigation for easy thumb access
• Compact cards and smaller font sizes when needed
• Single-column product listings in narrow views

⚡ Performance Tips:

• Images are lazy-loaded and optimized
• Service worker caches assets for instant loading
• Minimal animations to reduce CPU usage
• Efficient state management for smooth scrolling

Testing Side Panel Mode

To test how HUBB24 looks in side panel mode:

Option 1: Use Browser Dev Tools

Open HUBB24 in Microsoft Edge
Press F12 to open DevTools
Click "Toggle device toolbar" or press Ctrl + Shift + M
Set width to 400px to simulate side panel

Option 2: Install and Test Live

Install HUBB24 as PWA in Edge
Right-click app icon → "Open in sidebar"
Test all major features (browse, messages, orders)
Try different panel widths by dragging the border

📋 Summary

Recommended Width: 400px - This provides the best balance between content visibility and screen real estate.

• Minimum supported width: 360px
• Maximum recommended width: 500px
• HUBB24 automatically adapts to all widths in this range
• All features work seamlessly in side panel mode
• Users can adjust width based on their preference