Enable sidebar toggle on desktop

__tests__/responsive.test.js

@@ -99,3 +99,17 @@ test('sidebar opens on small screens', async () => {
   expect(bodyClass).toBe(true);
   expect(sidebarLeft).toBe('0px');
 });
+
+test('sidebar toggles on large screens', async () => {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1024, height: 800 });
+  await page.goto(`http://localhost:${port}/`);
+  await page.waitForSelector('#sidebar-toggle');
+  await new Promise(r => setTimeout(r, 300));
+  let sidebarWidth = await page.evaluate(() => getComputedStyle(document.querySelector('.sidebar')).width);
+  expect(sidebarWidth).toBe('240px');
+  await page.click('#sidebar-toggle');
+  await new Promise(r => setTimeout(r, 300));
+  sidebarWidth = await page.evaluate(() => getComputedStyle(document.querySelector('.sidebar')).width);
+  expect(sidebarWidth).toBe('0px');
+});

assets/theme.css

@@ -114,3 +114,14 @@ main {
   }
   body.sidebar-open .sidebar { left: 0; }
 }
+
+@media (min-width: 769px) {
+  .sidebar {
+    transition: width 0.2s ease;
+  }
+  body:not(.sidebar-open) .sidebar {
+    width: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+}

assets/theme.js

@@ -12,6 +12,10 @@ document.addEventListener('DOMContentLoaded', () => {
   const stored = localStorage.getItem('theme');
   if (stored) setTheme(stored);
 
+  if (window.innerWidth > 768) {
+    document.body.classList.add('sidebar-open');
+  }
+
   sidebarToggle?.addEventListener('click', () => {
     document.body.classList.toggle('sidebar-open');
   });