<script setup lang="ts">
import { RouterLink } from "vue-router";
import NavToggle from "@/components/NavToggle.vue";

interface Props {
  isActive: boolean;
}

interface Route {
  href: string;
  title: string;
}

const routerLinks: Array<Route> = [
  { href: "/", title: "Home" },
  { href: "/anatomy", title: "Anatomy" },
  { href: "/career-path", title: "Career Path" },
];

const props = defineProps<Props>();
</script>

<template>
  <nav class="navigation" :class="{ open: props.isActive }">
    <div class="navigation__background" @click="$emit('selected')"></div>

    <NavToggle class="navigation__toggle" @click="$emit('selected')" />

    <ul class="navigation__list">
      <li
        class="navigation__item"
        v-for="(route, idx) in routerLinks"
        :key="idx"
      >
        <RouterLink :to="route.href" @click="$emit('selected')">
          {{ route.title }}
        </RouterLink>
      </li>
    </ul>
  </nav>
</template>

<style lang="scss">
.navigation {
  position: fixed;
  z-index: 9000;

  &__background {
    position: fixed;

    background-color: rgba(#000, 0);
    backdrop-filter: blur(0rem);

    transition: 1s;
  }

  &.open &__background {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: rgba(#000, 0.75);
    backdrop-filter: blur(0.25rem);
  }

  &__toggle {
    display: none;
    position: fixed;
    z-index: 9000;
  }

  &.open &__toggle {
    display: flex;
    top: 0;
    left: 0;
  }

  &__list {
    background-color: var(--color-navigation-background);
    width: var(--navigation-width);

    list-style: none;

    margin: 0;
    padding: 3.5rem 0 0 0;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: -100vw;

    transition: left ease-in-out 0.4s;
  }

  &.open &__list {
    left: 0;
  }

  &__item {
    font-size: var(--navigation-item-font-size);
    line-height: var(--navigation-item-line-height);
  }

  a {
    display: block;
    font-weight: bold;
    color: var(--color-router-link);
    padding: 0 var(--container-spacing-right-safe) 0
      var(--container-spacing-left-safe);

    box-shadow: inset 0 0 0 0 var(--color-link-text-underline);

    &:hover {
      color: var(--color-router-link-hover);
      box-shadow: inset var(--navigation-width) 0 0 0 var(--color-router-link);
    }

    &:before {
      content: "👉";
      font-size: 2rem;
      margin: 0 1rem 0 0;
    }

    &.router-link-exact-active {
      color: var(--color-router-link-active);
    }
  }
}
</style>
