<nav class="flex items-center flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 mr-6 {{router.url == '/' ? 'text-white' : 'text-neutral'}}">
    <span class="font-semibold text-xl tracking-tight">
      <a href="/">Home</a>
    </span>
  </div>
  <div class="text-xl font-bold lg:flex-grow">
        <span class="font-semibold text-xl tracking-tight">
    <a href="biography"
       class="block mt-0 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4 {{router.url == '/biography' ? 'text-white' : 'text-neutral'}}">
      Bio
    </a>
        </span>
    <!--<a href="portfolio" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
      Portfolio
    </a>-->
    <!--<a href="projects" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
      Projects
    </a>-->
    <!--<a href="like-dislike" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
      Like/Dislike
    </a>
    <a href="links" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
      Links
    </a>-->
    <!--<a href="blog" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
      Blog
    </a>-->
  </div>
  <!--<div class="">
    <iov-button-cta
      [url]="'mailto:thisloke@gmail.com'">
      Say Hello
    </iov-button-cta>
  </div>-->
</nav>

