Skip to main content

oefenhub_leerling_05_geschiedenis_overzicht_v1_3.html

Korte beschrijving​

Deze mockup toont het geschiedenisoverzicht binnen één specifieke oefening, zoals Rekenen > Optellen.

De leerling ziet afgeronde runs, kan filteren op periode en kan een resultaatregel openen. Niet-afgeronde runs horen niet in dit overzicht thuis.

Gerelateerde documentatie​

Bestand​

Broncode​

/mockups_html/leerling/oefenhub_leerling_05_geschiedenis_overzicht_v1_3.html
<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>OefenHub - Rekenen - Optellen - Geschiedenis</title>
  <link href="./oefenhub_shared_logo.css" rel="stylesheet">
  <style>
    :root {
      --blue-1: #8fd0ff;
      --blue-2: #5bb3ff;
      --blue-3: #1f82e9;
      --blue-4: #0d5db8;
      --text: #114f95;
      --muted: #5f7ea5;
      --line: rgba(17,79,149,.12);
      --orange-1: #ffbb4d;
      --orange-3: #f87400;
      --green-1: #8adf67;
      --green-2: #57ba3c;
      --yellow-1: #ffd04e;
      --shadow: 0 12px 28px rgba(35, 100, 177, 0.12);
      --shadow-soft: 0 8px 18px rgba(35, 100, 177, 0.08);
      --card-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,249,255,.96));
      --card-border: 1px solid rgba(170,204,238,.62);
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      min-height: 100vh;
      overflow-x: hidden;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 8% 14%, rgba(255,255,255,.68) 0 12%, transparent 13%),
        radial-gradient(circle at 18% 10%, rgba(255,255,255,.45) 0 9%, transparent 10%),
        radial-gradient(circle at 86% 17%, rgba(255,255,255,.58) 0 11%, transparent 12%),
        linear-gradient(180deg, #7ec2f8 0%, #bfe2fd 15%, #edf7ff 34%, #f7fbff 100%);
    }

    .wrap {
      width: min(1220px, calc(100% - 30px));
      margin: 0 auto;
    }

    .hub-page {
      padding: 22px 0 28px;
    }

    .breadcrumb-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: 0 0 14px;
      font-size: 13px;
      font-weight: 800;
      color: #5f7ea5;
    }

    .breadcrumb-bar a {
      color: #2364a7;
      text-decoration: none;
    }

    .breadcrumb-bar a:hover {
      text-decoration: underline;
    }

    .breadcrumb-sep {
      opacity: .7;
    }

    .header {
      padding: 10px 0 12px;
      background: linear-gradient(180deg, rgba(100,171,238,.92), rgba(120,192,248,.85));
      border-bottom: 1px solid rgba(255,255,255,.38);
      box-shadow: 0 8px 20px rgba(28, 100, 177, .08);
      position: relative;
      z-index: 5;
    }

    .header-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 16px;
    }

    .brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: 250px;
    }

    .welcome-text {
      margin-top: -10px;
      margin-left: 53px;
      font-size: 12px;
      color: rgba(17,79,149,.82);
      font-weight: 700;
    }

    .nav-pills {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .nav-item {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .pill {
      border: 0;
      border-radius: 14px;
      padding: 10px 16px;
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      box-shadow: var(--shadow-soft);
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
      transition: all .18s ease;
    }

    .pill.orange { background: linear-gradient(180deg, #ffbb4d, #ff7f12); }
    .pill.blue { background: linear-gradient(180deg, #2f88ea, #176acc); }
    .pill.yellow { background: linear-gradient(180deg, #ffd04d, #f4ab08); }
    .pill.green { background: linear-gradient(180deg, #8adf67, #58ba3d); }

    .pill.has-chevron {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding-right: 14px;
    }

    .pill-caret {
      font-size: 12px;
      line-height: 1;
      transform: translateY(1px);
    }

    .pill:hover {
      filter: brightness(1.06);
      transform: translateY(-1px);
    }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: 306px;
      max-width: calc(100vw - 32px);
      background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,250,255,.98));
      border-radius: 20px;
      box-shadow: 0 12px 24px rgba(35,100,177,.16);
      border: 1px solid rgba(170,204,238,.55);
      padding: 10px 12px;
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }

    .dropdown-menu::before {
      content: "";
      position: absolute;
      top: -10px;
      left: 36px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid rgba(255,255,255,.97);
      filter: drop-shadow(0 -1px 0 rgba(170,204,238,.45));
    }

    .nav-item:hover .dropdown-menu,
    .nav-item:focus-within .dropdown-menu,
    .nav-item.open .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .menu-list {
      display: flex;
      flex-direction: column;
    }

    .menu-link {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 9px;
      padding: 8px 11px;
      border-radius: 13px;
      text-decoration: none;
      color: #18518f;
      font-size: 15px;
      font-weight: 900;
      box-shadow: inset 0 -1px 0 rgba(17,79,149,.10);
      transition: background .18s ease, transform .18s ease;
    }

    .menu-link:last-child { box-shadow: none; }

    .menu-link:hover,
    .menu-link.is-active {
      background: linear-gradient(180deg, #edf5ff, #dcecff);
    }

    .menu-link:hover { transform: translateX(2px); }

    .menu-icon {
      width: 23px;
      height: 23px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 0 6px 12px rgba(35,100,177,.12);
    }

    .menu-icon.green { background: linear-gradient(180deg, #89da69, #59bb3e); }
    .menu-icon.blue { background: linear-gradient(180deg, #67baf4, #2f88ea); }
    .menu-icon.yellow { background: linear-gradient(180deg, #ffd45e, #f4ac10); }
    .menu-icon.purple { background: linear-gradient(180deg, #9c7af2, #6b49dd); }

    .menu-arrow {
      color: #0d5db8;
      font-size: 24px;
      line-height: 1;
    }

    .header-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      min-width: 120px;
    }

    .mail-btn, .profile-chip {
      border: 0;
      box-shadow: var(--shadow-soft);
      cursor: pointer;
      transition: all .18s ease;
    }

    .mail-btn {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffffff, #eef6ff);
      color: var(--blue-4);
      font-size: 17px;
    }

    .badge {
      position: absolute;
      right: -2px;
      bottom: -2px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: #e23838;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
    }

    .profile-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffffff, #edf6ff);
      padding: 0;
    }

    .avatar {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      background: linear-gradient(180deg, #ffb247, #ff8120);
    }

    .mail-btn:hover, .profile-chip:hover {
      background: linear-gradient(180deg, #ffffff, #e4f1ff);
      transform: translateY(-1px);
    }

    .history-card {
      background: var(--card-bg);
      border: var(--card-border);
      border-radius: 26px;
      box-shadow: var(--shadow);
      padding: 22px;
    }

    .history-topbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    .history-title-wrap h1 {
      margin: 0 0 8px;
      font-size: 22px;
      line-height: 1.15;
      color: #0d5db8;
      font-weight: 900;
      letter-spacing: -0.01em;
    }

    .history-title-wrap p {
      margin: 0;
      max-width: 760px;
      font-size: 14px;
      line-height: 1.55;
      color: #18599e;
      font-weight: 500;
    }

    .back-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      border: 0;
      border-radius: 999px;
      padding: 0 16px;
      font-size: 13px;
      font-weight: 900;
      color: #fff;
      background: linear-gradient(180deg, #2f88ea, #176acc);
      box-shadow: var(--shadow-soft);
      cursor: pointer;
      white-space: nowrap;
      transition: transform .18s ease, filter .18s ease;
    }

    .back-button:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
    }

    .history-panel {
      padding: 16px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(244,250,255,.98), rgba(235,246,255,.96));
      border: var(--card-border);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-soft);
    }

    .history-filters {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 14px;
      font-size: 13px;
    }

    .history-filters a,
    .history-filters span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 0 11px;
      border-radius: 999px;
      color: #2364a7;
      text-decoration: none;
      font-weight: 800;
      border: 1px solid rgba(170,204,238,.45);
      background: rgba(255,255,255,.74);
    }

    .history-filters a:hover {
      background: #fff;
      text-decoration: underline;
    }

    .history-filters .active {
      color: #fff;
      background: linear-gradient(180deg, #2f88ea, #176acc);
      border-color: rgba(31,102,204,.95);
      font-weight: 900;
      pointer-events: none;
    }

    .history-table-wrap {
      overflow-x: auto;
      border-radius: 18px;
      background: rgba(255,255,255,.95);
      border: var(--card-border);
      box-shadow: var(--shadow-soft);
    }

    .history-table {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
    }

    .history-table thead th {
      padding: 11px 12px;
      text-align: left;
      font-size: 13px;
      color: #355f9d;
      font-weight: 900;
      background: linear-gradient(180deg, rgba(242,247,255,.98), rgba(232,241,255,.98));
      border-bottom: 1px solid rgba(171,195,233,.95);
      white-space: nowrap;
    }

    .history-table tbody td {
      padding: 8px 12px;
      font-size: 14px;
      color: #214b8d;
      font-weight: 700;
      border-bottom: 1px solid rgba(180,201,235,.65);
      background: rgba(255,255,255,.96);
    }

    .history-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .history-table tbody tr {
      cursor: pointer;
      transition: background .16s ease;
    }

    .history-table tbody tr:hover td {
      background: rgba(236,245,255,.98);
    }

    .history-table .good { color: #2a9150; }
    .history-table .wrong { color: #c36c34; }
    .history-table .idea { color: #7d63be; }

    .history-table th:nth-child(3),
    .history-table th:nth-child(4),
    .history-table th:nth-child(5),
    .history-table th:nth-child(6),
    .history-table td:nth-child(3),
    .history-table td:nth-child(4),
    .history-table td:nth-child(5),
    .history-table td:nth-child(6) {
      text-align: center;
    }

    .history-note {
      margin: 10px 0 0;
      font-size: 13px;
      color: #5977a6;
      text-align: center;
      font-weight: 700;
    }

    .history-footer {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
    }

    .page-size {
      justify-self: start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: #4f6e9e;
      font-weight: 800;
    }

    .page-size select {
      border: 1px solid rgba(170,204,238,.72);
      background: rgba(255,255,255,.95);
      color: #214b8d;
      border-radius: 10px;
      padding: 7px 10px;
      font-size: 13px;
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    }

    .pagination {
      justify-self: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .page-pill {
      min-width: 34px;
      height: 34px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(153,184,232,.92);
      background: rgba(255,255,255,.98);
      color: #214b8d;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      text-decoration: none;
      box-shadow: 0 6px 12px rgba(61,103,172,.08);
    }

    .page-pill.active {
      color: #fff;
      background: linear-gradient(180deg, #2f88ea, #176acc);
      border-color: rgba(31,102,204,.95);
      pointer-events: none;
    }

    .history-footer .bottom-back {
      justify-self: end;
    }

    .site-footer {
      margin-top: 22px;
      padding: 24px 0 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(235,246,255,.92));
      border-top: 1px solid rgba(170,204,238,.62);
      border-radius: 26px 26px 0 0;
      box-shadow: 0 -10px 24px rgba(35,100,177,.06);
    }

    .footer-grid {
      width: min(1220px, calc(100% - 30px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr;
      gap: 22px;
      align-items: start;
    }

    .footer-col h4 {
      margin: 0 0 8px;
      font-size: 16px;
      color: #0f4d91;
      font-weight: 900;
    }

    .footer-col p {
      margin: 0;
      color: #5d7da4;
      font-size: 14px;
      line-height: 1.55;
      font-weight: 600;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .footer-links a {
      color: #2364a7;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      transition: color .18s ease;
    }

    .footer-links a:hover {
      color: var(--blue-4);
      text-decoration: underline;
    }

    .footer-bottom {
      width: min(1220px, calc(100% - 30px));
      margin: 18px auto 0;
      padding-top: 14px;
      border-top: 1px solid rgba(170,204,238,.56);
      color: #6b86aa;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    @media (max-width: 1120px) {
      .header-row {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
      }

      .brand {
        align-items: center;
        min-width: 0;
      }

      .header-actions {
        min-width: 0;
      }

      .nav-pills {
        flex-wrap: wrap;
      }

      .history-topbar {
        flex-direction: column;
        align-items: flex-start;
      }

      .history-footer {
        grid-template-columns: 1fr;
      }

      .page-size,
      .pagination,
      .history-footer .bottom-back {
        justify-self: center;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }
    }

    @media (max-width: 760px) {
      .hub-page {
        padding-top: 18px;
      }

      .history-card {
        padding: 18px;
        border-radius: 22px;
      }

      .history-title-wrap h1 {
        font-size: 20px;
      }

      .history-panel {
        padding: 12px;
      }

      .footer-grid,
      .footer-bottom,
      .wrap {
        width: min(100%, calc(100% - 24px));
      }
    }

    @media (max-width: 560px) {
      .dropdown-menu {
        left: 50%;
        transform: translate(-50%, -4px);
      }

      .nav-item:hover .dropdown-menu,
      .nav-item:focus-within .dropdown-menu,
      .nav-item.open .dropdown-menu {
        transform: translate(-50%, 0);
      }

      .history-filters {
        justify-content: flex-start;
      }

      .history-filters a,
      .history-filters span {
        flex: 1 1 auto;
      }
    }
  </style>
</head>
<body>
  <header class="header">
    <div class="wrap">
      <div class="header-row">
        <div class="brand">
          <div class="brand-logo" aria-label="OefenHub logo" role="img"></div>
          <div class="welcome-text">Welkom terug, Emma</div>
        </div>

        <div class="nav-pills">
          <div class="nav-item">
            <button class="pill orange has-chevron" type="button" aria-expanded="false" aria-controls="rekenen-menu">🔢 Rekenen <span class="pill-caret">▾</span></button>
            <div class="dropdown-menu" id="rekenen-menu">
              <div class="menu-list">
                <a href="#" class="menu-link is-active"><span class="menu-icon green">＋</span><span>Optellen</span><span class="menu-arrow">›</span></a>
                <a href="#" class="menu-link"><span class="menu-icon blue">−</span><span>Aftrekken</span></a>
                <a href="#" class="menu-link"><span class="menu-icon yellow">×</span><span>Vermenigvuldigen</span></a>
                <a href="#" class="menu-link"><span class="menu-icon purple">÷</span><span>Delen</span></a>
              </div>
            </div>
          </div>
          <button class="pill blue" type="button">📖 Taal</button>
          <button class="pill blue" type="button">🇬🇧 Engels</button>
          <button class="pill yellow" type="button">✏️ Spelling</button>
          <button class="pill green" type="button">🌍 Topografie</button>
        </div>

        <div class="header-actions">
          <button class="mail-btn" type="button" aria-label="Berichten">✉️<span class="badge">3</span></button>
          <button class="profile-chip" type="button" aria-label="Profiel"><span class="avatar">E</span></button>
        </div>
      </div>
    </div>
  </header>

  <main class="wrap hub-page">
    <nav class="breadcrumb-bar" aria-label="Breadcrumb">
      <a href="#">OefenHub</a>
      <span class="breadcrumb-sep">›</span>
      <a href="#">Rekenen</a>
      <span class="breadcrumb-sep">›</span>
      <a href="#">Optellen</a>
      <span class="breadcrumb-sep">›</span>
      <span>Geschiedenis</span>
    </nav>

    <section class="history-card">
      <div class="history-topbar">
        <div class="history-title-wrap">
          <h1>Geschiedenis</h1>
          <p>Hier zie je jouw eerder afgeronde oefeningen binnen <strong>Rekenen &gt; Optellen</strong>. Kies een periode, bekijk je resultaten en open een oefening opnieuw om het volledige resultaat terug te zien.</p>
        </div>
        <button class="back-button" type="button">Terug naar Optellen</button>
      </div>

      <div class="history-panel">
        <div class="history-filters" aria-label="Periodefilter geschiedenis">
          <a href="#">Afgelopen week</a>
          <span class="active">Huidige maand</span>
          <a href="#">Vorige maand</a>
          <a href="#">Huidige jaar</a>
          <a href="#">Alles</a>
        </div>

        <div class="history-table-wrap">
          <table class="history-table">
            <thead>
              <tr>
                <th>Nr.</th>
                <th>Afgerond</th>
                <th>Aantal oefeningen</th>
                <th>Aantal goed</th>
                <th>Aantal fout</th>
                <th>Aantal ‘Geen idee’</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>18-03-2026 · 16:42</td>
                <td>15</td>
                <td class="good">13</td>
                <td class="wrong">2</td>
                <td class="idea">0</td>
              </tr>
              <tr>
                <td>2</td>
                <td>17-03-2026 · 19:08</td>
                <td>20</td>
                <td class="good">16</td>
                <td class="wrong">3</td>
                <td class="idea">1</td>
              </tr>
              <tr>
                <td>3</td>
                <td>16-03-2026 · 15:27</td>
                <td>15</td>
                <td class="good">12</td>
                <td class="wrong">2</td>
                <td class="idea">1</td>
              </tr>
              <tr>
                <td>4</td>
                <td>14-03-2026 · 10:14</td>
                <td>10</td>
                <td class="good">9</td>
                <td class="wrong">1</td>
                <td class="idea">0</td>
              </tr>
              <tr>
                <td>5</td>
                <td>12-03-2026 · 18:51</td>
                <td>15</td>
                <td class="good">11</td>
                <td class="wrong">3</td>
                <td class="idea">1</td>
              </tr>
              <tr>
                <td>6</td>
                <td>10-03-2026 · 17:36</td>
                <td>20</td>
                <td class="good">18</td>
                <td class="wrong">2</td>
                <td class="idea">0</td>
              </tr>
              <tr>
                <td>7</td>
                <td>08-03-2026 · 11:02</td>
                <td>15</td>
                <td class="good">10</td>
                <td class="wrong">4</td>
                <td class="idea">1</td>
              </tr>
              <tr>
                <td>8</td>
                <td>05-03-2026 · 14:23</td>
                <td>15</td>
                <td class="good">14</td>
                <td class="wrong">1</td>
                <td class="idea">0</td>
              </tr>
            </tbody>
          </table>
        </div>

        <p class="history-note">Klik op een regel om het resultaat van die oefening te openen.</p>

        <div class="history-footer">
          <label class="page-size">Toon per pagina
            <select aria-label="Aantal regels per pagina">
              <option selected>20</option>
              <option>40</option>
              <option>60</option>
              <option>Alles</option>
            </select>
          </label>

          <div class="pagination" aria-label="Paginering geschiedenis">
            <a class="page-pill active" href="#">1</a>
            <a class="page-pill" href="#">2</a>
            <a class="page-pill" href="#">3</a>
            <a class="page-pill" href="#">Volgende</a>
          </div>

          <button class="back-button bottom-back" type="button">Terug naar Optellen</button>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="footer-grid">
      <div class="footer-col">
        <h4>OefenHub</h4>
        <p>OefenHub helpt kinderen spelenderwijs schoolvakken oefenen, herhalen en beter begrijpen. Alles overzichtelijk op één plek.</p>
      </div>

      <div class="footer-col">
        <h4>Handige Links</h4>
        <div class="footer-links">
          <a href="#">Over OefenHub</a>
          <a href="#">Contact</a>
          <a href="#">Privacybeleid</a>
        </div>
      </div>

      <div class="footer-col">
        <h4>Snel naar</h4>
        <div class="footer-links">
          <a href="#">Profiel</a>
          <a href="#">Berichten</a>
          <a href="#">Meld een probleem</a>
        </div>
      </div>
    </div>

    <div class="footer-bottom">
      <span>© 2026 OefenHub</span>
    </div>
  </footer>

  <script>
    (function () {
      const navItem = document.querySelector('.nav-item');
      const trigger = navItem?.querySelector('.pill');
      if (!navItem || !trigger) return;

      trigger.addEventListener('click', function (event) {
        event.preventDefault();
        const isOpen = navItem.classList.toggle('open');
        trigger.setAttribute('aria-expanded', String(isOpen));
      });

      document.addEventListener('click', function (event) {
        if (!navItem.contains(event.target)) {
          navItem.classList.remove('open');
          trigger.setAttribute('aria-expanded', 'false');
        }
      });
    })();
  </script>
</body>
</html>