<template>
  <div :class="['nav-list', { 'menu-open': !menuIsClosed }]">
    <ul class="responsive">
      <li class="logged-link link-first">
        <Link
          :text="$t('general.header.contribute_text')"
          :route="{ name: 'why-contribute' }"
          look="link--blue-dark"
          @click.native="$emit('triggerClose')"
        />
      </li>
      <li class="logged-link">
        <Link
          :text="$t('general.header.upload_text')"
          look="button button--blue"
          :route="{ name: 'upload-pictures' }"
          @click.native="$emit('triggerClose')"
        />
      </li>
    </ul>
    <div class="separator responsive"></div>
    <ul>
      <li class="logged-link responsive">
        <Link
          :text="$t('general.header.sequences_text')"
          :route="{ name: 'my-sequences' }"
          :image="{
            url: 'icon/photos.svg',
            alt: $t('general.header.alt_photos')
          }"
          look="link--blue-dark"
          @click.native="$emit('triggerClose')"
        />
      </li>
      <li class="logged-link desktop">
        <Link
          :text="$t('general.header.contribute_text')"
          :route="{ name: 'why-contribute' }"
          :image="{
            url: 'icon/photos.svg',
            alt: $t('general.header.alt_photos')
          }"
          look="link--blue-dark"
          @click.native="$emit('triggerClose')"
        />
      </li>
      <li v-if="userProfileUrlLength" class="logged-link">
        <Link
          :route="{ name: 'my-information' }"
          :image="{
            url: 'icon/information.svg',
            alt: $t('general.header.alt_information')
          }"
          :text="$t('general.header.my_information_text')"
          look="link--blue-dark"
          @click.native="$emit('triggerClose')"
        />
      </li>
      <li class="logged-link">
        <Link
          :route="{ name: 'my-settings' }"
          :image="{
            url: 'icon/settings.svg',
            alt: $t('general.header.alt_logo')
          }"
          :text="$t('general.header.my_settings_text')"
          look="link--blue-dark"
          @click.native="$emit('triggerClose')"
        />
      </li>
      <li class="logged-link">
        <Link
          type="external"
          :text="$t('general.header.logout_text')"
          :image="{
            url: 'icon/logout.svg',
            alt: $t('general.header.alt_logout')
          }"
          :path-external="getAuthRoute('auth/logout', route.path)"
          look="link--blue-dark"
          @click.native="$emit('triggerClose')"
        />
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { getAuthRoute } from '@/utils/auth'
const route = useRoute()
import Link from '@/components/Link.vue'
defineProps({
  menuIsClosed: { type: Boolean, default: true },
  userProfileUrlLength: { type: Number, default: 0 }
})
</script>

<style scoped lang="scss">
ul {
  margin: 0;
  padding: toRem(2) 0;
}
.nav-list {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  position: absolute;
  width: toRem(25);
  top: toRem(8);
  right: 0;
  z-index: 3;
  background-color: var(--white);
  box-shadow: 0 toRem(0.2) toRem(0.4) rgb(0 0 0 / 10%);
  border-radius: toRem(1);
  padding: toRem(1) toRem(2);
}
.separator {
  height: toRem(0.1);
  background-color: var(--grey);
  width: 100%;
  margin-top: toRem(1);
  margin-bottom: toRem(0.5);
}
.menu-open {
  display: flex;
}
.logged-link {
  padding: toRem(1);
  display: flex;
}
.link-first {
  margin-bottom: toRem(1);
}
.logged-link:hover {
  border-radius: toRem(0.5);
  background-color: var(--grey);
}
.responsive {
  display: none;
}
.desktop {
  display: flex;
}
@media (max-width: toRem(76.8)) {
  .nav-list {
    top: toRem(11);
    width: 100%;
    border-radius: initial;
  }
  .desktop {
    display: none;
  }
  .responsive {
    display: block;
  }
  .logged-link {
    padding: toRem(0);
    margin-bottom: toRem(2);
  }
}
</style>
