header.html

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand mb-1" href="index.html">
        <img
          id="headImg"
          width="30"
          height="30"
          class="d-inline-block align-top"
          alt=""
        />
        Box's Nootbook
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              <img
                id="categoryImg"
                width="25"
                height="25"
                class="d-inline-block align-top"
                alt=""
              />
              Category
            </a>
            <div
              id="catDropDownMenu"
              class="dropdown-menu"
              aria-labelledby="navbarDropdown"
            ></div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="label.html?label=all">
              <img
                id="labelImg"
                width="25"
                height="25"
                class="d-inline-block align-top"
                alt=""
              />
              Label <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              href="https://bboxlin.github.io/"
              target="_blank"
            >
              <img
                id="appImg"
                width="24"
                height="24"
                class="d-inline-block align-top"
                alt=""
              />
              Apps <span class="sr-only">(current)</span></a
            >
          </li>
             <li class="nav-item">
            <a
              class="nav-link"
              href="review.html"
            >
              <img
                id="reviewImg"
                width="24"
                height="24"
                class="d-inline-block align-top"
                alt=""
              />
              Review <span class="sr-only">(current)</span></a
            >
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input
            class="form-control mr-sm-2"
            type="search"
            placeholder="Search"
            aria-label="Search"
          />
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
            Search
          </button>
        </form>
      </div>
    </div>
  </nav>

  <script>
    const headCategoriesInit = async () => {
      try {
        const config = await readConfig("./config.yaml");
        const cats = await getCategories(config.username, config.repo);
        for (const cat of cats) {
          let a = $(
            `<a class="dropdown-item" href="category.html?category=${cat.title}&number=${cat.number}">${cat.title}</a>`
          );
          $("#catDropDownMenu").append(a);
        }
      } catch (err) {
        console.log(err);
      }
    };

    headCategoriesInit();
  </script>
</header>
<style>
  #header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* This ensures the header is on top of other elements */
  }
</style>