The Expanding Panel

Overview

MileIntel uses an expanding panel pattern for trip navigation. The left sidebar shows your trip cards in a compact 360px column. Click a trip and the detail panel slides open to the right, filling the remaining space. It's designed to keep your trip list visible while giving detail views plenty of room.

Collapsed State

When no trip is selected, the sidebar takes up the left portion of the screen. You see your trip cards stacked vertically — each showing the route, dates, cabin, and lifecycle badge. The center area displays the search bar and any dashboard content.

Expanded State

Click a trip card and the panel expands:

• The trip list stays visible on the left at 360px width
• The detail panel fills the rest of the screen (flex-1)
• The center search bar collapses to zero width and fades out, giving the detail panel maximum space
• Tabs appear along the left edge of the detail panel for quick navigation

Collapsing Back

Three ways to collapse the detail panel:

1. Click the collapse button — the chevron icon in the top-left of the detail panel
2. Press Escape — keyboard shortcut to close the panel
3. Click outside the panel area — returns to the collapsed sidebar view

When the panel collapses, the search bar fades back in and the trip list returns to its normal layout.

Panel Behavior Details

• The expand/collapse animation is smooth (200ms transition)
• Your scroll position in the trip list is preserved when expanding and collapsing
• The detail panel remembers which tab you were on per trip
• On smaller screens (under 1024px), the detail panel takes over the full width instead of side-by-side

Key Details

• The panel pattern is consistent across Trips and TCC views
• Keyboard navigation: arrow keys move between trips in the list, Enter expands the selected trip
• The panel respects your browser's reduced-motion preference

Tips

1. Use the keyboard. Arrow down through your trip list, hit Enter to expand, Escape to collapse. It's the fastest way to scan multiple trips.
2. On a wide monitor, the side-by-side layout lets you compare trips by rapidly clicking between them in the left column.