ilk commit

src/components/NavItem.vue

@@ -0,0 +1,96 @@
+<template>
+  <template
+    v-if="
+      (itemData !== undefined && itemData?.to !== undefined && itemData?.to !== '') ||
+      routeTo !== undefined
+    ">
+    <RouterLink
+      :to="goToRoute"
+      :class="[
+        itemData !== undefined && itemData.sub !== undefined && (itemData.showsub === undefined || itemData.showsub)
+          ? 'menu-have-sub menu-sub-hover-d'
+          : ''
+      ]">
+      <i
+        class="ico-c ico-menu-side"
+        v-if="
+          (itemData !== undefined &&
+            itemData?.ico !== undefined &&
+            itemData?.ico !== '') ||
+          icon !== undefined
+        ">
+        <svg>
+          <use :href="icourl + '#' + (icon !== undefined ? icon : itemData?.ico)" />
+        </svg>
+      </i>
+      <span>
+        {{
+          title !== undefined
+            ? title
+            : itemData !== undefined && itemData.title !== undefined
+            ? itemData.title
+            : ''
+        }}
+      </span>
+    </RouterLink>
+  </template>
+  <div
+    v-else
+    :class="[
+      (itemData !== undefined && itemData.sub !== undefined) ||
+      ((clickable !== undefined && clickable) || (itemData?.clickable !== undefined && itemData?.clickable))
+        ? 'menu-have-sub menu-sub-hover-d'
+        : ''
+    ]"
+    @click="OnClick">
+    <i
+      class="ico-c ico-menu-side"
+      v-if="
+        (itemData !== undefined && itemData?.ico !== undefined && itemData?.ico !== '') ||
+        icon !== undefined
+      ">
+      <svg>
+        <use :href="icourl + '#' + (icon !== undefined ? icon : itemData?.ico)" />
+      </svg>
+    </i>
+    <span>
+      {{
+        title !== undefined
+          ? title
+          : itemData !== undefined && itemData.title !== undefined
+          ? itemData.title
+          : ''
+      }}
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import icourl from '@/assets/images/icons.svg'
+
+  interface NavItemObj {
+    [key: string]: any
+    title?: string
+    ico?: string
+    to?: string
+    clickable?: boolean
+  }
+
+  const props = defineProps<{
+    itemData?: NavItemObj
+    icon?: string
+    title?: string
+    routeTo?: string
+    clickable?: boolean
+  }>()
+
+  const goToRoute = computed<any>(() => {
+    return props.routeTo !== undefined ? props.routeTo : props.itemData?.to
+  })
+
+  const emit = defineEmits(['click'])
+
+  const OnClick = (e: Event) => {
+    emit('click', props.itemData)
+  }
+</script>