<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "NavLinks",
  components: {},
  setup() {
    return {};
  },
});
</script>

<template>
  <nav class="menu-nav">
    <ul class="links-list">
      <li class="link-item">
        <RouterLink to="/categoria/ramos">Ramos</RouterLink>
      </li>

      <li class="link-item">
        <RouterLink to="/categoria/plantas">Plantas</RouterLink>
      </li>

      <!-- <li class="link-item">
        <RouterLink to="/category">Floranet</RouterLink>
      </li> -->

      <!-- <li class="link-item">
        <RouterLink to="/category">FAQs</RouterLink>
      </li> -->

      <li class="link-item">
        <a href="#question-section">Contacta</a>
      </li>
    </ul>
  </nav>
</template>

<style lang="scss" scoped>
.menu-nav .links-list {
  display: flex;
  gap: 16px;

  & .link-item a {
    color: $white;
  }

  @media only screen and (max-width: calc($med-xmd + 100px)) {
    display: none;
  }
}
</style>
