initial commit

2026-06-23 13:28:38 +07:00
commit 966ed115b2
590 changed files with 111412 additions and 0 deletions
@@ -0,0 +1,109 @@
+<script setup>
+import { useLayouts } from '@layouts'
+import {
+  HorizontalNavLink,
+  HorizontalNavPopper,
+} from '@layouts/components'
+import { config } from '@layouts/config'
+import { canViewNavMenuGroup } from '@layouts/plugins/casl'
+import { isNavGroupActive } from '@layouts/utils'
+
+const props = defineProps({
+  item: {
+    type: null,
+    required: true,
+  },
+  childrenAtEnd: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  isSubItem: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+
+defineOptions({ name: 'HorizontalNavGroup' })
+
+const route = useRoute()
+const router = useRouter()
+const { dynamicI18nProps, isAppRtl } = useLayouts()
+const isGroupActive = ref(false)
+
+watch(() => route.path, () => {
+  const isActive = isNavGroupActive(props.item.children, router)
+
+  isGroupActive.value = isActive
+}, { immediate: true })
+</script>
+
+<template>
+  <HorizontalNavPopper
+    v-if="canViewNavMenuGroup(item)"
+    :is-rtl="isAppRtl"
+    class="nav-group"
+    tag="li"
+    content-container-tag="ul"
+    :class="[{
+      'active': isGroupActive,
+      'children-at-end': childrenAtEnd,
+      'sub-item': isSubItem,
+      'disabled': item.disable,
+    }]"
+    :popper-inline-end="childrenAtEnd"
+  >
+    <div class="nav-group-label">
+      <Component
+        :is="config.app.iconRenderer || 'div'"
+        class="nav-item-icon"
+        v-bind="item.icon || config.verticalNav.defaultNavItemIconProps"
+      />
+      <Component
+        :is="config.app.enableI18n ? 'i18n-t' : 'span'"
+        v-bind="dynamicI18nProps(item.title, 'span')"
+        class="nav-item-title"
+      >
+        {{ item.title }}
+      </Component>
+      <Component
+        v-bind="config.icons.chevronDown"
+        :is="config.app.iconRenderer || 'div'"
+        class="nav-group-arrow"
+      />
+    </div>
+
+    <template #content>
+      <Component
+        :is="'children' in child ? 'HorizontalNavGroup' : HorizontalNavLink"
+        v-for="child in item.children"
+        :key="child.title"
+        :item="child"
+        children-at-end
+        is-sub-item
+      />
+    </template>
+  </HorizontalNavPopper>
+</template>
+
+<style lang="scss">
+.layout-horizontal-nav {
+  .nav-group {
+    .nav-group-label {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .popper-content {
+      z-index: 1;
+
+      > div {
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+    }
+  }
+}
+</style>