http://chobocho.com/assets/menu.js

1(function () {
2  const links = [
3    { href: "index.html",                                  label: "Home",      key: "home" },
4    { href: "https://chobocho.tistory.com",                label: "Diary",     key: "diary",     external: true },
5    { href: "game.html",                                   label: "Game",      key: "game" },
6    { href: "https://chobocho.tistory.com/guestbook",      label: "Guestbook", key: "guestbook", external: true },
7    { href: "https://twitter.com/chobocho",                label: "Twitter",   key: "twitter",   external: true },
8    { href: "m/",                                          label: "Mobile",    key: "mobile" },
9  ];
10
11  function render() {
12    const mount = document.getElementById("menu-mount");
13    if (!mount) return;
14
15    const active = (mount.dataset.active || "").toLowerCase();
16    const hideBrand = mount.dataset.hideBrand === "true";
17    const nav = document.createElement("nav");
18    nav.className = "topnav";
19
20    const inner = document.createElement("div");
21    inner.className = "topnav-inner";
22    if (hideBrand) inner.classList.add("is-brand-hidden");
23
24    if (!hideBrand) {
25      const brand = document.createElement("a");
26      brand.className = "brand";
27      brand.href = "index.html";
28      brand.textContent = "chobocho.com";
29      inner.appendChild(brand);
30    }
31
32    const ul = document.createElement("ul");
33    ul.className = "nav-links";
34    for (const link of links) {
35      const li = document.createElement("li");
36      const a = document.createElement("a");
37      a.href = link.href;
38      a.textContent = link.label;
39      if (link.key === active) a.classList.add("is-active");
40      if (link.external) {
41        a.target = "_blank";
42        a.rel = "noopener noreferrer";
43      }
44      li.appendChild(a);
45      ul.appendChild(li);
46    }
47    inner.appendChild(ul);
48
49    nav.appendChild(inner);
50    mount.replaceWith(nav);
51  }
52
53  if (document.readyState === "loading") {
54    document.addEventListener("DOMContentLoaded", render);
55  } else {
56    render();
57  }
58})();