website/_components/navbar.tsx

export default function() {
  const iconStyle = {
    filter: "var(--filter-green)",
  };

  return (
    <nav className="navbar">
      <ul className="navbar-list">
        <li className="navbar-list-item home">
          <a href="/" title="Home">
            <img
              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/home.svg"
              className="icon"
              style={iconStyle}
              alt="home"
            />
          </a>
        </li>
        <li className="navbar-list-item">
          <a href="/blog/" title="Blog">
            <img
              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/news.svg"
              className="icon"
              style={iconStyle}
              alt="blog"
            />
          </a>
        </li>
        <li className="navbar-list-item">
          <a href="/resume/" title="Resume">
            <img
              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/file-cv.svg"
              className="icon"
              style={iconStyle}
              alt="resume"
            />
          </a>
        </li>
        <li className="navbar-list-item">
          <a href="/gpg-key/" title="GPG Key">
            <img
              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/key.svg"
              className="icon"
              style={iconStyle}
              alt="gpg key"
            />
          </a>
        </li>
        <li className="navbar-list-item">
          <a href="/about/" title="About">
            <img
              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/info-circle.svg"
              className="icon"
              style={iconStyle}
              alt="about"
            />
          </a>
        </li>
      </ul>
    </nav>
  );
}