---
import { Image } from "astro:assets";
const { home, posts, proyectos } = Astro.props;
---

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center" href={home ? home : "/"}>
      <Image
        src="/imgs/logo.png"
        alt="Logo Ecobjetivos"
        class="me-2 biglogo"
        height="25"
        width="25"
      />
      &nbsp Ecobjetivos
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a type="button" class="nav-link btn btn-light" href={posts ? posts : "#posts"}>Posts</a>
        </li>
        <li class="nav-item">
          <a type="button" class="nav-link btn btn-light" href={proyectos ? proyectos : "#proyectos"}
            >Proyectos</a
          >
        </li>
      </ul>
    </div>
  </div>
</nav>

<style>
  .biglogo {
    scale: 1.5;
  }
</style>
