Add a render method for responsively rendering elements

[rglover]

Fun idea. In some layouts, it'd be helpful to have the same content move physically in the page depending on screen dimensions. We could add a render method responsive() to help with this and dynamically update the render relative to screen size.

import ui from '@joystick.js/ui';

const Component = ui.component({
  render: ({ responsive }) => {
    return `
      <div>
        ${responsive({ min_width: 1920, max_width: 1400 }, `
          ${component(Sidebar)}
        `)}
        <aside>
          ${responsive({ min_width: 740, max_width: 1140 }, `
            ${component(Sidebar)}
          `)}
        </aside>
      </div>
    `;
  },
});

export default Component;