<template>
  <MyCv />
  <div class="menu">
    <a role="button" href="./CV-NicolasMarsal.pdf" download>
      <DownloadIcon width="32" height="32" />
    </a>
  </div>
  <div
    style="
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0);
      width: 20px;
      height: 20px;
    "
    @click.shift.alt="generatePdf()"
  />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useSelectedSkill } from "@/stores/selectedSkill";
import MyCv from "@/components/cv/MyCv.vue";
import DownloadIcon from "@/components/icons/DownloadIcon.vue";

export default defineComponent({
  name: "app",
  components: {
    MyCv,
    DownloadIcon,
  },
  setup() {
    const store = useSelectedSkill();

    return {
      unselect: store.unselect,
    };
  },
  methods: {
    generatePdf() {
      this.unselect();
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      window.downloadPdf();
    },
  },
});
</script>

<style>
.menu {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  padding-top: 6px;
}
</style>
