init

javascript-version/@layouts/components/VerticalNavLink.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { NuxtLink } from '#components'
+
+
+const props = defineProps({
+  item: {
+    type: null,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <li
+    class="nav-link"
+    :class="{ disabled: item.disable }"
+  >
+    <Component
+      :is="item.to ? NuxtLink : 'a'"
+      :to="item.to"
+      :href="item.href"
+      :target="item.target"
+    >
+      <VIcon
+        :icon="item.icon || 'bxs-circle'"
+        class="nav-item-icon"
+      />
+      <!-- 👉 Title -->
+      <span class="nav-item-title">
+        {{ item.title }}
+      </span>
+      <span
+        class="nav-item-badge"
+        :class="item.badgeClass"
+      >
+        {{ item.badgeContent }}
+      </span>
+    </Component>
+  </li>
+</template>
+
+<style lang="scss">
+.layout-vertical-nav {
+  .nav-link a {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+</style>