@sienklogic/plan-build-run 2.15.0 → 2.16.0

package/CHANGELOG.md

@@ -5,6 +5,43 @@ All notable changes to Plan-Build-Run will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.16.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.15.0...plan-build-run-v2.16.0) (2026-02-22)
+
+
+### Features
+
+* **11-01:** create tokens.css with dual-mode design tokens ([53afcc1](https://github.com/SienkLogic/plan-build-run/commit/53afcc1cc84e56d3d98b66a5758591f79af5c725))
+* **11-01:** refactor layout.css to use semantic design tokens ([f0fa53c](https://github.com/SienkLogic/plan-build-run/commit/f0fa53c88ac4345b135033e14dc37b937a65d5dd))
+* **11-02:** add theme toggle button with localStorage persistence ([f84576e](https://github.com/SienkLogic/plan-build-run/commit/f84576ec4596dedc9643b7cb76e55d14865ebffb))
+* **11-02:** pin Pico.css CDN to v2.0.6 ([1e46ef6](https://github.com/SienkLogic/plan-build-run/commit/1e46ef6bd56e12222d735590d9dea3b3c7f1f5b6))
+* **12-01:** add current-phase middleware for sidebar context ([d7d0e16](https://github.com/SienkLogic/plan-build-run/commit/d7d0e16419f692aa9883d9262b119dc514f7e9b0))
+* **12-01:** implement mobile overlay sidebar with backdrop ([3cc59ac](https://github.com/SienkLogic/plan-build-run/commit/3cc59acf55ab90568d4f11c11df43c7a07ca43f4))
+* **12-01:** redesign sidebar with collapsible sections and current phase card ([0b6aa07](https://github.com/SienkLogic/plan-build-run/commit/0b6aa076bfea6fdac3c7c855a6ad522f6d8f50ce))
+* **12-02:** add breadcrumb data to routes and include partial in content templates ([a90684e](https://github.com/SienkLogic/plan-build-run/commit/a90684e7752fcf232bcaee223e392e1dd4a9d52e))
+* **12-02:** create breadcrumbs partial and CSS styles ([82ba448](https://github.com/SienkLogic/plan-build-run/commit/82ba44833b09398d5abec88bf6e6a60032694412))
+* **13-01:** add milestone history expandable table with stats and deliverables ([ccc82d5](https://github.com/SienkLogic/plan-build-run/commit/ccc82d59f28e67b8ab5cb0db803d228e35af8339))
+* **13-01:** add todo filtering by priority, status, and search with bulk complete ([0abbf4c](https://github.com/SienkLogic/plan-build-run/commit/0abbf4c173395bfeda4b5c73f312a3820e86ad67))
+* **13-02:** add dependency graph route, views, and sidebar link ([d7224c2](https://github.com/SienkLogic/plan-build-run/commit/d7224c297dcbd07ac3659e95c4047448e5c6292b))
+* **13-02:** add Mermaid dependency graph generation to roadmap service ([662056b](https://github.com/SienkLogic/plan-build-run/commit/662056b703f4ef4d7910d7afb1f79444be6e11d1))
+* **13-03:** add analytics route, views, and sidebar link ([750562b](https://github.com/SienkLogic/plan-build-run/commit/750562b94287f151d89d7160ab124e2dc3279abc))
+* **13-03:** create analytics service with git-based metrics and TTL cache ([41eb38a](https://github.com/SienkLogic/plan-build-run/commit/41eb38aebf930ec085edaee416913c2319a6d216))
+* **14-01:** add Last-Event-ID state recovery to SSE endpoint ([b41c8dd](https://github.com/SienkLogic/plan-build-run/commit/b41c8ddc0638cd1bd103110ed6aa74a1512ca137))
+* **14-01:** create custom SSE client with exponential backoff ([8d75876](https://github.com/SienkLogic/plan-build-run/commit/8d758765f0465820560a72fdad745481e091f04b))
+* **14-01:** reduce chokidar stability threshold to 500ms ([1ef4dc4](https://github.com/SienkLogic/plan-build-run/commit/1ef4dc49604d98f5b6d9847f6ce835ee909b519f))
+* **14-02:** add hx-indicator spinners to todo complete actions ([a166d94](https://github.com/SienkLogic/plan-build-run/commit/a166d946323255696f46f0550892878eda622ebd))
+* **14-02:** add TTL cache utility and integrate into analytics and milestone services ([123c2d2](https://github.com/SienkLogic/plan-build-run/commit/123c2d25ea7050515e685c05231401de76d4cd7c))
+* **15-01:** add error-card styling, loading indicator, and favicon ([6f3c550](https://github.com/SienkLogic/plan-build-run/commit/6f3c550f79885010af59377a95c7dfd2e53038c3))
+* **15-01:** add skip-to-content link, focus-visible styles, and ARIA labels ([47c3c9b](https://github.com/SienkLogic/plan-build-run/commit/47c3c9bcaf8f2a5e143fe1b5a8ed18e5da9b20ba))
+* **15-01:** create reusable empty-state partial and integrate into views ([48c6807](https://github.com/SienkLogic/plan-build-run/commit/48c6807b9f19fcd4abc8582820155c5ccc73a244))
+* **15-02:** GREEN - analytics, cache, SSE tests pass against existing code ([1f6e3c2](https://github.com/SienkLogic/plan-build-run/commit/1f6e3c2feef7ba601afe66c68e41401aa44568be))
+* **15-02:** GREEN - dependencies and breadcrumbs tests pass ([8fd48fc](https://github.com/SienkLogic/plan-build-run/commit/8fd48fc63e5414cf93bec4d7afadf86b463a6f32))
+
+
+### Bug Fixes
+
+* **14-01:** add missing #sse-status element to header ([b831104](https://github.com/SienkLogic/plan-build-run/commit/b831104feaee62a5f6768ec8060aa2387e82322c))
+* **14-02:** clear milestone cache between tests to prevent stale data ([192b53c](https://github.com/SienkLogic/plan-build-run/commit/192b53cbb4777350950ed8bd0d4993d3229f1630))
+
 ## [2.15.0](https://github.com/SienkLogic/plan-build-run/compare/plan-build-run-v2.14.0...plan-build-run-v2.15.0) (2026-02-22)
 
 

package/dashboard/package.json

@@ -9,7 +9,8 @@
   "scripts": {
     "start": "node bin/cli.js",
     "dev": "node --watch bin/cli.js",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "keywords": [
     "plan-build-run",
@@ -28,6 +29,7 @@
     "marked": "^17.0.1"
   },
   "devDependencies": {
+    "@vitest/coverage-v8": "^4.0.18",
     "memfs": "^4.56.10",
     "supertest": "^7.2.2",
     "vitest": "^3.1.0"

package/dashboard/public/css/layout.css

@@ -4,23 +4,7 @@
 
 /* --- Custom Properties --- */
 :root {
-  --sidebar-width: 220px;
-  --header-height: 3.5rem;
   --content-max-width: 960px;
-  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --border-subtle: rgba(255, 255, 255, 0.08);
-  --bg-surface: rgba(255, 255, 255, 0.03);
-  --bg-surface-hover: rgba(255, 255, 255, 0.06);
-  --text-dim: rgba(255, 255, 255, 0.5);
 }
 
 /* --- Typography Override --- */
@@ -41,14 +25,14 @@ h3 { font-size: 1.1rem; font-weight: 600; }
 
 p { line-height: 1.65; }
 
-small { font-size: 0.8125rem; color: var(--text-dim); }
+small { font-size: 0.8125rem; color: var(--color-text-dim); }
 
 /* --- Page Grid Layout --- */
 .page-wrapper {
   display: grid;
   gap: 0;
-  grid-template-columns: var(--sidebar-width) 1fr;
-  grid-template-rows: var(--header-height) 1fr auto;
+  grid-template-columns: var(--size-sidebar) 1fr;
+  grid-template-rows: var(--size-header) 1fr auto;
   grid-template-areas:
     "header  header"
     "sidebar content"
@@ -62,8 +46,8 @@ small { font-size: 0.8125rem; color: var(--text-dim); }
   display: flex;
   align-items: center;
   padding: 0 var(--space-xl);
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-surface);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface-raised);
   backdrop-filter: blur(8px);
   position: sticky;
   top: 0;
@@ -96,11 +80,11 @@ small { font-size: 0.8125rem; color: var(--text-dim); }
 .page-wrapper > aside.sidebar {
   grid-area: sidebar;
   padding: var(--space-lg) 0;
-  border-right: 1px solid var(--border-subtle);
-  background: var(--bg-surface);
+  border-right: 1px solid var(--color-border);
+  background: var(--color-surface-raised);
   position: sticky;
-  top: var(--header-height);
-  height: calc(100vh - var(--header-height));
+  top: var(--size-header);
+  height: calc(100vh - var(--size-header));
   overflow-y: auto;
 }
 
@@ -123,21 +107,86 @@ aside.sidebar nav a {
   border-left: 3px solid transparent;
   font-size: 0.9rem;
   font-weight: 500;
-  color: var(--text-dim);
+  color: var(--color-text-dim);
   transition: all 0.15s ease;
 }
 
 aside.sidebar nav a:hover {
   color: var(--pico-color);
-  background: var(--bg-surface-hover);
-  border-left-color: rgba(255, 255, 255, 0.15);
+  background: var(--color-surface-hover);
+  border-left-color: var(--color-border);
 }
 
 aside.sidebar nav a[aria-current="page"] {
   font-weight: 600;
-  color: var(--pico-primary);
-  border-left-color: var(--pico-primary);
-  background: var(--bg-surface-hover);
+  color: var(--color-accent);
+  border-left-color: var(--color-accent);
+  background: var(--color-surface-hover);
+}
+
+/* --- Sidebar: Current Phase Card --- */
+.sidebar-current-phase {
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--space-sm);
+}
+
+.sidebar-current-phase small {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 0.6875rem;
+  color: var(--color-text-dim);
+}
+
+.sidebar-current-phase a {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  margin-top: var(--space-xs);
+  line-height: 1.4;
+}
+
+.sidebar-current-phase a strong {
+  font-size: 0.875rem;
+  display: block;
+}
+
+.sidebar-current-phase a span {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--color-text-dim);
+}
+
+.sidebar-current-phase .phase-status {
+  font-size: 0.75rem;
+  text-transform: capitalize;
+  color: var(--color-accent);
+  margin-top: 2px;
+}
+
+/* --- Sidebar: Section Details --- */
+aside.sidebar details {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+aside.sidebar details summary {
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--color-text-dim);
+  padding: var(--space-sm) var(--space-lg);
+  cursor: pointer;
+}
+
+aside.sidebar details[open] summary {
+  color: var(--color-accent);
+}
+
+aside.sidebar details ul {
+  margin: 0;
 }
 
 /* --- Main Content --- */
@@ -152,27 +201,27 @@ aside.sidebar nav a[aria-current="page"] {
 .page-wrapper > footer {
   grid-area: footer;
   padding: var(--space-md) var(--space-xl);
-  border-top: 1px solid var(--border-subtle);
+  border-top: 1px solid var(--color-border);
   text-align: center;
 }
 
 .page-wrapper > footer small {
   font-size: 0.75rem;
-  color: var(--text-dim);
+  color: var(--color-text-dim);
 }
 
 /* --- Article Cards --- */
 article {
-  border: 1px solid var(--border-subtle);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  background: var(--bg-surface);
+  background: var(--color-surface-raised);
   margin-bottom: var(--space-lg);
 }
 
 article > header {
-  border-bottom: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--color-border);
   padding: var(--space-md) var(--space-lg);
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--color-surface-raised);
   border-radius: var(--radius-md) var(--radius-md) 0 0;
 }
 
@@ -200,7 +249,7 @@ th {
   font-size: 0.8125rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--text-dim);
+  color: var(--color-text-dim);
   white-space: nowrap;
 }
 
@@ -216,18 +265,18 @@ progress {
 }
 
 progress::-webkit-progress-bar {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--color-border);
   border-radius: 999px;
 }
 
 progress::-webkit-progress-value {
-  background: var(--pico-primary);
+  background: var(--color-accent);
   border-radius: 999px;
   transition: width 0.4s ease;
 }
 
 progress::-moz-progress-bar {
-  background: var(--pico-primary);
+  background: var(--color-accent);
   border-radius: 999px;
 }
 
@@ -242,7 +291,7 @@ details summary {
   font-weight: 500;
   cursor: pointer;
   padding: var(--space-xs) 0;
-  color: var(--pico-primary);
+  color: var(--color-accent);
 }
 
 details summary:hover {
@@ -264,7 +313,7 @@ details li {
   font-size: 0.8125em;
   padding: 0.15em 0.4em;
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--color-surface-hover);
 }
 
 /* --- Markdown Body (rendered markdown content) --- */
@@ -281,13 +330,13 @@ details li {
 
 .markdown-body th,
 .markdown-body td {
-  border: 1px solid var(--border-subtle);
+  border: 1px solid var(--color-border);
   padding: var(--space-xs) var(--space-sm);
   text-align: left;
 }
 
 .markdown-body th {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--color-surface-hover);
 }
 
 .markdown-body pre {
@@ -305,8 +354,8 @@ details li {
 }
 
 .markdown-body blockquote {
-  border-left: 3px solid var(--pico-primary);
-  background: rgba(255, 255, 255, 0.02);
+  border-left: 3px solid var(--color-accent);
+  background: var(--color-surface-raised);
   margin: var(--space-md) 0;
   padding: var(--space-sm) var(--space-md);
 }
@@ -329,19 +378,49 @@ details li {
 
 .markdown-body hr {
   border: none;
-  border-top: 1px solid var(--border-subtle);
+  border-top: 1px solid var(--color-border);
   margin: var(--space-lg) 0;
 }
 
+/* --- Breadcrumbs --- */
+.breadcrumbs {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--space-md) 0;
+  font-size: 0.85rem;
+  gap: var(--space-xs);
+}
+
+.breadcrumbs li + li::before {
+  content: ">";
+  margin-right: var(--space-xs);
+  color: var(--color-text-dim);
+}
+
+.breadcrumbs a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+.breadcrumbs a:hover {
+  text-decoration: underline;
+}
+
+.breadcrumbs [aria-current="page"] {
+  color: var(--color-text-dim);
+  font-weight: 500;
+}
+
 /* --- Back Link --- */
 main > p:first-of-type > a[href="/"] {
   font-size: 0.875rem;
-  color: var(--text-dim);
+  color: var(--color-text-dim);
   text-decoration: none;
 }
 
 main > p:first-of-type > a[href="/"]:hover {
-  color: var(--pico-primary);
+  color: var(--color-accent);
 }
 
 /* --- SSE Connection Status --- */
@@ -363,11 +442,91 @@ main > p:first-of-type > a[href="/"]:hover {
   background-color: var(--status-not-started);
 }
 
+/* --- Skip Link (Accessibility) --- */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 1000;
+  padding: var(--space-sm) var(--space-md);
+  background: var(--pico-primary);
+  color: var(--pico-primary-inverse);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.skip-link:focus {
+  position: static;
+  display: block;
+  text-align: center;
+}
+
+/* --- Focus Visible --- */
+:focus-visible {
+  outline: 2px solid var(--pico-primary);
+  outline-offset: 2px;
+}
+
+/* --- Empty State --- */
+.empty-state {
+  text-align: center;
+  padding: var(--space-2xl) var(--space-lg);
+}
+
+.empty-state h3 {
+  color: var(--color-text-dim);
+  font-weight: 500;
+}
+
+/* --- Error Card --- */
+.error-card {
+  border-left: 4px solid var(--pico-del-color);
+  padding: var(--space-lg);
+  margin: var(--space-lg) 0;
+  background: var(--color-surface-raised);
+  border-radius: var(--radius-md);
+}
+
+.error-card__icon {
+  font-size: 1.5rem;
+  margin-bottom: var(--space-sm);
+}
+
+.error-card__message {
+  margin-bottom: var(--space-md);
+}
+
+.error-card__action a {
+  font-size: 0.875rem;
+}
+
+/* --- Loading Bar --- */
+.loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 100;
+  display: none;
+}
+
+.htmx-request .loading-bar {
+  display: block;
+  background: var(--pico-primary);
+  animation: loading-shimmer 1.2s ease-in-out infinite;
+}
+
+@keyframes loading-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
 /* --- Mobile hamburger toggle --- */
 .sidebar-toggle {
   display: none;
   background: none;
-  border: 1px solid var(--border-subtle);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--pico-color);
   font-size: 1.25rem;
@@ -383,7 +542,7 @@ main > p:first-of-type > a[href="/"]:hover {
 /* Tablet: narrower sidebar */
 @media (max-width: 1024px) {
   :root {
-    --sidebar-width: 180px;
+    --size-sidebar: 180px;
   }
 
   .page-wrapper > main {
@@ -391,14 +550,13 @@ main > p:first-of-type > a[href="/"]:hover {
   }
 }
 
-/* Mobile: sidebar collapses to top nav */
+/* Mobile: sidebar overlays content */
 @media (max-width: 768px) {
   .page-wrapper {
     grid-template-columns: 1fr;
-    grid-template-rows: var(--header-height) auto 1fr auto;
+    grid-template-rows: var(--size-header) 1fr auto;
     grid-template-areas:
       "header"
-      "sidebar"
       "content"
       "footer";
   }
@@ -408,40 +566,37 @@ main > p:first-of-type > a[href="/"]:hover {
   }
 
   .page-wrapper > aside.sidebar {
-    position: static;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border-subtle);
-    padding: 0;
-    overflow: visible;
-    display: none;
-  }
-
-  .page-wrapper > aside.sidebar.open {
+    position: fixed;
+    top: var(--size-header);
+    left: 0;
+    width: 260px;
+    height: calc(100vh - var(--size-header));
+    z-index: 20;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
     display: block;
+    border-right: 1px solid var(--color-border);
+    border-bottom: none;
+    padding: var(--space-lg) 0;
+    overflow-y: auto;
+    background: var(--color-surface-raised);
   }
 
-  aside.sidebar nav ul {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0;
-    padding: var(--space-sm) var(--space-md);
-  }
-
-  aside.sidebar nav a {
-    border-left: none;
-    border-bottom: 2px solid transparent;
-    padding: var(--space-sm) var(--space-md);
-    font-size: 0.85rem;
+  .page-wrapper > aside.sidebar.open {
+    transform: translateX(0);
   }
 
-  aside.sidebar nav a[aria-current="page"] {
-    border-left: none;
-    border-bottom-color: var(--pico-primary);
+  .sidebar-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    top: var(--size-header);
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 19;
   }
 
-  aside.sidebar nav a:hover {
-    border-left: none;
+  .sidebar-backdrop.open {
+    display: block;
   }
 
   .page-wrapper > main {

package/dashboard/public/css/tokens.css

@@ -0,0 +1,59 @@
+/* ============================================
+   Towline Dashboard — Design Tokens
+   Single source of truth for colors, spacing,
+   typography, and sizing across all CSS files.
+   ============================================ */
+
+/* --- Light Mode (Default) --- */
+:root {
+  /* Colors */
+  --color-surface: #ffffff;
+  --color-surface-raised: #f8f9fa;
+  --color-surface-hover: rgba(0, 0, 0, 0.04);
+  --color-border: rgba(0, 0, 0, 0.1);
+  --color-text-dim: rgba(0, 0, 0, 0.5);
+  --color-text: #1a1a2e;
+  --color-accent: var(--pico-primary);
+
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+
+  /* Radii */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
+
+  /* Sizing */
+  --size-sidebar: 220px;
+  --size-header: 3.5rem;
+}
+
+/* --- Dark Mode (explicit attribute) --- */
+[data-theme="dark"] {
+  --color-surface: #13131a;
+  --color-surface-raised: rgba(255, 255, 255, 0.03);
+  --color-surface-hover: rgba(255, 255, 255, 0.06);
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-text-dim: rgba(255, 255, 255, 0.5);
+  --color-text: #e8e8f0;
+}
+
+/* --- Dark Mode (system preference, unless light forced) --- */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-surface: #13131a;
+    --color-surface-raised: rgba(255, 255, 255, 0.03);
+    --color-surface-hover: rgba(255, 255, 255, 0.06);
+    --color-border: rgba(255, 255, 255, 0.08);
+    --color-text-dim: rgba(255, 255, 255, 0.5);
+    --color-text: #e8e8f0;
+  }
+}

package/dashboard/public/js/sidebar-toggle.js

@@ -1,19 +1,33 @@
-// Mobile sidebar toggle
+// Mobile sidebar toggle with backdrop overlay
 document.addEventListener('DOMContentLoaded', function() {
   var toggle = document.querySelector('.sidebar-toggle');
   var sidebar = document.querySelector('.sidebar');
-  if (toggle && sidebar) {
-    toggle.addEventListener('click', function() {
-      sidebar.classList.toggle('open');
-    });
+  if (!toggle || !sidebar) return;
+
+  // Create backdrop element
+  var backdrop = document.createElement('div');
+  backdrop.className = 'sidebar-backdrop';
+  document.body.appendChild(backdrop);
+
+  function closeSidebar() {
+    sidebar.classList.remove('open');
+    backdrop.classList.remove('open');
   }
 
+  function toggleSidebar() {
+    sidebar.classList.toggle('open');
+    backdrop.classList.toggle('open');
+  }
+
+  toggle.addEventListener('click', toggleSidebar);
+  backdrop.addEventListener('click', closeSidebar);
+
   // Close sidebar when a nav link is clicked (mobile)
-  var navLinks = sidebar ? sidebar.querySelectorAll('a') : [];
+  var navLinks = sidebar.querySelectorAll('a');
   navLinks.forEach(function(link) {
     link.addEventListener('click', function() {
       if (window.innerWidth <= 768) {
-        sidebar.classList.remove('open');
+        closeSidebar();
       }
     });
   });