export default function({ nav }) {
  const defaultIcon = "https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/question-mark.svg";

  const iconStyle = {
    filter: "var(--filter-blue)",
  };

  return (
    <nav className="navbar">
      <ul className="navbar-list">
        <li className="navbar-list-item home">
          <a href="/">
            <img
              src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/home.svg"
              className="icon"
              style={iconStyle}
            />
          </a>
        </li>
        {nav.menu().children.map(navItem => (
          <li className="navbar-list-item">
            <a href={`/${navItem.slug}`} title={navItem.data.title}>
              <img
                src={navItem.data.nav_icon || defaultIcon}
                className="icon"
                style={iconStyle}
              />
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}