two column layout for desktop

src/lib/components/content.svelte

@@ -2,12 +2,32 @@
   import { pane as navStore, type Pane } from '$lib/stores/nav';
 
   export let pane: Pane;
+
+  // don't show pane if we're not the current pane
+  let hidden: boolean;
+  $: hidden = pane !== $navStore;
+
+  // always show preview pane on a two column layout
+  let preview: boolean;
+  $: preview = pane === 'preview';
 </script>
 
-<div id={`pane-${pane}`} hidden={pane !== $navStore} role="tabpanel"><slot /></div>
+<div id={`pane-${pane}`} role="tabpanel" class:hidden class:preview><slot /></div>
 
 <style lang="less">
   div {
     height: 100%;
+
+    &.hidden {
+      display: none;
+    }
+
+    @media screen and (min-width: @sizes[lg]) {
+      flex-grow: 1;
+
+      &.preview {
+        display: unset !important;
+      }
+    }
   }
 </style>

src/routes/+page.svelte

@@ -66,5 +66,12 @@
 
   main {
     flex-grow: 1;
+
+    @media screen and (min-width: @sizes[lg]) {
+      align-items: start;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
   }
 </style>

tests/desktop.test.ts

@@ -9,3 +9,8 @@ test('desktop page does not have nav toggle', async ({ page }) => {
   await page.goto('/');
   await expect(page.locator('nav button')).toBeHidden();
 });
+
+test('desktop page has two-column layout', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('#pane-preview')).toBeVisible();
+});

tests/general.test.ts

@@ -14,7 +14,9 @@ test('nav items work', async ({ page }) => {
     const currentPaneId = `pane-${pane}`;
     await page.locator(`nav li[aria-controls="${currentPaneId}"]`).click();
     await expect(page.locator(`#${currentPaneId}`)).toBeVisible();
+    if (lastPane !== '#pane-preview') {
       await expect(page.locator(lastPane)).toBeHidden();
+    }
     lastPane = `#${currentPaneId}`;
   }
 });

tests/mobile.test.ts

@@ -19,3 +19,8 @@ test('nav toggle works', async ({ page }) => {
   await page.locator('nav button').click();
   await expect(page.locator('nav ul')).toBeHidden();
 });
+
+test('mobile page has single-column layout', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('#pane-preview')).toBeHidden();
+});