<script>
import {mapState} from "vuex";

export default {
  props: ["toggleModal", "modal"],

  data: function () {
    return {
      linkStyle: "block text-left text-xl " +
        "text-white " +
        "hover:text-accent transition-colors duration-400 " +
        "sm:mx-3 md:mx-4 sm:pt-2 mb-2"
    }
  },

  computed: {
    ...mapState(["socialProfiles"]),

    isMobileMenuOpened() {
      return this.$store.state.isMobileMenuOpened
    }
  },

  methods: {
    onMobileMenuLinkClick() {
      this.$store.commit('toggleMobileMenu', false)
    }
  }
};
</script>

<template>
  <!-- App header navigation links -->
  <div
    :class="isMobileMenuOpened ? 'block' : 'hidden'"
    class="
      font-general-regular

      m-0
      mt-5
      p-5
      py-12

      backdrop-blur-lg
      justify-center
      items-center
      animate-slide-down-fast

      sm:backdrop-filter-none
      sm:animate-none
      sm:mt-0
      sm:flex
      sm:p-0
    "
  >
    <NuxtLink
      :to="{path: '/', hash: '#portfolio'}"
      :class="linkStyle"
      aria-label="Portfolio"
      @click.native="onMobileMenuLinkClick"
    >
      Портфолио
    </NuxtLink>

    <NuxtLink
      :to="{path: '/', hash: '#about'}"
      :class="linkStyle"
      class="
        border-t-2
        pt-3
        sm:pt-2 sm:border-t-0
        border-primary-light

      "
      aria-label="About Me"
      @click.native="onMobileMenuLinkClick"
    >
      Обо мне
    </NuxtLink>

    <NuxtLink
      :to="{path: '/', hash: '#contact'}"
      :class="linkStyle"
      class="
        border-t-2
        pt-3
        sm:pt-2 sm:border-t-0
        border-primary-light

      "
      aria-label="Contact"
      @click.native="onMobileMenuLinkClick"
    >
      Контакты
    </NuxtLink>
  </div>
</template>

<style>

</style>
