init: чистый старт Laravel + Vuexy

resources/ts/@layouts/components/HorizontalNavLink.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { layoutConfig } from '@layouts'
+import { can } from '@layouts/plugins/casl'
+import type { NavLink } from '@layouts/types'
+import { getComputedNavLinkToProp, getDynamicI18nProps, isNavLinkActive } from '@layouts/utils'
+
+interface Props {
+  item: NavLink
+
+  // ℹ️ We haven't added this prop in vertical nav because we don't need such differentiation in vertical nav for styling
+  isSubItem?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isSubItem: false,
+})
+</script>
+
+<template>
+  <li
+    v-if="can(item.action, item.subject)"
+    class="nav-link"
+    :class="[{
+      'sub-item': props.isSubItem,
+      'disabled': item.disable,
+    }]"
+  >
+    <Component
+      :is="item.to ? 'RouterLink' : 'a'"
+      v-bind="getComputedNavLinkToProp(item)"
+      :class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }"
+    >
+      <Component
+        :is="layoutConfig.app.iconRenderer || 'div'"
+        class="nav-item-icon"
+        v-bind="item.icon || layoutConfig.verticalNav.defaultNavItemIconProps"
+      />
+      <Component
+        :is="layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'"
+        class="nav-item-title"
+        v-bind="getDynamicI18nProps(item.title, 'span')"
+      >
+        {{ item.title }}
+      </Component>
+    </Component>
+  </li>
+</template>
+
+<style lang="scss">
+.layout-horizontal-nav {
+  .nav-link a {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>