Fix mobile navigation broken by invalid JavaScript syntax (#21)

* Initial plan

* Fix mobile navigation by removing invalid front matter and adding null checks

Co-authored-by: alexeygrigorev <875246+alexeygrigorev@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: alexeygrigorev <875246+alexeygrigorev@users.noreply.github.com>

Author: Copilot

.gitignore

@@ -22,6 +22,11 @@ vendor/
 # We use Node.js as our runtime, so we ignore node_modules
 node_modules
 
+# Playwright test results and artifacts
+test-results/
+playwright-report/
+playwright/.cache/
+
 # .DS_Store is a macOS-only metadata file about directories. Convention is to not commit them.
 # See: https://en.wikipedia.org/wiki/.DS_Store
 .DS_Store

_includes/js/custom.js

@@ -1,2 +1 @@
----
----
+

assets/js/just-the-docs.js

@@ -42,30 +42,34 @@ function initNav() {
 
   disableHeadStyleSheets();
 
-  jtd.addEvent(menuButton, 'click', function(e){
-    e.preventDefault();
+  if (menuButton) {
+    jtd.addEvent(menuButton, 'click', function(e){
+      e.preventDefault();
 
-    if (menuButton.classList.toggle('nav-open')) {
-      siteNav.classList.add('nav-open');
-      mainHeader.classList.add('nav-open');
-      menuButton.ariaPressed = true;
-    } else {
-      siteNav.classList.remove('nav-open');
-      mainHeader.classList.remove('nav-open');
-      menuButton.ariaPressed = false;
-    }
-  });
+      if (menuButton.classList.toggle('nav-open')) {
+        siteNav.classList.add('nav-open');
+        mainHeader.classList.add('nav-open');
+        menuButton.ariaPressed = true;
+      } else {
+        siteNav.classList.remove('nav-open');
+        mainHeader.classList.remove('nav-open');
+        menuButton.ariaPressed = false;
+      }
+    });
+  }
 
   {%- if site.search_enabled != false and site.search.button %}
   const searchInput = document.getElementById('search-input');
   const searchButton = document.getElementById('search-button');
 
-  jtd.addEvent(searchButton, 'click', function(e){
-    e.preventDefault();
+  if (searchButton) {
+    jtd.addEvent(searchButton, 'click', function(e){
+      e.preventDefault();
 
-    mainHeader.classList.add('nav-open');
-    searchInput.focus();
-  });
+      mainHeader.classList.add('nav-open');
+      searchInput.focus();
+    });
+  }
   {%- endif %}
 }
 

package-lock.json

@@ -0,0 +1,12 @@
+{
+  "name": "docs-testing",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "test": "playwright test",
+    "test:headed": "playwright test --headed"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.48.0"
+  }
+}

package.json

@@ -0,0 +1,28 @@
+const { defineConfig, devices } = require('@playwright/test');
+
+module.exports = defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:4000',
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+  ],
+
+  webServer: {
+    command: 'bundle exec jekyll serve --port 4000',
+    url: 'http://localhost:4000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

playwright.config.js

@@ -0,0 +1,54 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Mobile Navigation', () => {
+  test('should toggle mobile menu when clicking menu button', async ({ page }) => {
+    await page.goto('/');
+    
+    // Verify we're in mobile view by checking if the menu button is visible
+    const menuButton = page.locator('#menu-button');
+    await expect(menuButton).toBeVisible();
+    
+    // Initially, the navigation should be hidden (not have nav-open class)
+    const siteNav = page.locator('#site-nav');
+    await expect(siteNav).not.toHaveClass(/nav-open/);
+    
+    // Click the menu button to open the navigation
+    await menuButton.click();
+    
+    // After clicking, navigation should have nav-open class
+    await expect(siteNav).toHaveClass(/nav-open/);
+    
+    // Menu button should also have nav-open class
+    await expect(menuButton).toHaveClass(/nav-open/);
+    
+    // Menu button aria-pressed should be true
+    await expect(menuButton).toHaveAttribute('aria-pressed', 'true');
+    
+    // Click again to close
+    await menuButton.click();
+    
+    // Navigation should no longer have nav-open class
+    await expect(siteNav).not.toHaveClass(/nav-open/);
+    await expect(menuButton).not.toHaveClass(/nav-open/);
+    await expect(menuButton).toHaveAttribute('aria-pressed', 'false');
+  });
+  
+  test('should show navigation links when menu is open', async ({ page }) => {
+    await page.goto('/');
+    
+    const menuButton = page.locator('#menu-button');
+    const siteNav = page.locator('#site-nav');
+    
+    // Initially, navigation links might be hidden/not visible in mobile view
+    // Click to open
+    await menuButton.click();
+    
+    // Wait for navigation to be open
+    await expect(siteNav).toHaveClass(/nav-open/);
+    
+    // Check that navigation links are accessible
+    const navLinks = page.locator('#site-nav .nav-list-link');
+    const count = await navLinks.count();
+    expect(count).toBeGreaterThan(0);
+  });
+});