add mobile nav toggle

playwright.config.ts

@@ -7,6 +7,12 @@ const config: PlaywrightTestConfig = {
   },
   testDir: 'tests',
   testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+  use: {
+    viewport: {
+      height: 900,
+      width: 1600,
+    },
+  },
 };
 
 export default config;

src/lib/components/nav-toggle.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  export let navOpen: boolean;
+
+  // if nav is open, we should "hide" it on press. if not, we should "show" it.
+  let action: string;
+  $: action = navOpen ? 'hide' : 'show';
+
+  function toggle() {
+    navOpen = !navOpen;
+  }
+</script>
+
+<button on:click={toggle}>{action} navigation</button>
+
+<style lang="less">
+  button {
+    background-color: lighten(@color-dark, 10%);
+    border: none;
+    color: @color-light;
+    font-size: @font-s-md;
+    font-weight: @weight-semibold;
+    padding: @padding-sm;
+    width: 100%;
+
+    @media screen and (min-width: @sizes[lg]) {
+      display: none;
+    }
+  }
+</style>

src/lib/components/nav-tree.svelte

@@ -1,5 +1,15 @@
+<script lang="ts">
+  import NavToggle from './nav-toggle.svelte';
+
+  let open: boolean = false;
+
+  let hidden: boolean;
+  $: hidden = !open;
+</script>
+
 <nav>
-  <ul id="nav-tree" role="tablist">
+  <NavToggle bind:navOpen={open} />
+  <ul class:hidden role="tablist">
     <slot />
   </ul>
 </nav>
@@ -11,9 +21,13 @@
     margin: 0;
     padding: 0;
 
+    &.hidden {
+      display: none;
+    }
+
     @media screen and (min-width: @sizes[lg]) {
       align-items: center;
-      display: flex;
+      display: flex !important;
       flex-direction: row;
       justify-content: space-evenly;
     }

src/styles.less

@@ -20,6 +20,9 @@
 @padding-lg: @padding-lg-y @padding-lg-x;
 @padding-lg-x: 1.5em;
 @padding-lg-y: 1em;
+@padding-sm: @padding-sm-y @padding-sm-x;
+@padding-sm-x: 0.875em;
+@padding-sm-y: 0.375em;
 @padding-xl: @padding-xl-y @padding-xl-x;
 @padding-xl-x: 2em;
 @padding-xl-y: 1.5em;

tests/desktop.test.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+test('desktop page has nav tree', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('nav')).toBeVisible();
+});
+
+test('desktop page does not have nav toggle', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('nav button')).toBeHidden();
+});

tests/general.test.ts

@@ -7,11 +7,6 @@ test('page has headline', async ({ page }) => {
   await expect(headline).toHaveText('resumarkdown');
 });
 
-test('page has nav tree', async ({ page }) => {
-  await page.goto('/');
-  await expect(page.locator('nav')).toBeVisible();
-});
-
 test('nav items work', async ({ page }) => {
   await page.goto('/');
   let lastPane = '#pane-preview';

tests/mobile.test.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+
+test.use({ viewport: { height: 2556, width: 1179 } });
+
+test('mobile page has nav tree hidden by default', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('nav ul')).toBeHidden();
+});
+
+test('mobile page has nav toggle', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('nav button')).toBeVisible();
+});
+
+test('nav toggle works', async ({ page }) => {
+  await page.goto('/');
+  await page.locator('nav button').click();
+  await expect(page.locator('nav ul')).toBeVisible();
+  await page.locator('nav button').click();
+  await expect(page.locator('nav ul')).toBeHidden();
+});