How to handle responsiveness / window resize

[smeijer]

An example on how to handle responsiveness / window resizing would be awesome.

For example; a layout might have 2 panes as default, but when resizing (or opening the site on a mobile device), the layout might scale back to 1 pane, with a toggle to switch the panes view component.

The toggle would be out of scope for this project; but an example on how to handle the collapsing of one pane when getting under a certain window width, and expanding when going above the certain with again, would be very helpful.

// PSEUDO CODE

const width = 900; // screen.width; 

if (width <= 800) {
  render('tabs', ['item-list', 'item-details']);
}

if (width > 800) {
  render('panes', {
    1: 'item-list',
    2: 'selected-item-details',
  });
}
else {
  render('panes', {
    1: 'item-list',
  });
}