hide "preview" nav item on desktop

src/lib/components/content.svelte

@@ -3,6 +3,8 @@
 
   export let pane: Pane;
 
+  export let testid: string | undefined = undefined;
+
   // don't show pane if we're not the current pane
   let hidden: boolean;
   $: hidden = pane !== $navStore;
@@ -12,7 +14,9 @@
   $: preview = pane === 'preview';
 </script>
 
-<div id={`pane-${pane}`} role="tabpanel" class:hidden class:preview><slot /></div>
+<div id={`pane-${pane}`} data-testid={testid} role="tabpanel" class:hidden class:preview>
+  <slot />
+</div>
 
 <style lang="less">
   div {

src/lib/components/nav-item.svelte

@@ -6,6 +6,10 @@
   let selected: boolean;
   $: selected = destination === $pane;
 
+  // we need to hide the "preview" tab on desktop
+  let hiddenOnDesktop: boolean;
+  $: hiddenOnDesktop = destination === 'preview';
+
   function handleKey({ key }: KeyboardEvent) {
     if (key === ' ' || key === 'Enter' || key === 'Spacebar') {
       navigate();
@@ -22,6 +26,7 @@
   aria-selected={selected}
   role="tab"
   tabindex="0"
+  class:hiddenOnDesktop
   class:selected
   on:click={navigate}
   on:keyup={handleKey}
@@ -39,6 +44,10 @@
 
     @media screen and (min-width: @sizes[lg]) {
       flex-grow: 1;
+
+      &.hiddenOnDesktop {
+        display: none;
+      }
     }
 
     &.selected {

src/routes/+page.svelte

@@ -22,13 +22,13 @@
     </NavTree>
   </header>
   <main>
-    <Content pane="content">
+    <Content pane="content" testid="content-pane">
       <CodeInput bind:code={markdown} />
     </Content>
-    <Content pane="style">
+    <Content pane="style" testid="style-pane">
       <CodeInput bind:code={stylesheet} />
     </Content>
-    <Content pane="preview">
+    <Content pane="preview" testid="preview-pane">
       <dl>
         <dt>markdown:</dt>
         <dd>{markdown !== '' ? markdown : '???'}</dd>