Navigation Button Item v1.0

<script lang="ts" setup>
import { computed } from 'vue';

import { RouteLocation, useRouter } from 'vue-router';

import { EMenuItem } from 'types/menu/EMenuItem';

import ENavigationButtonItemDisplay from '../e-navigation-button-item-display/e-navigation-button-item-display.vue';

export type Props = {
  menuItem: EMenuItem;
  route: RouteLocation;
  parentKey: string;
};
const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits<{
  (e: 'toggle:nav-menu'): void;
}>();

const router = useRouter();

const isExternalUrl = computed(() => {
  return props.menuItem?.targetBlank ? '_blank' : '';
});

const targetPage = computed(() => {
  return props.menuItem?.url ?? '/';
});

const subMenuItems = computed(() => {
  return props.menuItem?.menuItems ?? [];
});

function navItemClick() {
  if (isExternalUrl.value == '_blank') {
    const pageUrl = targetPage.value.startsWith('/')
      ? `${window.location.protocol}//${window.location.host}${targetPage.value}`
      : targetPage.value;

    window.open(pageUrl, '_blank');
  } else {
    emit('toggle:nav-menu');
    router.push(targetPage.value);
  }
}

const isActivePath = computed(() => {
  const encodedRoute = encodeURI(targetPage?.value);
  const encodedCurrentRoute = encodeURI(props.route?.fullPath);

  return encodedRoute === encodedCurrentRoute;
});
</script>

<template>
  <div class="e-navigation-button-item">
    <e-navigation-button-item-display
      :menu-item="menuItem"
      :is-active="isActivePath"
      @click="navItemClick"
      @keydown.enter="emit('toggle:nav-menu')"
    />

    <div
      v-if="subMenuItems.length"
      class="sub-items"
    >
      <e-navigation-button-item
        v-for="subMenuItemSubItem in subMenuItems"
        :key="subMenuItemSubItem?.key"
        class="e-navigation-sub-button-item"
        :menu-item="subMenuItemSubItem"
        :route="route"
        :parent-key="subMenuItemSubItem?.displayText"
        @toggle:nav-menu="emit('toggle:nav-menu')"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.e-navigation-button-item {
  display: flex;
  flex-direction: column;

  .sub-items {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    padding: 0;
  }
}
</style>