kodadot/nft-gallery

<template>
  <div class="flex items-center">
    <div
      v-if="account"
      class="navbar-item"
    >
      <NavbarConnectedProfile
        :address="account"
        @click="toggleWalletConnectModal"
      />
    </div>
    <div
      v-else
      class="flex items-center"
    >
      <NeoDropdown
        position="bottom-left"
        aria-role="menu"
        menu-class="mt-0"
        :triggers="['hover']"
      >
        <template #trigger>
          <a
            class="navbar-item my-4"
            role="button"
          >
            <img
              :src="profileIcon"
              alt="profile"
            >
          </a>
        </template>

        <NeoDropdownItem aria-role="menuitem">
          <div
            class="flex items-center"
            @click="toggleLanguageMenu"
          >
            {{ $t('profileMenu.language') }}&nbsp;<NeoIcon icon="globe" />
          </div>
        </NeoDropdownItem>
        <NeoDropdownItem aria-role="menuitem">
          <ColorModeButton />
        </NeoDropdownItem>
        <NeoDropdownItem aria-role="menuitem">
          <NavbarCookiesButton />
        </NeoDropdownItem>
      </NeoDropdown>

      <div v-if="!account">
        <ConnectWalletButton
          class="button-connect-wallet px-4"
          variant="primary"
          no-shadow
          @toggle-connect-modal="toggleWalletConnectModal"
        />
      </div>
    </div>

    <NeoDropdown
      ref="languageDropdown"
      position="bottom-left"
      aria-role="menu"
      :toggle="toggleLanguageMenu"
    >
      <NeoDropdownItem
        aria-role="listitem"
        class="is-active flex items-center language-heading text-base"
        @click="toggleLanguageMenu"
      >
        <span>{{ $t('profileMenu.language') }} <NeoIcon icon="globe" /></span>
      </NeoDropdownItem>

      <NeoDropdownItem
        v-for="lang in langsFlags"
        :key="lang.value"
        aria-role="listitem"
        :value="lang.value"
        :class="{ 'is-active': $i18n.locale === lang.value }"
        @click="setUserLocale(lang.value)"
      >
        <span>{{ lang.flag }} {{ lang.label }}</span>
      </NeoDropdownItem>
    </NeoDropdown>
  </div>
</template>

<script lang="ts" setup>
import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
import { useIdentityStore } from '@/stores/identity'
import {
  langsFlags as langsFlagsList,
  setUserLocale,
} from '@/utils/config/i18n'
import { openConnectWalletModal } from '@/components/common/ConnectWallet/useConnectWallet'
import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
import { useProfileOnboardingStore } from '@/stores/profileOnboarding'

const identityStore = useIdentityStore()
const { isDarkMode } = useTheme()
const { neoModal } = useProgrammatic()

const languageDropdown = ref(null)

const account = computed(() => identityStore.getAuthAddress)
const profileIcon = computed(() =>
  isDarkMode.value ? '/profile-dark.svg' : '/profile.svg',
)
const langsFlags = computed(() => langsFlagsList)

const toggleWalletConnectModal = () => {
  useProfileOnboardingStore().setSidebarToggled()
  neoModal.closeAll()

  if (!document.querySelector('.connect-wallet-modal')) {
    openConnectWalletModal()
  }
}

const toggleLanguageMenu = () => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  languageDropdown.value?.toggle()
}
</script>